Style Editor

Voltar

Interações da Loja

A partir do layout aprovado, a implantação de uma loja tem acessos por duas entradas:

  • Back Office também chamado de Admin (F-Store);
  • Style Editor (SE);

 

intera_es_da_loja

 

A loja (site) é composta pelo endereço loja.com.br que pode variar para loja.ecommercestore.com.br.

O Back Office (Admin ou plataforma) 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.

 

 

 

 

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).

 

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:

 

  • css (estilos gerais do site);
  • css (estilos do carrinho ao fechamento);
  • css (estilos do cabeçalho do site);
  • css (estilos do rodapé do site);
  • css (estilos dos spots);
  • mobile.css (estilos do site versão mobile);
  • mobile.css (estilos do carrinho ao fechamento versão mobile);

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 achar melhor. Você pode mudar os componentes de lugar, pode determinar o que deve ser exibido no Spot, na página do produto e nos textos. Além disso, criamos um arquivo de templates para você seguir como exemplo.

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 abaixo exemplifica a tela de login e Quadro abaixo descreve as suas funções.

login

 

UsuárioDigite o nome do usuário. Caso não tenha usuário entre em conato com o suporte para que seja fornecido.
SenhaDigite a senha diferenciando de maiúsculas e minúsculas.
Lembrar de MimOpção para o browser salvar as suas credenciais.
AcessarPressione o botão para acessar o Style Editor.
Esqueci minha senhaPossibilidade 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.

Tela Inicial

A tela inicial apresenta diversas funcionalidades, podemos observar no exemplo da Figura abaixo, o Menu Principal, o botão de sair, os botões de Indexar e Limpeza de Cache que executam as alterações no site da loja e as informações do perfil do usuário:tela-inicial

 

As suas funções são descritas no Quadro abaixo.

 

IndexarProcesso de indexação para colocar em prática as alterações efetuadas. O processo de indexar a loja se faz necessário na inclusão\alteração de Produtos, Banners e Hotsites. 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.
Limpar CacheProcesso para requisitar as alterações efetuadas no admin para serem exibidas no site (Loja).
Meu PerfilAcesso ao perfil do usuário para possíveis modificações.
Novo UsuárioInclusão de um novo usuário.
Listar UsuárioLista os usuários incluídos no SE.
LogoutEfetua a saída do Style Editor.
Nome do UsuárioEfetua a saída do Style Editor.
ProduçãoSão as funcionalidades sobre: Gerenciador de Posicionamento, Gerenciador de Templates e Gerenciador de Layout. Atenção! Você está em modo PRODUÇÃO. Todas as alterações publicadas surtirão efeito no seu SITE.
Não envie arquivos de teste nesse modo. Você pode usar o modo Homologação para fazer testes.
HomologaçãoSão as funções sobre: Gerenciador de Template e Gerenciador de Layout. Atenção! Você está em modo HOMOLOGAÇÃO. Todos os arquivos enviados ou alterados aqui terão a extensão ".hlog" adicionada ao nome. Esses arquivos só poderão ser vistos na plataforma em modo homologação. Nenhuma alteração feita aqui afetará o ambiente de produção. Você não pode excluir ou renomear arquivos e pastas nesse modo.
ArquivosSão as funcionalidades sobre: Robots e Cores.
ConfiguraçõesDiversas configurações da loja.

Menu Produção

Importante!

Todas as alterações realizadas no menu Produção serão publicadas imediatamente no ambiente de produção! Para poder analisar é necessário desenvolver antes no menu de Homologação, avaliar se existem erros, validar e após entrar no menu de produção e publicar as alterações.

 

menu-producao

No menu Produção são apresentadas as seguintes funções:

 

  • Gerenciador de Posicionamento, responsável pelo posicionamento dos blocos das página compartilhadas, página principal (home) e página de produtos;

 

  • Gerenciador de Templates, responsável pela edição em html do cabeçalho, rodapé, produto e spot;

 

  • Gerenciador de Layout, responsável pelo acesso as pastas que contém arquivos manipuláveis da plataforma;

 

 

Gerenciador de Posicionamento

posicionamento

