Manual do Usuário Style Editor v. 3

Manual do Usuário v. 3
(contém arquivo anexo)

Manual do Usuário
A096 - Manual do Usuário Style Editor v. 3
Autor: Jean Richard Alteração: Aprovador: Rodrigo Schiavini
01/07/2015 14/07/2015 14/07/2015
TERMO DE CONFIDENCIALIDADE
As informações contidas neste documento são estritamente confidenciais
e de propriedade da FBITS S/A, sua distribuição só poderá ser feita a seus
Clientes Externos e Internos mediante autorização assinada. Estas informações
não poderão ser utilizadas para outro propósito, não podendo ser reveladas fora
de sua organização sem prévia autorização por escrito da FBITS S/A. É vedada
a geração de fotocópias deste documento, bem como sua reprodução ou
distribuição, no todo ou em parte, por qualquer meio, inclusive sob meio gráfico,
magnético, ótico, fotográfico ou eletrônico e informações ao mercado e/ou a
outras pessoas físicas e jurídicas, dará ensejo à indenizações por perdas e
danos que porventura seus administradores venham a sofrer em decorrência de
tal falta, recaindo essas responsabilidades, exclusivamente, sobre os signatários
deste compromisso, os quais serão apurados em juízo.
É de sua responsabilidade proteger as informações contra a divulgação a
terceiros, da mesma forma e com o mesmo grau de cautela com que protege
suas informações de importância similar.

Manual do Usuário
01/07/2015 14/07/2015 14/07/2015
Contatos do Suporte F-Store
E-mail: suporte.fstore@fbits.com.br
Telefone: +55 (41) 3039 6901
Skype: fbits.fstore
O QUE É?
O manual do usuário Style Editor provê informações e orientações sobre
todas as funcionalidades do produto Estyle Editor. Nosso objetivo é preparar
você para utilizar qualquer função do software e ter o melhor aproveitamento
para o seu negócio.
Para que você compreenda como funciona O Style Editor, neste manual
são incluídas as figuras das telas do software e a descrição das funções dos
campos em quadros. Para encontrar alguma questão que você tenha dúvida,
pode acessar os índices de Figuras, Quadros ou Sumário, pressionar a tecla
“Ctrl” do teclado e pressionar o botão do mouse na linha que deseja, como no
exemplo a seguir:
O Manual do Usuário Style Editor foi dividito em 6 partes, no capítulo 1,
descrevemos os canais de configurações da loja, que chamamos de interações
da loja.
No capítulo 2 comentamos sobre o Style Editor e a utilização dos itens
que fazem parte deste manual, no capítulo seguinte são descritas as
funcionalidades e utilização do Style Editor.

Manual do Usuário
01/07/2015 14/07/2015 14/07/2015
No capítulo 2.3 são descritas as funcionalidades dos templates e como
podemos interagir na exibição das páginas da loja, foram incluídos exemplos em
cada de cada template. Este manual acompanha um arquivo com os templates
de exemplos e em cada sessão são informados os nomes dos arquivos.
Dando sequência ao estudo, no quarto e quinto capítulos descrevemos
sobre Configuração de Componentes e no último capítulo são descritas as
funcionalidade de Disposição de layout.
As figuras de telas foram descritas para melhor entendimento das suas
funcionalidades. Em algumas situações destacamos mensagens como
importante em um quadro com cor diferenciada.

Manual do Usuário
01/07/2015 14/07/2015 14/07/2015
FIGURAS
Figura 1: Configuração de Acesso FileZilla. ................................................................................. 9
Figura 2: Diretório via FTp FileZilla. ............................................................................................ 10
Figura 3: Login Style Editor......................................................................................................... 13
Figura 4: Tela Inicial. ................................................................................................................... 14
Figura 5: Templates. ................................................................................................................... 15
Figura 6: Menu Template. ........................................................................................................... 16
Figura 7: Cabeçalho Site............................................................................................................. 17
Figura 8: Rodapé Site Click Lentes............................................................................................. 18
Figura 9: Cabeçalho Fixo Site..................................................................................................... 22
Figura 10: Cabeçalho Fechamento............................................................................................. 23
Figura 11: Cabeçalho Carrinho. .................................................................................................. 24
Figura 12: Cabeçalho Carrinho doudou. ..................................................................................... 24
Figura 13: Cabeçalho Fixo Carrinho. .......................................................................................... 26
Figura 14: Rodapé Carrinho........................................................................................................ 27
Figura 15: Template Página do Produto. .................................................................................... 30
Figura 16: Página do Produto. .................................................................................................... 31
Figura 17: Template Listas de Compras. .................................................................................... 36
Figura 18: Configurações de Componentes. .............................................................................. 39
Figura 19: Texto do Login da home. ........................................................................................... 40
Figura 20: MiniCart do Carrinho.................................................................................................. 41
Figura 21: Preço Off. ................................................................................................................... 42
Figura 22: Configurações do F-Search. ...................................................................................... 43
Figura 23: TopLink. ..................................................................................................................... 44
Figura 24: Configurações Spots.................................................................................................. 45
Figura 25: Spots exemplo para alterações. ................................................................................ 46
Figura 26: Disposição do Layout................................................................................................. 46
Figura 27: Compartilhamento...................................................................................................... 47
Figura 28: Página Principal. ........................................................................................................ 48
Figura 29: Produto....................................................................................................................... 48

Manual do Usuário
01/07/2015 14/07/2015 14/07/2015
QUADROS
Quadro 1: Funções Login Style Editor. ....................................................................................... 13
Quadro 2: Funções Tela Inicial. .................................................................................................. 14
Quadro 3: Funções Templates.................................................................................................... 15
Quadro 4: Funções Menu Template. .......................................................................................... 16
Quadro 5: Exemplo 1 cabeçalho Loja Virus................................................................................ 18
Quadro 6: Exemplo 2 Rodapé Click Lentes. ............................................................................... 21
Quadro 7: Exemplo 3 Cabeçalho Fixo Click Lentes.................................................................... 22
Quadro 8: Exemplo 4 Cabeçalho Fechamento........................................................................... 23
Quadro 9: Exemplo 5 Cabeçalho Carrinho. ................................................................................ 25
Quadro 10: Exemplo 6 Cabeçalho Fixo do Carrinho. ................................................................. 26
Quadro 11: Exemplo 7 Rodapé do carrinho................................................................................ 28
Quadro 12: Template Página do Produto. .................................................................................. 35
Quadro 13: Template Padrão Listas de Compras....................................................................... 37
Quadro 14: Lista de Compra Padrão Desktop............................................................................ 38

