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: [email protected]

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.

mailto:[email protected]

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



8 01/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



9 01/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.

https://filezilla-project.org/

Manual do Usuário



10 01/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



11 01/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



12 01/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



13 01/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



14 01/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



15 01/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



16 01/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



17 01/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> <span class="topEspaco"></span><a href="@string.Format( "{0}AtualizarDadosUsuario", G.UrlCarrinho )" class="topLink fbits-link-minhaConta">@G.DadosComponente["FBITS:TopLink-Texto-MeuCadastro"]</a> <span class="topEspaco"></span><a href="@string.Format( "{0}ListaDeDesejos", G.UrlEcommerce )" class="topLink fbits-link-listaDesejos">@G.DadosComponente["FBITS:TopLink-Texto-ListaDesejos"]</a> </div>  </div> </div> <div class="headerBanner"> <div class="center"> <h2 class="h2-logo">  @FBITSLogo.Add() 

Manual do Usuário



18 01/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



19 01/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> <script type="text/javascript"> $(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 ); <script type="text/javascript"> _NEWSLETTERMODALATIVO = true; var _NEWSLETTERMODALEXPIRES = '@(expires > 0 ? expires : 1)'; </script> } @Html.RecursosJS( "fbits.newsletter.js" ) <div class="footer"> <div class="footerLinks"> <div class="center"> <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



20 01/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 class="selosFooter"> </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"> <div class="center"> <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



21 01/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



22 01/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() @FBITSCarrinho.Add() </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



23 01/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 class="topBar"> </div> <div class="head carrinhoHeader"> <div class="center"> @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



24 01/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 G = Fbits.Plataforma.BLL.Configuracoes.GerenciadorConfiguracoes; @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"> <div class="topBar"> @*//TODO: CRIAR TOP BAR*@ <div class="center">  @FBITSLogin.Add()  

Manual do Usuário



25 01/07/2015 14/07/2015 14/07/2015

Quadro 9: Exemplo 5 Cabeçalho Carrinho.

@using G = Fbits.Plataforma.BLL.Configuracoes.GerenciadorConfiguracoes; <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="center"> <div class="headerBanner"> @*//TODO CRIAR BANNER CABEÇALHO*@ </div>  @FBITSLogo.Add()   @FBITSCarrinho.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



26 01/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"> @FBITSCarrinho.Add() </div> </div> </div> <div id="fixed-bar-point" class="hide"></div> @Html.RecursosJS( "fbits.framework.js", "fbits.headerFloating.js" )

Manual do Usuário



27 01/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 ); <script type="text/javascript"> _NEWSLETTERMODALATIVO = true; var _NEWSLETTERMODALEXPIRES = '@(expires > 0 ? expires : 1)'; </script> } @Html.RecursosJS( "fbits.newsletter.js" ) <div class="footer"> <div class="footerLinks"> <div class="center"> <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



28 01/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> <div class="columnLinks col-footer-2"> <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> <div class="columnLinks col-footer-3"> <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> <li class="selosFooter"> <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="columnLinks col-footer-4"> <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"> <div class="center"> <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



29 01/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="center"> <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*@ <script type="text/javascript"> (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> <script type="text/javascript"> $('[data-lazyLoad=True]').lazyload({ threshold: 200, effect: "fadeIn" }); </script>

Manual do Usuário



30 01/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



31 01/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



32 01/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="[email protected]" 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="[email protected]" 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 );} @*COMPONENTE DE MATRIZ DE ATRIBUTOS*@ @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="[email protected]" class="prodVariante @classe">

Manual do Usuário



33 01/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 );} @*COMPONENTE DE MATRIZ DE ATRIBUTOS*@ <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



34 01/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="[email protected]" 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



35 01/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="#[email protected]"> <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="[email protected]"> @{ 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



36 01/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



37 01/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

<input type="hidden" value="Conteudo Original"/> @*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> <div class="interna cf"> @{ 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



38 01/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

<input type="hidden" value="Conteudo Original"/> <div class="interna cf">  <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



39 01/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



40 01/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



41 01/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



42 01/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



43 01/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

fabricantes\marcas e texto da barra exemplificado na Figura 22.

Figura 22: Configurações do F-Search.

Manual do Usuário



44 01/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



45 01/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



46 01/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



47 01/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



48 01/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.

Internet

Manual do Usuário Style Editor v. 3