São definidos os posicionamento de diversos conteúdos nas páginas do site. Existe a possibilidade de inativar um bloco, ativar e arrastar para um posicionamento específico.

 

Possibilidade de alteração do posicionamento dos blocos das páginas. Arraste o bloco para a posição desejada ou inative o bloco e pressione o botão “Salvar”.

 

Essas alterações surtirão efeito nas páginas : Compartilhadas (Categorias, Marcas, Gêneros, Editora, Autor, Listas de compras),  home e a página de produtos.

 

Gerenciador de Templates

 

São os modelos (Templates) pré definidos que podem ser alterados, semelhante ao exemplo da Figura abaixo.

A FBITS STORE é responsiva e possui a opção mobile. Quando ativada carrega páginas mais simples e leves. No caso de estar desativada a versão desktop responsiva se adaptará a todos os tamanhos de tela, inclusive de dispositivos móveis. Neste caso a experiência de navegação fica mais rica.

gerenciador-de-templates

Desktop – Abre tela de inclusão de templates para versão Desktop.

Mobile – Abre tela de inclusão de templates para versão Mobile.

 

As funções do editor são iguais para as duas versões e também para todas as templates, semelhante ao da Figura abaixo, e suas funções são descritas no Quadro abaixo.

editor-de-templates

 

Salvar TemplateSalva a template e guarda a versão.
Visualizar TemplateVisualização da template no ambiente de produção. Importante! Desative o Bloqueador de Popups.
Publicar TemplatePublica a template na produção.
VersõesAbre 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.

 

Gerenciador de Layout

 

gerenciador-de-layout

 

Os diretórios mais importantes, que contém arquivos manipuláveis na plataforma são os seguintes:

 

  • /Banner (são exibidos os banners carregados na loja);

 

  • /c (arquivos de folhas de estilo CSS).A FBITS Store possui duas versões para a loja, uma para desktop e uma para mobile. Dentro do diretório “c” editamos os seguintes arquivos, os demais arquivos são ignorados:

                        /c/responsive-desktop.css

                       /c/responsive-tablet.css

                      /c/styles.css

  • /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);

 

  • /Selos (são exibidos os selos carregados nos spots de produtos da loja);

 

  • /t (templates de emails transacionais, caso seja necessário alguma alteração nos textos ou layout);

 

 

Menu Homologação

Importante!

Todas as alterações realizadas no menu Homologação não serão publicadas no ambiente de Produção!

 

menu-homologacao

 

No menu Homologação são apresentadas as seguintes funções:

 

  • Gerenciador de Templates, responsável pela edição em html do cabeçalho, rodapé, produto e spot;

 

  • Gerenciador de Layout, responsável pelo acesso as pastas que contém arquivos manipuláveis da plataforma;

 

Gerenciador de Templates

Importante!

As alterações realizadas no Gerenciador de Templates Homologação não serão publicadas no ambiente de Produção! É necessário copiar o código alterado e colar na produção! Este ambiente foi criado para poder visualizar as possíveis alterações antes da publicação no ambiente de Produção.

São os modelos (Templates) pré definidos que podem ser alterados, semelhante ao exemplo da Figura abaixo.

A FBITS STORE é responsiva e possui a opção mobile. Quando ativada carrega páginas mais simples e leves. No caso de estar desativada a versão desktop responsiva se adaptará a todos os tamanhos de tela, inclusive de dispositivos móveis. Neste caso a experiência de navegação fica mais rica.
gerenciador-de-templates-homologacao

 

Desktop – Abre tela de inclusão de templates para versão Desktop.

Mobile – Abre tela de inclusão de templates para versão Mobile.

 

As funções do editor são iguais para as duas versões e também para todas as templates, semelhante ao da Figura abaixo, e suas funções são descritas no Quadro abaixo.

editor-de-templates-homologacao

VoltarVolta para a página inicial de template.
Modo de HomologaçãoExibe a loja com as alterações na template.
Salvar TemplateSalva a template e cria o versionamento.
VersãoExibe as versões alteradas da template.
Tag AtributosPossibilidade de arrastar a tag para dentro do editor e exibir alguma função.