Manual do Usuário
01/07/2015 14/07/2015 14/07/2015
Sumário
1 INTERAÇÕES DA LOJA.............................................................................................. 8
1.1 ACESSO FTP E DIRETÓRIOS......................................................................... 9
2 STYLE EDITOR ......................................................................................................... 12
LOGIN.............................................................................................................. 13
TELA INICIAL .................................................................................................. 14
HOME / TEMPLATE........................................................................................ 15
Cabeçalho Site........................................................................................... 17
Rodapé Site ............................................................................................... 18
Cabeçalho Fixo.......................................................................................... 22
Cabeçalho Fechamento............................................................................. 23
Cabeçalho Carrinho................................................................................... 24
Cabeçalho Fixo Carrinho ........................................................................... 26
Rodapé Carrinho ....................................................................................... 27
Página do Produto ..................................................................................... 30
Listas de Compras..................................................................................... 36
Lista de Compra ...................................................................................... 38
CONFIGURAÇÕES COMPONENTES ........................................................... 39
2.4.1 Login .......................................................................................................... 40
2.4.2 MiniCart Carrinho....................................................................................... 41
2.4.3 Preço Off.................................................................................................... 42
2.4.4 Configurações do F-Search....................................................................... 43
2.4.5 TopLink ...................................................................................................... 44
CONFIGURAÇÕES SPOTS ........................................................................... 45
DISPOSIÇÃO DO LAYOUT ............................................................................ 46
2.6.1 Compartilhamento ..................................................................................... 47
2.6.2 Página Principal......................................................................................... 47
2.6.3 Produto ...................................................................................................... 48

Manual do Usuário
801/07/2015 14/07/2015 14/07/2015
1 INTERAÇÕES DA LOJA
A partir do layout aprovado, a implantação de uma loja tem acessos por
três entradas:
 Back Office também chamado de Admin (F-Store);
 Style Editor (SE);
 Diretórios via FTP.
A loja (site ou Front End) é composta pelo endereço loja.com.br que pode
variar para loja.ecommercestore.com.br.
O Back Office (Admin) também pode variar nesses endereços, mas
sempre acompanhando ao da loja, admin.loja.com.br e
admin.loja.ecommercestore.com.br.
Da mesma forma o Style Editor (SE) acompanha o endereçamento,
se.loja.com.br ou se.loja.ecommercestore.com.br.

Manual do Usuário
901/07/2015 14/07/2015 14/07/2015
1.1 ACESSO FTP E DIRETÓRIOS
Para acesso via FTP é necessário algum aplicativo para esse fim,
recomendamos o uso do FileZilla (https://filezilla-project.org/), por ser uma
ferramenta gratuita, de fácil manuseio e que contém todos os recursos
necessários. A Figura 1 demonstra a tela de acesso.
Figura 1: Configuração de Acesso FileZilla.
Na Figura 2 é demonstrado os diretórios que poderão conter arquivos para
serem manipulados ou incluir novos arquivos.

Manual do Usuário
1001/07/2015 14/07/2015 14/07/2015
Figura 2: Diretório via FTp FileZilla.
Os diretórios mais importantes, que contém arquivos manipuláveis na
implantação de uma plataforma são os seguintes:
 /i (imagens do layout, mantendo-se os mesmos nomes dos arquivos
existentes e apenas substituindo-os, facilita a implantação, podem-se
criar novas imagens conforme a necessidade);
 /f (arquivos de fontes que não sejam padrão web, por exemplo TTFs,
SVGs, WOFFs, EOTs);
 /t (templates de emails transacionais, caso seja necessário alguma
alteração);
 /c (arquivos de folhas de estilo CSS).

Manual do Usuário
1101/07/2015 14/07/2015 14/07/2015
A F-Store possui duas versões para a loja, uma para desktop e uma para
mobile. Dentro do diretório “c” editamos os seguintes arquivos:
 Styles.css (estilos gerais do site);
 Fechamento.css (estilos do carrinho ao fechamento);
 Header.css (estilos do cabeçalho do site);
 Footer.css (estilos do rodapé do site);
 Spot.css (estilos dos spots);
 Styles.mobile.css (estilos do site versão mobile);
 Fechamento.mobile.css (estilos do carrinho ao fechamento versão
mobile);

Manual do Usuário
1201/07/2015 14/07/2015 14/07/2015
2 STYLE EDITOR
Em Filosofia, autonomia é um conceito que determina a liberdade do
indivíduo em gerir livremente a sua vida, efetuando racionalmente as suas
próprias escolhas. Neste caso, a autonomia indica uma realidade que é dirigida
por uma lei própria, que apesar de ser diferente das outras, não é incompatível
com elas.
Pensando nesse conceito que a FBITS desenvolveu o Style Editor, para
dar liberdade de criação na sua loja. No Style Editor ou SE como chamamos
internamente, você pode alterar o layout da loja da maneira que acha melhor.
Você pode mudar os componentes de lugar, pode determinar o que deve ser
exibido no Spot, na página do produto e os textos exibidos. Além disso criamos
um arquivo com exemplos de templates para seguir.

Manual do Usuário
1301/07/2015 14/07/2015 14/07/2015
LOGIN
Acessando o SE pelo endereço que você recebeu pelo suporte, a primeira
tela que aparece é a tela de login para você poder se identificar com o usuário e
senha que também foi enviado pelo suporte.
A Figura 3 exemplifica a tela de login e Quadro 1 descreve as suas
funções.
Figura 3: Login Style Editor.
Usuário
Digite o nome do usuário. Caso não tenha usuário entre em conato com o suporte
para que seja fornecido.
Senha Digite a senha diferenciando de maiúsculas e minúsculas.
Lembrar de Mim Opção para o browser salvar as suas credenciais.
Pressione o botão para acessar o Style Editor.
Esqueci minha
senha
Possibilidade de recuperação de senha. Pressionando o link a senha é enviada
para o e mail do usuário, que foi enviado para o suporte como sendo o e-mail
principal.
Quadro 1: Funções Login Style Editor.

Manual do Usuário
1401/07/2015 14/07/2015 14/07/2015
TELA INICIAL
A tela inicial apresenta diversas funcionalidades, podemos observar no
exemplo da Figura 4, o Menu Principal, o botão de sair, os botões de Indexar e
Limpeza de Cache, as informações do usuário, o nome e descrição do
posicionamento das alterações em templates, e o versionamento da loja
(Desktop e Mobile). As suas funções são descritas no Quadro 2.
Figura 4: Tela Inicial.
Processo de indexação para colocar em prática as alterações
efetuadas. Importante! O processo de indexação é para ser
utilizado com muita cautela, pois se utilizado muitas vezes pode
reiniciar o servidor. Efetuar o máximo de alterações possíveis e
após, indexar. Não deve ser executado seguidamente! O uso
sequencial e repetitivo podem causar danos à estrutura da loja.
Limpa a cache do sistema e exibe os conteúdos alterados.
Acesso ao perfil do usuário para possíveis modificações.
Inclusão de um novo usuário.
Lista os usuários incluídos no SE.
Efetua a saída do Style Editor.
Efetua a saída do Style Editor.
Abre uma nova aba no browser com a loja.
Alterações que podem ser efetuadas através de templates
definidas.
Configurações em componentes ou spots.
Alterações do posicionamento do layout.
Alterações que podem ser efetuadas através de templates
definidas.
Quadro 2: Funções Tela Inicial.

Manual do Usuário
1501/07/2015 14/07/2015 14/07/2015
HOME / TEMPLATE
São os modelos (Templates) pré definidos que podem ser alterados,
semelhante ao exemplo da Figura 5 e as funções descritas no Quadro 3.
A F-Store possui duas versões, uma para desktop e outra para
dispositivos móveis.
Figura 5: Templates.
Abre tela de inclusão de templates para versão Desktop.
Abre tela de inclusão de templates para versão Mobile.
Quadro 3: Funções Templates.
As funções do editor são iguais para as duas versões e também para
todas as templates, semelhante ao da Figura 6, e suas funções são descritas no
Quadro 4.

Manual do Usuário
1601/07/2015 14/07/2015 14/07/2015
Figura 6: Menu Template.
Retorna para a página anterior.
Salva a template e guarda a versão.
Visualização da template em uma aba do browser. Importante! Desative o
Bloqueador de Popups.
Publica a template na loja.
Abre a tela de versões de templates incluídas, com a possibilidade de
publicar alguma versão passada ou voltar para a template padrão da loja.
Temas do editor. Dark ou Ligth. A Figura 4 utiliza o tema Dark.
Quadro 4: Funções Menu Template.
Nos capítulos a seguir são descritos os templates padrões, cada código é
seguido de um exemplo para desktop e um exemplo para móvel. Junto com este
manual você recebeu um arquivo contendo todos os Templates citados para que
tenha maior autonomia em poder modificar e analisar cada exemplo.

Manual do Usuário
1701/07/2015 14/07/2015 14/07/2015
Cabeçalho Site
São os cabeçalhos dos sites, podemos inserir códigos para alterar da
forma desejada. A Figura 7 demonstra o template padrão do Cabeçalho Site.
Figura 7: Cabeçalho Site.
O exemplo do Quadro 5 demonstra as inclusões feitas no template através
de javascript, html e texto.
Exemplo 1 Desktop lojavirus Exemplo 1 Mobile www.lojavirus.com.br
<div class="head">
<div class="topBar">
<div class="center">

<div class="toplinks">
<a class="ai fbits-link-chat" href="javascript:void(0)"><span
class="ico"></span>Fale Conosco</a>
<span class="fbit-sac-fone">SAC: (41) 3095-6170</span>
<span class="topEspaco"></span><a href="@string.Format(
"{0}HistoricoPedido", G.UrlCarrinho )" class="topLink fbits-link-
historicoPedido">@G.DadosComponente["FBITS:TopLink-Texto-HistoricoPedidos"]</a>
"{0}AtualizarDadosUsuario", G.UrlCarrinho )" class="topLink fbits-link-
minhaConta">@G.DadosComponente["FBITS:TopLink-Texto-MeuCadastro"]</a>
"{0}ListaDeDesejos", G.UrlEcommerce )" class="topLink fbits-link-
listaDesejos">@G.DadosComponente["FBITS:TopLink-Texto-ListaDesejos"]</a>
</div>