Gerenciador de Layout

gerenciador-de-layout-homologacao

 

Quando alterado algum arquivo e salvo o Style Editor cria um segundo arquivo com uma extensão “hlog”, por exemplo, o arquivo “core.css”, a alteração poderá ser visualizada no arquivo “core.hlog.css”

Editar um arquivo

edicao-de-um-arquivo-homologacao

 

AtualizarVolta para as pastas iniciais.
VisualizarAbre a página da loja para visualizar a alteração.
Publicar ArquivosExibe a tela para seleção dos arquivos com extensão "hlog" (alterados), para serem publicados no ambiente de Produção.
->Lista os diretórios e arquivos.
. . .Exibe as funções de arquivos.
Publicar Arquivo(s)Upload de arquivos alterados, quando baixados para a máquina local.
Baixar ArquivoExecuta o download do arquivo para a máquina local.
Editar ArquivoEdita o arquivo no editor do Style Editor. Possibilidade de realizar as alterações sem baixar para a máquina local.
Nova PastaCria uma nova pasta.

 

Arquivos

Os arquivos são interações nas páginas que serão permitidas as visualizações pelos robôs e nas cores utilizadas na loja.

 

Robots.xml

 

Os robôs dos buscadores são aplicativos que navegam pela internet através dos links encontrados nas páginas, em busca de conteúdo a ser indexado e exibido nos resultados de busca. Porém, você pode optar por não ter algumas de suas páginas exibidas nos resultados de busca, como por exemplo:

  • Páginas de Login – uma página de login é uma área restrita, como acesso à intranet, geralmente não deve ser indexada;
  • Páginas de conteúdo repetido – Caso você tenha, por exemplo, diversas Landing Pages com conteúdo bastante similar rodando para suas campanhas Google AdWords, deve bloquear as cópias e deixar apenas uma versão ser indexada pelo Google, minimizando o problema do conteúdo duplicado;
  • Páginas de impressão – Se seu site tiver versões para tela e impressão sendo indexadas, elimine a versão para impressão do índice do Google.

 

Como o próprio nome já diz, robots.txt é um arquivo no formato .txt (bloco de notas). Funciona como um filtro para os robôs dos sites de busca e faz com que os webmasters controlem permissões de acesso a determinadas páginas ou pastas dos sites. O robots.txt controla qual informação de um site deve ou não deve ser indexada pelos sites de busca. A sintaxe do arquivo é bem simples, e deve ser colocada pelo webmaster responsável pelo site na raiz da hospedagem. O próprio Google usa um arquivo em http://www.google.com/robots.txt, e navegar por ele é no mínimo curioso. Semelhante ao exemplo abaixo:

 

 

User-agent: *

Disallow: /search

Allow: /search/about

Disallow: /sdch

Disallow: /groups

Disallow: /catalogs

Allow: /catalogs/about

Allow: /catalogs/p?

Disallow: /catalogues

Sitemap: https://www.google.com/edu/sitemap.xml

Sitemap: https://www.google.com/work/sitemap.xml

 

O arquivo robots.txt tem o papel de criar uma política de acesso aos Robots. Para a execução dessas tarefas, há palavras reservadas, ou seja, palavras com a função de comandos que permitirão ou não o acesso a determinados diretórios ou páginas de um site. Vejamos os principais comandos do arquivo robots.txt:

User-agent

A função do comando user-agent é listar quais robôs devem seguir as regras indicadas no arquivo robots.txt. Supondo que você deseje somente que o mecanismo de busca do Google siga as definições definidas no arquivo robots.txt,basta indicar o User-agent como Googlebot. Eis as principais opções:

 

  • Google: User-agent: Googlebot
  • Google Imagens: User-agent: Googlebot-images
  • Google Adwords: User-agent: Adsbot-Google
  • Google Adsense: User-agent: Mediapartners-Google
  • Yahoo: User-agent: Slurp
  • Bing: User-agent: Bingbot
  • Todos os mecanismos: User-agent: * (ou simplesmente não incluir o comando user-agent)

 

Disallow

O comando instrui os sites de busca sobre quais diretórios ou páginas não devem ser incluídas no índice. Exemplos:

 

  • Disallow: /prod – orienta aos robots a não indexarem pastas ou arquivos que comecem com “prod”;
  • Disallow: /prod/ – orienta aos robots a não indexarem conteúdo dentro da pasta “prod”
  • Disallow: print1.html – orienta aos robots a não indexarem conteúdo da página print1.html.

 

Allow

O comando Allow orienta aos robots qual diretório ou página deve ter o conteúdo indexado. Diretórios e páginas são por definição sempre permitidos. Assim, este comando deve ser utilizado apenas em situações em que o webmaster bloqueou o acesso a um diretório por meio do comando Disallow, mas gostaria de ter indexado um arquivo ou sub-diretório dentro do diretório bloqueado. Note por exemplo no robots.txt do Google, logo no início, as duas linhas abaixo. O Allow permite que seja indexado o diretório /about abaixo do diretório /catalogs.

 

  • Disallow: /catalogs
  • Allow: /catalogs/about

 

Sitemap

Uma outra função permitia pelo robots.txt é a indicação do caminho e nome do sitemap em formato XML do site. A ferramenta para Webmasters do Google, porém, oferece um maior controle e visibilidade para a mesma função – comunicar ao Google onde está o ou os arquivos sitemap. Note como o Google submete, em seu robots.txt, diversos sitemaps:

 

  • Sitemap: http://www.google.com/hostednews/sitemap_index.xml
  • Sitemap: http://www.google.com/sitemaps_webmasters.xml
  • Sitemap: http://www.google.com/ventures/sitemap_ventures.xml
  • Sitemap: http://www.gstatic.com/dictionary/static/sitemaps/sitemap_index.xml
  • Sitemap: http://www.gstatic.com/earth/gallery/sitemaps/sitemap.xml
  • Sitemap: http://www.gstatic.com/s2/sitemaps/profiles-sitemap.xml
  • Sitemap: http://www.gstatic.com/trends/websites/sitemaps/sitemapindex.xml

Como veremos abaixo em exemplos reais de robots.txt, é muito fácil acessar o conteúdo de arquivos robots.txt de qualquer site, inclusive de concorrentes. Assim, cuidado com o que é incluído nesse arquivo. Evite colocar arquivos confidenciais. Nesses casos, o ideal é utilizar a meta tag robots (meta name = “robots”).

Exemplo: o webmaster não deseja que o conteúdo do diretório/docs seja indexado pelos robots, então, bloqueou o acesso ao diretório /docs com o comando “Disallow: /docs” no arquivo robots.txt. Dentro desse diretório, porém, existe um sub-diretório chamado “public”, que deve ter seu conteúdo indexado. Para que isso aconteça, basta usar no arquivo robots.txt a instrução “Allow: /docs/public/”.

Para olhar exemplos de arquivos robots.txt, saia navegando pela internet e inclua o arquivo /robots.txt na raíz dos sites visitados para verificar se eles utilizam o arquivo robots.txt. Veja abaixo alguns exemplos:

 

  • Google – www.google.com.br/robots.txt – alguns sites interessantes listados;
  • Facebook – www.facebook.com/robots.txt – Veja como este sitemap utiilza áreas separadas para cada Bot (mas sem necessidade, visto que os comandos parecem ser os mesmos para todos);
  • Casa Branca – www.whitehouse.gov/robots.txt – note a correta utilização do comando Disallow para remover áreas de login, como Disallow: /user/password/ e Disallow: /user/login/ ;
  • Abradi – www.abradi.com.br/robots.txt – Bloqueia acesso às áreas administrativas do WordPress;
  • COB – www.cob.org.br/robots.txt – Bloqueia o acesso a uma área de uploads, provavelmente de arquivos submetidos por usuários.

 

Inclusão das funções que serão permitidas interação com os motores de busca, exemplificado na Figura abaixo.

robots

 

 

Cores.txt

São incluídas as cores utilizados pela F-Store, semelhante ao da Figura abaixo. É possível notar que podemos colocar também nomes que se identificam com a cor, caso o usuário venha a utilizar algum nome semelhante para a cor e Regex.

 