</div>
</div>
<div class="headerBanner">
<h2 class="h2-logo">

@FBITSLogo.Add()

Manual do Usuário
1801/07/2015 14/07/2015 14/07/2015
</h2>

@FBITSSearch.Add()


@FBITSLogin.Add()


@FBITSCarrinho.Add()

</div>
</div>
</div>
<div class="center menu-container">
@{Html.RenderAction( "MenuTopo", "Menu" );}
</div>
@if(Convert.ToBoolean( G.Dados["Search-Barra-Fixa-Ativa"] ))
{
Html.RenderPartial( "HeaderFloating" );
}
Quadro 5: Exemplo 1 cabeçalho Loja Virus.
Rodapé Site
São os rodapés dos sites, exibido quando o usuário acessa o site.
Podemos inserir códigos para alterar da forma desejada. A Figura 8 demonstra
a tela de rodapé do site da loja Click Lentes.
Figura 8: Rodapé Site Click Lentes.

Manual do Usuário
1901/07/2015 14/07/2015 14/07/2015
O exemplo do Quadro 6 demonstra as inclusões feitas no template através
de javascript, html e texto.
Exemplo 2 Desktop clicklentes Exemplo 2 Mobile padrao www.clicklentes.com.br
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.3&appId=488581951216994";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript">
var _NEWSLETTERMODALATIVO = false;
</script>
$(document).ready(function(){$("div[class='filtros'] li[class='filtroPai']
div[class='tituloPai']:contains('Fabricantes')").text("Marcas")});
</script>
@if(Convert.ToBoolean( G.Dados["Newsletter-Modal-Ativo"] ))
{
int expires = 1;
int.TryParse( G.Dados["Newsletter-Modal-DiasExpiracao"], out expires );
_NEWSLETTERMODALATIVO = true;
var _NEWSLETTERMODALEXPIRES = '@(expires > 0 ? expires : 1)';
</script>
}
@Html.RecursosJS( "fbits.newsletter.js" )
<div class="footer">
<div class="footerLinks">
<div class="columnLinks columnLinksSmall">
<div class="title columnHeader">Atendimento</div>
<a class="chat" href="#">
<div class="chatFooter">Chat Online</div>
</a>
<div class="title columnHeader-sac">SAC</div>
<div class="sacFoneFooter">
De qualquer lugar do Brasil<br/>
<span>@Html.Raw( G.Dados["Contato-TelefoneSAC"]
)</span><br/>
Seg a Sex das 8hs às 17hrs
</div>
<ul class="formas-pag-footer">
<li class="title columnHeader">Formas de Pagamento</li>
<li class="formasPagamento replace">Visa, American Express,
MasterCard, Visa, Paypal e Discover.</li>
</ul>
</div>
<ul class="columnLinks columnLinksWide">
<li class="title columnHeader">Quem Somos</li>
<li><a href="/QuemSomos">Quem Somos</a></li>
<li><a href="/CompraSegura">Compra Segura</a></li>
<li><a href="/PoliticaPrivacidade">Política de Privacidade</a></li>
<li class="title columnHeader">Certificações</li>
<li class="selosFooter">
<span class="selo-seal">
<img alt="Wildcard SSL Certificates" border=0
id="ss_img" src="https://seal.alphassl.com/SiteSeal/images/alpha-ssl-logo.gif" title="SSL Certificate">

Manual do Usuário
2001/07/2015 14/07/2015 14/07/2015
</span>
<a id="seloEbit" href="http://www.ebit.com.br/#clicklentes" target="_blank"
onclick="redir(this.href);"></a>
<script type="text/javascript" id="getSelo" src="https://imgs.ebit.com.br/ebitBR/selo-
ebit/js/getSelo.js?73201">
</script>
</li>
</ul>
<ul class="columnLinks columnLinksWide">
<li class="title small columnHeader">Ajuda e Suporte</li>
<li><a href="/ComoComprar">Como Comprar</a></li>
<li><a href="/ComolerReceita">Como Ler a Receita</a></li>
<li><a href="/PerguntasFrequentes">Perguntas Frequentes</a></li>
<li><a href="/TrocaseDevolucoes">Trocas e Devoluções</a></li>
<li><a href="/FormasPagamento">Formas de Pagamento</a></li>
<li><a href="/Entrega">Entrega</a></li>
<li class="title columnHeader">Certificados de Qualidade</li>
</li>
</ul>
<div class="columnLinks columnLinksWide ultimo">
<div class="title small columnHeader">Redes Sociais</div>
<div class="fb-page" data-href="https://www.facebook.com/clicklentes" data-small-header="false" data-
adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div
class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/clicklentes"><a
href="https://www.facebook.com/clicklentes">CLICKLENTES - Lentes de contato</a></blockquote></div></div>
</div>
</div>
</div>
<div class="copyright">
<address class="fbits-dadosEmpresa">
<span class="razaoSocial" data-nome="Razão
Social">@G.Dados["DadosEmpresa-RazaoSocial"]</span>
<span class="telefone" data-nome="Telefone">@Html.Raw(
G.Dados["Contato-TelefoneSAC"] ) | </span>
<span class="cnpj" data-nome="CNPJ">CNPJ: @G.Dados["DadosEmpresa-
CNPJ"] | </span>
<span class="InscricaoEstadual" data-nome="Inscrição Estadual">IE:
@G.Dados["DadosEmpresa-InscricaoEstadual"] | </span>
<span class="endereco" data-
nome="Endereço">@G.Dados["DadosEmpresa-Endereco"]</span>
<span class="bairro" data-nome="Bairro">@G.Dados["DadosEmpresa-
Bairro"]</span>
<span class="cidade" data-nome="Cidade">@G.Dados["DadosEmpresa-
Cidade"]</span>
<span class="estado" data-nome="Estado">@G.Dados["DadosEmpresa-
Estado"]</span>
<span class="cep" data-nome="CEP">@G.Dados["DadosEmpresa-
CEP"]</span>
</address>
<div class="centerContent">
<a target="_blank" href="http://www.fbits.com.br/solucao/f-store-plataforma-
de-ecommerce/?utm_source=Padrao&utm_medium=F-Store&utm_term=F-
Store&utm_content=Rodape&utm_campaign=MiniBannerRodapeHome" title="F-Store powered by FBITS"><i
class="fstore replace">F-Store powered by FBITS</i></a>
© Todos os direitos reservados. Eventuais promoções, descontos e
prazos de pagamento expostos aqui são válidos apenas para compras via <br/>
internet. As fotos, textos e layout aqui veiculados são de propriedade da
Loja. É proibida a utilização total ou parcial sem nossa autorização
</div>
</div>
</div>
</div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];

Manual do Usuário
2101/07/2015 14/07/2015 14/07/2015
Quadro 6: Exemplo 2 Rodapé Click Lentes.
Nos arquivos de exemplos, também incluímos o exemplo da loja Orange
Box Miniaturas.
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pt_BR/sdk.js#xfbml=1&appId=328086843983989&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
@Html.Partial( "_ViewSwitcher" )
@Zanox.InsertScript( Convert.ToBoolean( G.Dados["ZanoxAtivo"] ) )
@*//TODO:2.2*@
<div id="headerLoginMaster"></div>
Exemplo 2 Desktop orangeboxminiaturas www.orangeboxminiaturas.com.br

Manual do Usuário
2201/07/2015 14/07/2015 14/07/2015
Cabeçalho Fixo
Cabeçalho exibido quando o usuário se utiliza da barra de rolagem,
demonstrado na Figura 9.
Figura 9: Cabeçalho Fixo Site.
O exemplo do
Quadro 7 demonstra as inclusões feitas no template através de javascript,
html e texto.
Exemplo 3 Desktop clicklentes www.clicklentes.com.br
Quadro 7: Exemplo 3 Cabeçalho Fixo Click Lentes.
@using G = Fbits.Plataforma.BLL.Configuracoes.GerenciadorConfiguracoes;
@using Fbits.Plataforma.Model.ViewModel;
@using B = Fbits.Plataforma.BLL.Recursos.Balanceamento;
@using Fbits.Plataforma.BLL;
@{
string eCommerceURL =
Fbits.Plataforma.BLL.Configuracoes.GerenciadorConfiguracoes.UrlEcommerce;
string urlCarrinho = Fbits.Plataforma.BLL.Configuracoes.GerenciadorConfiguracoes.UrlCarrinho;
}
<div id="fixed-bar" class="fixed-bar hide">
<div class="bar-content">
<div id="fixed-bar-close" class="close"><i class="arrow left"></i></div>
<div class="col1">
<div class="logo">
@FBITSLogo.Add()
</div>
</div>
<div class="col2">
<div class="texto-entrega-header">
ENTREGA RÁPIDA
<span>Entregamos em todo o Brasil</span>
</div>
@FBITSSearch.AddFixa()
</div>
<div class="col3">
@FBITSLogin.Add()
</div>
</div>
</div>
<div id="fixed-bar-point" class="hide"></div>
@Html.RecursosJS( "fbits.framework.js", "fbits.headerFloating.js" )

Manual do Usuário
2301/07/2015 14/07/2015 14/07/2015
Cabeçalho Fechamento
Cabeçalho Fechamento é demonstrado durante o fluxo do pedido, é mais
simples e não deve conter muitos pontos de fuga. A Figura 10 demonstra o
Cabeçalho Fechamento, importante ressaltar que a faixa (Carrinho, Identificação
e Fechamento) é mostrada somente para localização.
Figura 10: Cabeçalho Fechamento.
O exemplo do Quadro 8 demonstra o Template do Cabeçalho de
Fechamento.
Exemplo 4 Desktop treinamento.ecommercestore.com.br
Quadro 8: Exemplo 4 Cabeçalho Fechamento.
<input type="hidden" value="Conteudo Original"/>
</div>
<div class="head carrinhoHeader">
@FBITSLogo.Add()
<div class="navHeader right">
<div class="sacNavHeader">
<i class="icon ifoneWhite"></i>
<div class="numFoneHd">@Html.Raw( G.Dados["Contato-TelefoneSAC"] )</div>
<div class="txtNavHeader">
HORÁRIO DE ATENDIMENTO:<br />
Segunda à sexta das 8:30h às 18:00h
</div>
</div>
<div class="chatNavHeader">
<a href="#">
<i class="icon ichathWhite"></i>
<div class="divChat">Acesse aqui</div>
</a>
</div>
</div>
</div>
</div>

Manual do Usuário
2401/07/2015 14/07/2015 14/07/2015
Cabeçalho Carrinho
Cabeçalho mostrado no carrinho, semelhante ao da Figura 11. A faixa
(Carrinho, Identificação e Fechamento) é mostrada somente para localização.
Figura 11: Cabeçalho Carrinho.
Na Figura 12 é demostrado o exemplo da loja doudou.
Figura 12: Cabeçalho Carrinho doudou.
O exemplo do Quadro 9 demonstra o Template do Cabeçalho do Carrinho.
Exemplo 5 Desktop doudou www.doudou.com.br
@using Fbits.Plataforma.Model.ViewModel;
@using B = Fbits.Plataforma.BLL.Recursos.Balanceamento;
@using Fbits.Plataforma.BLL;
@{
string urlEcommerce =
Fbits.Plataforma.BLL.Configuracoes.GerenciadorConfiguracoes.UrlEcommerce;
string urlCarrinho = Fbits.Plataforma.BLL.Configuracoes.GerenciadorConfiguracoes.UrlCarrinho;
}
<div class="head">
@*//TODO: CRIAR TOP BAR*@

@FBITSLogin.Add()

Manual do Usuário
2501/07/2015 14/07/2015 14/07/2015
Quadro 9: Exemplo 5 Cabeçalho Carrinho.
<div class="toplinks">
<a href="/Atendimento" class="topLink fbits-link-atendimento"><span
class="ico"></span>@G.DadosComponente["FBITS:TopLink-Texto-Atendimento"]</a>
<span class="topEspaco"></span>
<a href="@string.Format( "{0}AtualizarDadosUsuario", G.UrlCarrinho )"
class="topLink fbits-link-minhaConta"><span
class="ico"></span>@G.DadosComponente["FBITS:TopLink-Texto-MeuCadastro"]</a>
<span class="topEspaco"></span>
<a href="@string.Format( "{0}ListaDeDesejos", G.UrlEcommerce )" class="topLink
fbits-link-listaDesejos"><span class="ico"></span>@G.DadosComponente["FBITS:TopLink-Texto-
ListaDesejos"]</a>
</div>

</div>
</div>
<div class="headerBanner">
@*//TODO CRIAR BANNER CABEÇALHO*@
</div>

@FBITSLogo.Add()




@FBITSSearch.Add()

</div>
</div>
<div class="center menu-container">
@{Html.RenderAction( "MenuTopo", "Menu" );}
</div>
@if(Convert.ToBoolean( G.Dados["Search-Barra-Fixa-Ativa"] ))
{
Html.RenderPartial( "HeaderFloating" );
}

Manual do Usuário
2601/07/2015 14/07/2015 14/07/2015
Cabeçalho Fixo Carrinho
Exibe a barra quando utilizado o scroll no carrinho, semelhante ao da
Figura 13.
Figura 13: Cabeçalho Fixo Carrinho.
O exemplo do Quadro 10 demonstra o Template do Cabeçalho Fixo do
Carrinho.
Exemplo 6 Desktop mundohomem www.mundohomem.com.br
Quadro 10: Exemplo 6 Cabeçalho Fixo do Carrinho.
<div id="fixed-bar" class="fixed-bar hide">
<div class="bar-content">
<div id="fixed-bar-close" class="close"><i class="arrow left"></i></div>
<div class="col1">
@FBITSLogo.Add()
</div>
<div class="col2">
@FBITSLogin.Add()
@FBITSSearch.AddFixa()
</div>
<div class="col3">
</div>
</div>
</div>
<div id="fixed-bar-point" class="hide"></div>
@Html.RecursosJS( "fbits.framework.js", "fbits.headerFloating.js" )

Manual do Usuário
2701/07/2015 14/07/2015 14/07/2015
Rodapé Carrinho
Rodapé mostrado no carrinho, semelhante ao da Figura 14.
Figura 14: Rodapé Carrinho.
O exemplo do Quadro 11 demonstra o Template do Rodapé do Carrinho.
Exemplo 7 Desktop mundohomem www.mundohomem.com.br
@if(Convert.ToBoolean( G.Dados["Newsletter-Modal-Ativo"] ))
{
int expires = 1;
int.TryParse( G.Dados["Newsletter-Modal-DiasExpiracao"], out expires );
_NEWSLETTERMODALATIVO = true;
var _NEWSLETTERMODALEXPIRES = '@(expires > 0 ? expires : 1)';
</script>
}
@Html.RecursosJS( "fbits.newsletter.js" )
<div class="footer">
<div class="footerLinks">
<div class="columnLinks col-footer-1">
<h3 class="columnHeader">Atendimento</h3>
<div class="footer-sac">
<div class="footer-sac-title">SAC</div>
<div class="footer-sac-fone">(41) 3095-6170</div>
<div class="footer-sac-fone">(41) 3088-6170</div>
<div class="sac-footer-horario">
<span>Horário de atendimento:</span>
<span>Segunda à Sexta das 9h às 18h</span>
</div>
</div>
<h3 class="columnHeader">Social</h3>
<div class="redes-sociais">

Manual do Usuário
2801/07/2015 14/07/2015 14/07/2015
Quadro 11: Exemplo 7 Rodapé do carrinho.
<a class="icon-facebook" target="_blank"
href="https://www.facebook.com/LojaVirus41?fref=ts">Facebook</a>
<a class="icon-twitter" target="_blank" href="https://twitter.com/LojaVirus41">Twitter</a>
<a class="icon-gmais" target="_blank" href="https://plus.google.com/+lojavirus">Google +</a>
<a class="icon-instagram" target="_blank" href="http://instagram.com/lojavirus41">Instagram</a>
<a class="icon-pinterest" target="_blank"
href="http://www.pinterest.com/lojavirus41">Pinterest</a>
</div>
</div>
<ul class="footer-sobre-nos">
<li><h3 class="columnHeader">Sobre Nós</h3></li>
<li><a href="@(eCommerceURL)QuemSomos">Quem Somos</a></li>
<li><a href="javascript:void(0)" class="ai">Políticas de Privacidade</a></li>
<li><a href="javascript:void(0)" class="ai">Fale Conosco</a></li>
</ul>
<ul class="footer-ajuda-suporte">
<li><h3 class="columnHeader">Ajuda e Suporte</h3></li>
<li><a href="javascript:void(0)" class="ai">Previsão de Entrega</a></li>
<li><a href="javascript:void(0)" class="ai">Trocas e Devoluções</a></li>
<li><a href="javascript:void(0)" class="ai">Dúvidas Frequentes</a></li>
</ul>
</div>
<ul class="footer-formas-pagamento">
<li><h3 class="columnHeader">Formas de Pagamento</h3></li>
<li class="formasPagamento">
<img @LazyLoadExtensions.AdicionarSrc( B.Bal( G.UrlRecursosSSL, "i/formas-
pagamento.png" ), true ) alt="Formas de Pagamento" />
</li>
<li><h3 class="columnHeader">Certificados de Segurança</h3></li>
<a id="seloEbit" class="selo-ebit" href="http://www.ebit.com.br/loja-virus"
target="_blank" onclick="redir(this.href);">
Avaliação de Lojas e-bit
</a>
<div class="selo-paypal">
@*<img src="@(B.Bal( G.UrlRecursosSSL, "i/paypal-
certificado.png" ))" alt="Certisign" />*@
 <img
src="https://www.paypalobjects.com/webstatic/mktg/br/compra_segura_vertical.png" border="0"
alt="CompraSegura" /> 
</div>
</li>
</ul>
</div>
<div class="fb-like-box" data-href="https://www.facebook.com/LojaVirus41?fref=ts"
data-width="234" data-height="239" data-colorscheme="light" data-show-faces="true" data-
header="false" data-stream="false" data-show-border="false"></div>
</div>
</div>
</div>
<div class="copyright">
<div class="bg-address">
<address class="fbits-dadosEmpresa">
<span class="endereco" data-
nome="Endereço">@G.Dados["DadosEmpresa-Endereco"]</span>
<span class="bairro" data-
nome="Bairro">@G.Dados["DadosEmpresa-Bairro"]</span>
<span class="cidade" data-
nome="Cidade">@G.Dados["DadosEmpresa-Cidade"]</span>

Manual do Usuário
2901/07/2015 14/07/2015 14/07/2015
<span class="estado" data-
nome="Estado">@G.Dados["DadosEmpresa-Estado"]</span>
<span class="cep" data-nome="CEP">@G.Dados["DadosEmpresa-
CEP"]</span>
<span class="razaoSocial" data-nome="Razão
Social">@G.Dados["DadosEmpresa-RazaoSocial"]</span>
<span class="cnpj" data-
nome="CNPJ">@G.Dados["DadosEmpresa-CNPJ"]</span>
<span class="InscricaoEstadual" data-nome="Inscrição
Estadual">@G.Dados["DadosEmpresa-InscricaoEstadual"]</span>
</address>
</div>
</div>
<div class="txt-copy">
© <span>Todos os direitos reservados.</span> Eventuais promoções,
descontos e prazos de pagamento expostos aqui são válidos apenas para compras via internet. As
fotos, textos e layout aqui veiculados são de propriedade da Loja. É proibida a utilização total ou parcial
sem nossa autorização.
</div>
<a target="_blank" href="http://www.fbits.com.br/solucao/f-store-plataforma-de-
ecommerce/?utm_source=LojaVirus&utm_medium=F-Store&utm_term=F-
Store&utm_content=Rodape&utm_campaign=MiniBannerRodapeHome" title="F-Store powered by
FBITS"><i class="fstore replace">F-Store powered by FBITS</i></a>
</div>
</div>
</div>
@Html.Partial( "_ViewSwitcher" )
@Zanox.InsertScript( Convert.ToBoolean( G.Dados["ZanoxAtivo"] ) )
@*//TODO:2.2*@
<div id="headerLoginMaster"></div>
@* inicio script selo ebit loja virus
<script async="async" type="text/javascript" id="getSelo"
src="https://a248.e.akamai.net/f/248/52872/0s/img.ebit.com.br/ebitBR/selo-
ebit/js/getSelo.js?3255"></script>
fim script selo ebit loja virus*@
(function () {
window.NeoAssistTag = {};
NeoAssistTag.querystring = false;
NeoAssistTag.pageid = "";
NeoAssistTag.clientdomain = 'lojavirus.neoassist.com';
var na = document.createElement('script');
na.type = 'text/javascript';
na.async = true;
na.src = 'https://cdn-01.neoassist.com/n.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(na, s);
})();
</script>
$('[data-lazyLoad=True]').lazyload({ threshold: 200, effect: "fadeIn" });
</script>

Manual do Usuário
3001/07/2015 14/07/2015 14/07/2015
Página do Produto
O template da página do produto, temos a possibilidade de arrastar os
componentes para o template, basta selecionar o componente e arrastar para a
posição desejada, semelhante ao da Figura 15.
Figura 15: Template Página do Produto.

Manual do Usuário
3101/07/2015 14/07/2015 14/07/2015
Possibilidade de alteração dos itens encontrados na página do produto,
semelhante ao da Figura 16.
Figura 16: Página do Produto.
O Quadro 12 demonstra o template da página de produtos da loja Cobra
d’Água.

Manual do Usuário
3201/07/2015 14/07/2015 14/07/2015
Exemplo 8 Desktop cobradagua www.cobradagua.com.br

<div class="interna cf">
@Html.Partial( "BreadCrumb", Model )
@*Microdata de produto*@
<div itemscope itemtype="http://schema.org/Product">
<div id="produto-item-@itemId">
@*--> Coluna 1*@
<div id="imagem-pagina-produto" class="colunaProduto coluna1">
<div id="produto-imagem-@Model.ProdutoId" class="produto-imagem-eazyZoom" data-fancybox="True">
@{ViewBag.URLVideo = Model.URLVideo ?? "";}
@Html.Partial( "Componentes/Produto/FBITSImagem", new
Fbits.Plataforma.Model.ViewModel.FBITSProdutoComponenteViewModel { ProdutoViewModel = Model,
Configuracoes = new Dictionary<string, string> { } } )
@Html.Partial( "Componentes/Produto/FBITSImagemVarianteThumb", new
Fbits.Plataforma.Model.ViewModel.FBITSProdutoComponenteViewModel { ProdutoViewModel = Model,
Configuracoes = new Dictionary<string, string> { } } )
</div>
</div>
@*--> Coluna 2*@
<h1 id="produto-nome-@Model.ProdutoId" class="prodTitle title"
itemprop="name">@Model.VariantePrincipal.Nome</h1>
@{Html.RenderPartial( "FabricanteLogo", Model.Fabricante );}
<div class="produtoInfo colunaProduto coluna2">
<div class="sku">SKU @Model.VariantePrincipal.SKU</div>
@if(Model.Avaliacao != null)
{
@Html.Partial( "AvaliacaoProduto", Model.Avaliacao )
}
@if(Model.ValorReferente != null)
{
<span id="spnValorReferente" class="alert">
@Html.Raw( Model.ValorReferente )
</span>
}
@Html.Partial( "DadosLivro", Model )
@*COMPONENTE DE MATRIZ DE ATRIBUTOS*@
@{Html.RenderPartial( "Componentes/Produto/FBITSMatrizAtributos", componenteModel );}
@if(!Model.IsMatrizAtributos)
{
<div class="prodVariante">
<div id="dvGrupoSelecaoAtributos-0">
@{
Html.RenderPartial( "Produto/OpcoesCombo", Model ); //Transformar em componente.
Html.RenderPartial( "Produto/CombinacaoInexistente", Model.VariantePrincipal );
}
</div>
</div>
}
@if(Model.ParcelamentoPadrao != null)
{
string classe = "";
if(Model.VariantePrincipal.Assinatura != null && Model.VariantePrincipal.Assinatura.SomenteAssinatura)
{
classe = "hide";
}
<div id="produto-pagamentoparcelamento-@Model.ProdutoId" class="prodVariante @classe">

Manual do Usuário
3301/07/2015 14/07/2015 14/07/2015
@{Html.RenderPartial( "ParcelamentoPadrao", Model.ParcelamentoPadrao );}
</div>
}
@{
if(CalculaFretePaginaProdutoAtivo && Convert.ToInt16( G.Dados["Tipo-Exibicao-Frete-Pagina-
Produto"] ) == 1)
{
<div id="formulario-buscar-frete" class="forminline">
<div id="ulFrete" class="carrinhoTxtBlock">
<div id="cepCarrinho" class="details carrinhoInputBlock">
<div class="summary">Consulte frete e prazo de entrega</div>
<div class="details-content">
<label class="simule">
Simule o frete e o<br />
prazo de entrega:
</label>@Html.TextBox( "txtCalculaFreteProduto", null, htmlAttributes: new { id =
"txtCalculaFreteProduto", @class = "input" } )
<input type="button" class="btnCalculaFreteProduto btnCalcular bt " value="Ok" />
<br />
<a id="naoSeiCep" class="helpCep" rel="fancybox" href="../Validacao/BuscaCep">Não sabe
o CEP?</a>
<div class="errosFrete error">
</div>
<div class="resultado-frete">
<div id="valorFrete"></div>
<div class="frete-prazo"><span id="prazoFreteTexto"></span></div>
</div>
</div>
</div>
</div>
</div>
}
}
<div class="share">
<div class="shareFacebook" data-facebook-share="true">
<a target="_blank" href="http://www.facebook.com/sharer.php?u=@urlProduto" class="icon replace
preSocialF">Compartilhar no Facebook</a>
</div>
<div class="shareTwitter" data-twitter-share="true">
<a target="_blank" href="http://twitter.com/share?url=@urlProduto" class="icon replace
preSocialT">Compartilhar no Twitter</a>
</div>
</div>
<div class="acoesProd">
<a href="#divIndicacaoAmigo" id="indicaAmigo"><i class="indicar icon"></i>Indique este produto</a>
</div>
</div>
@*--> Coluna 3*@
<div class="colunaProduto coluna3">
@*COMPONENTE DE PREÇO OFF*@
@{Html.RenderPartial( "Componentes/Produto/FBITSPrecoOff", componenteModel );}
<div id="produto-variante-@itemId">
@{Html.RenderPartial( "ProdutoVariante" );}
</div>
@if(!Model.Televendas)
{
if(Model.IsMatrizAtributos)
{
linkListaDesejos = string.Format( "link-lista-de-desejos-produto-{0}", Model.ProdutoId );
<a href="javascript: addProdutoLista(@Model.ProdutoId)" id="@(linkListaDesejos)"
class="addListaDesejos link-add-lista-produto"><i class="iWish icon"></i>Adicionar à lista de desejos</a>
}
else
{
<a href="#" id="@(linkListaDesejos)" class="addListaDesejos link-add-lista-produto">

Manual do Usuário
3401/07/2015 14/07/2015 14/07/2015
<i class="iWish icon"></i>Adicionar à lista de desejos</a>
}
}
@if(Convert.ToBoolean( G.Dados["PopUp-Adicionar-Carrinho"] ) && !Model.IsMatrizAtributos)
{
<input type="button" value="Adicionar à cesta" id="produto-botao-adicionar-carrinho-
@Model.ProdutoId" class="bt addCarrinho" />
}
@{
if(CalculaFretePaginaProdutoAtivo && Convert.ToInt16( G.Dados["Tipo-Exibicao-Frete-Pagina-
Produto"] ) == 2)
{
<div class="freteProdutoLista fbits-elemento-aberto" data-elemento-tipoproduto="produtoNormal">
<div class="carrinhoTxtBlock">
<div class="details carrinhoInputBlock">
<div class="summary">Consulte frete e prazo de entrega</div>
<label class="simule">
Digite seu CEP:
</label>@Html.TextBox( "txtCalculaFreteProduto", null, htmlAttributes: new { id =
"txtCalculaFreteProduto", @class = "input" } )
<input type="button" class="btnCalculaFreteProduto btnCalcular bt " value="Ok" />
<br />
<a id="naoSeiCep" class="helpCep" rel="fancybox" href="../Validacao/BuscaCep">Não sabe o
CEP?</a>
<div class="errosFrete error">
</div>
<span class="resultado-frete"></span>
</div>
</div>
</div>
}
}
</div>
@if(Model.Prescricao != null && Model.Prescricao.ProdutoId != 0)
{
@Html.Partial( "Prescricao", Model.Prescricao )
}
<div id="fbits-produto-promocao-divulgacao">
@if(Model.PromocaoDivulgacao != null && Model.PromocaoDivulgacao.Count( x => x.TipoDivulgacao ==
Fbits.Plataforma.Model.Enums.TipoDivulgacao.Pagina_Produto ) > 0)
{
@Html.Partial( "Produto/PromocaoDivulgacao", Model.PromocaoDivulgacao )
}
</div>
</div>
<div class="fbits-produto-informacoes-extras">
@if(Model.CoresModelo.Count > 0)
{
@Html.Partial( "CoresProduto", Model.CoresModelo )
}
@if(Model.GrupoProdutosRelacionados.Count > 0)
{
@Html.Partial( "GrupoProdutosRelacionados", Model )
}
@if(Model.Informacoes.Count() > 0)
{
if(G.TipoExibicaoInformacaoProduto ==
Fbits.Plataforma.Model.Enums.TipoExibicaoInformacaoProduto.Padrao)
{
foreach(var item in Model.Informacoes)
{
Html.RenderPartial( "Informacao", item );
}
}
else if(G.TipoExibicaoInformacaoProduto ==
Fbits.Plataforma.Model.Enums.TipoExibicaoInformacaoProduto.Abas)

Manual do Usuário
3501/07/2015 14/07/2015 14/07/2015
{
<div class="informacao-abas" id="tp1">
<ul>
@foreach(var item in Model.Informacoes.Select( ( x, i ) => new { Value = x, Index = i } ))
{
<li>
<a href="#conteudo-@item.Index">
<h3 class="titleBox">@Html.Raw( item.Value.Titulo )</h3>
</a>
</li>
}
</ul>
@foreach(var item in Model.Informacoes.Select( ( x, i ) => new { Value = x, Index = i } ))
{
<div id="conteudo-@item.Index">
@{
Html.RenderPartial( "InformacaoAbas", item.Value );
}
</div>
}
</div>
}
}
</div>
<div class="avaliacao-Produto" id="avaliacao-Produto">
@if(Model.Avaliacao.Reviews.TotalItemCount > 0)
{
@Html.Partial( "ListaAvaliacaoProduto", Model.Avaliacao )
}
</div>
</div>
@Html.Partial( "Carrossel" )
<a id="avaliarProduto" name="avaliarProduto"></a>
<a id="divIndicacaoAmigo" name="divIndicacaoAmigo"></a>
@Html.Partial( "IndicacaoAmigo" )
@Html.Partial( "AvaliarProduto" )
</div>
<div class="clear"></div>
@Html.RecursosCSS( "jquery.sliderTabs.min.css" )
@Html.RecursosJS( "fbits.produto.calculafrete.js", "jquery.maskedinput-1.3.min.js" )
Quadro 12: Template Página do Produto.

Manual do Usuário
3601/07/2015 14/07/2015 14/07/2015
Listas de Compras
Da mesma forma que a template da página do produto, podemos arrastar
os componentes diretamente para o editor, basta selecionar o componente e
arrastar para o local desejado, semelhante ao da Figura 17.
Figura 17: Template Listas de Compras.

Manual do Usuário
3701/07/2015 14/07/2015 14/07/2015
O Quadro 13 mostra o template padrão utilizado para desktop em Listas
de Compras.
Exemplo 9 Desktop treinamento.ecommercestore.com.br
@*FORMULARIO DE FILTROS CONTEM (FILTROS, OPERADOR, ORDENAÇÃO E INPUT>HIDDEN BUSCA)*@
<div class="fbits-content-topo">
@{
Html.RenderPartial( "BreadCrumb" );
Html.RenderPartial( "Banner/Topo" );
}
</div>
@{
Html.RenderPartial( "Conteudo/Topo" );
Html.RenderPartial( "Filtro/Vertical" );
}
<div class="mainBar">
@{
Html.RenderPartial( "BreadCrumb" );
Html.RenderPartial( "Banner/Centro" );
Html.RenderPartial( "Banner/CentroLower" );
Html.RenderPartial( "Conteudo/Centro" );
}
@* Lista de spots *@
@if(vitrineCategoria == null || vitrineCategoria.Count <= 0 || !string.IsNullOrEmpty( Request.QueryString["filtro"] ))
{
ViewBag.FraseTempoBusca = string.Format( "Foram encontrados <span>{0:N0} produtos</span> nesta
categoria (em {1:N3} segundos)", Model.ResultadosBuscaPrimaria.TotalResultados,
Model.ResultadosBuscaPrimaria.TempoBusca.Milliseconds / 1000D );
@Html.Partial( "SpotListBuscaPrimaria" )
}

<div id="inicioRequisicao"></div>
</div>
@{Html.RenderPartial( "Conteudo/Rodape" );}
</div>
Quadro 13: Template Padrão Listas de Compras.

Manual do Usuário
3801/07/2015 14/07/2015 14/07/2015
Lista de Compra
O Quadro 14 mostra o template padrão utilizado para desktop na Lista de
Compra.
Exemplo 10 Desktop Treinamento.ecommercestore.com.br

<div itemscope itemtype="http://schema.org/Product">
<div>

<div id="imagem-pagina-listacompra" class="coluna-listacompra coluna1">
<div class="imagem-eazyZoom" data-fancybox="True">
<FBITS:Imagem />
<FBITS:ImagemVarianteThumb />
</div>
</div>

<div class="coluna-listacompra coluna2">
<h1 class="prodTitle title" itemprop="name"><FBITS:Nome />
</h1>
<FBITS:Avaliacao />
<FBITS:Preco />
<FBITS:Parcelamento />
<FBITS:CalculaFrete />
<div class="share">
<FBITS:Facebook />
<FBITS:Twitter />
</div>
<div class="acoesProd">
<a href="#divIndicacaoAmigo" id="indicaAmigo"><i class="indicar icon"></i>Indique esta lista</a>
</div>
</div>

<div class="coluna-listacompra coluna3">
<FBITS:Comprar />
<FBITS:ListaProdutos />
<FBITS:Comprar />
</div>
</div>
<div class="listacompra-descricao">
<FBITS:Descricao />
</div>
<div class="listacompra-avaliacoes">
<FBITS:Avaliacoes />
</div>
</div>
<a id="avaliarListaCompra" name="avaliarListaCompra"></a>
<a id="divIndicacaoAmigo" name="divIndicacaoAmigo"></a>
<FBITS:Indicar />
<FBITS:Avaliar />
</div>
<div class="clear"></div>
Quadro 14: Lista de Compra Padrão Desktop.

Manual do Usuário
3901/07/2015 14/07/2015 14/07/2015
CONFIGURAÇÕES COMPONENTES
As configurações de componentes são opções de mostrar ou não algum
item na loja, opções de alteração de texto e opções de alteração de
posicionamento. A Figura 18 demonstra a tela do Style Editor em configurações
de componentes.
Figura 18: Configurações de Componentes.

Manual do Usuário
4001/07/2015 14/07/2015 14/07/2015
2.4.1 Login
A Figura 19 demonstra a tela de alterações dos textos do componente de
login. Os exemplos abaixo se referem ao texto que se encontra na home da loja.
Figura 19: Texto do Login da home.

Manual do Usuário
4101/07/2015 14/07/2015 14/07/2015
2.4.2 MiniCart Carrinho
O MiniCart é um elemento que se encontra na parte superior da loja e
informa a quantidade de itens que o cliente colocou no carrinho e existem
diversas configurações possíveis que são exemplificadas na Figura 20.
Figura 20: MiniCart do Carrinho.

Manual do Usuário
4201/07/2015 14/07/2015 14/07/2015
2.4.3 Preço Off
Componente utilizado para demonstrar o percentual de desconto entre o
“preço de” e “preço por” na página de produto. Possibilidade de exibição ou não
exemplificado na Figura 21.
Figura 21: Preço Off.

Manual do Usuário
4301/07/2015 14/07/2015 14/07/2015
2.4.4 Configurações do F-Search
A barra de busca dos produtos (F-Search), fica na parte superior da loja e
podemos configurar de diversas formas, com filtros de fabricantes,
posicionamento e texto do botão de busca, posição do filtro de
fabricantesmarcas e texto da barra exemplificado na Figura 22.
Figura 22: Configurações do F-Search.

Manual do Usuário
4401/07/2015 14/07/2015 14/07/2015
2.4.5 TopLink
Possibilidade de alteração do texto dos links no topo da loja, semelhante
ao da Figura 23.
Figura 23: TopLink.

Manual do Usuário
4501/07/2015 14/07/2015 14/07/2015
CONFIGURAÇÕES SPOTS
Em Configurações Spots temos diversas opções, dentre elas, alteração
do layout, textos e botões, semelhante ao da Figura 24.
Figura 24: Configurações Spots.
As alterações das configurações dos spots podem ser vistas em tempo
real no spot centralizado no meio da tela, semelhante ao da Figura 25. Também
podemos notar o segundo spot que é executado ao passar o cursor do mouse,
chamado de imagem secundária do Spot.
Pelo fato das configurações serem auto intuitivas e cada alteração poder
ser observada no spot de exemplo, não iremos abordar este conteúdo no
manual, por se tornar repetitivo e não agregar informação.

Manual do Usuário
4601/07/2015 14/07/2015 14/07/2015
Figura 25: Spots exemplo para alterações.
DISPOSIÇÃO DO LAYOUT
São definidas os posicionamento de diversos conteúdos nas páginas do
site, semelhante ao da Figura 26.
Figura 26: Disposição do Layout.

Manual do Usuário
4701/07/2015 14/07/2015 14/07/2015
2.6.1 Compartilhamento
Possibilidade de alteração do posicionamento dos itens das páginas,
semelhante ao da Figura 27. Arraste o item para a posição desejada ou inative
o item e pressione o botão .
Essas alterações surtirão efeito nas páginas criadas pelo F-Search, como:
Categorias, Marcas, Gêneros, Editora, Autor, Listas de compras ou alguma
página criada manualmente no F-Search, excluem-se dessa lista a home e a
página de produtos.
Figura 27: Compartilhamento.
2.6.2 Página Principal
Também chamada de home, a página principal, oferece os recursos de
posicionamento e inativar, semelhante ao da Figura 28. Arraste o item para a
posição desejada ou inative o item e pressione o botão .

Manual do Usuário
4801/07/2015 14/07/2015 14/07/2015
Figura 28: Página Principal.
2.6.3 Produto
Possibilidade de alteração dos itens da página de produto, semelhante ao
da Figura 29. Arraste o item para a posição desejada ou inative o item e
pressione o botão .
Figura 29: Produto.

Manual do Usuário Style Editor v. 3

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Manual do Usuário Style Editor v. 3

Semelhante a Manual do Usuário Style Editor v. 3 (20)

Mais de Rodrigo Schiavini

Mais de Rodrigo Schiavini (14)

Manual do Usuário Style Editor v. 3