Cores TXT

 

Corese.xml

Possibilidade de inclusão das cores em XML, semelhante ao da Figura abaixo.

Cores XML

Configurações de Campos de Busca

São os campos que a FBITS Store deve verificar para trazer os produtos na página de busca, referente ao termo digitado pelo cliente na barra de pesquisa da loja.

Possibilidade de configurações nos campo de busca, podendo ativar ou inativar as opções, semelhante ao da Figura abaixo.

campos-de-busca

Configuração de Ordenação

São exibidos em todas as páginas que contém produtos e são utilizados para ordenar os produtos mediante cada função.

É possível ativar ou inativar a função e arrastar para a ordem desejada, semelhante ao da figura abaixo.

 

campos-de-ordencao

Configurações de Componentes

As configurações de componentes são opções para 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 abaixo demonstra a tela do Style Editor em configurações de componentes.

configuracao-de-componentes

    Imagens Miniatura

 

São as imagens que ficam abaixo da imagem principal na página do produto, semelhante ao exemplo da Figura abaixo.

 

Imagens Miniatura

Utilizado para exibir as miniaturas das imagens do produto, com parâmetros:

  • “orientacao” podendo conter: “horizontal” ou “vertical”;
  • “videopos” podendo conter “primeiro” ou “ultimo”;
  • “videoplay” podendo conter: “auto” para reprodução automática do vídeo;

 

imagens-miniatura

    Login

 

A Figura abaixo 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.

 

configuracao-de-login

    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 abaixo.

mini-cart

 

    Nome

 

Utilizado para exibir o nome do produto ou do produto variante na página do produto, semelhante ao da Figura abaixo.

 

Nome na pagina do produto

 

nome

 

    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 abaixo.

 

preco-off

 

    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 abaixo.

Campo Busca

 

configuracoes-do-search

    TopLink

 

Possibilidade de alteração do texto dos links no topo da loja, semelhante ao da Figura abaixo.

 

Top Link

 

toplink

Configurações de Spot

Em Configurações Spots temos diversas opções, dentre elas, alteração do layout, textos e botões, semelhante ao da Figura abaixo.

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 abaixo. 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.

spot

 

Configurações de Etiquetas

A Figura abaixo exemplifica a tela de etiquetas e é possível observar diversas etiquetas cadastradas. As etiquetas são uma forma de divulgação de promoções em produtos, diferentes dos selos que são incluídos nos produtos através de uma promoção, as etiquetas são automática seguindo algumas regras que iremos analisar a seguir:

  • Essas etiquetas são padrões, não é possível incluir ou excluir etiquetas.
  • Temos a possibilidade de arrastar as etiquetas na ordem que for necessária.
  • As opções Spot e Produto são os locais de exibição das etiquetas, podendo escolher as duas opções.

A opção Parada é uma regra que diz: quando selecionada em uma das etiquetas, aquelas que estiverem abaixo dela não serão exibidas.

etiquetas

 

O Quadro abaixo descreve as regras e funções da tela de etiquetas.

 

Frete GrátisVerifica no cadastro do produto se contém frete grátis.
LançamentoVerifica a data de cadastro do produto e é considerado lançamento os produtos cadastrados nos últimos 90 dias.
PromoçãoVerifica se os produtos possuem promoções.
%OFFÉ apresentada a etiqueta quando tem o desconto no preço de - preço por.
Troca GrátisVerifica no cadastro do produto se ele contém troca grátis.
SeloVerifica se o produto contém alguma promoção com divulgação de selo.
DivulgaçãoVerifica se o produto contém conteúdo de divulgação em alguma promoção.
SpotOpção de divulgação das etiquetas no spot do produto.
ProdutoOpção de divulgação na página do produto.
ParadaÉ o ponto de parada, que quer dizer que a partir da etiqueta selecionada para baixo, as etiquetas não serão visíveis.
VoltarBotão para voltar para a tela anterior.
SalvarSalva as opções alteradas.

Configurações de Imagens

Selecione o campo para alteração da altura ou largura da imagem em pixels, semelhante ao da Figura abaixo.

tamanho-de-imagens