Guia do Desenvolvimento de Layout
Neste artigo você obterá todas as informações necessárias para desenvolver um layout de loja virtual na Plataforma BW Commerce.
Buscamos descrever de forma clara a utilização de cada componente, bem como apersentamos exemplos de sua utilização.
Tecnologias utilizadas
Utilizamos as seguintes tecnologias para desenvolver nossos layouts:
- Twig
- JavaScript
- CSS3
- HTML5
Bibliotecas externas já incluídas por padrão:
- Bootstrap 3.4 para construção de layout.
- Owl Carousel 2 para a implementação de carrosséis.
- FontAwesome 4 para adicionar ícones.
Primeiros Passos
Para faciliar sua jornada, recomendamos que instale o tema BW Store, disponível gratuitamente em nossa loja de temas.
A partir deste ponto, você poderá editar o código fonte.
No painel admnistrativo, acesse Personalizar > Layout.
No canto superior direito, clique no ícone de opções () e selecione a opção Editar código fonte
Será aberto o editor de código, mostrando no painel esquerdo a estrutura de arquivos e pastas do tema.
Para editar um arquivo, navegue pelas pastas e selecione o arquivo desejado.
Também é possível excluir e adicionar novos arquivos.
Abaixo você pode conferir informações mais detalhadas sobre como construir um layout.
Estrutura de pastas e arquivos
tema
/img
/font
webfont.woff2
/css
temlate.min.css
import.css
/html
footer.html
header.html
home.html
index.html
/js
custom.js
editor.json
/css – Pasta contendo arquivo temlate.min.css contendo as customizações.
/fonts – Pasta contendo as fontes importadas pelo temlate.min.css
OBS: @imports de fontes externas devem ser incluídas num arquivo chamado import.css e colocado na pasta /fonts
/html – Pasta contendo os arquivos html que compõe a estrutura do layout.
/img – Pasta contendo as imagens que compõem o layout.
Não devem ser criadas subpastas dentro das pastas.
/js – Pasta contendo o arquivo do javascript utilizado no visual e o arquivo do editor visual do tema.
custom.js Arquivo contendo o código javascript utilizado no layout.
editor.json Arquivo contendo o código do editor visual do tema.
Estrutura de páginas
Nossa plataforma disponibiliza diversas páginas internas que são responsáveis por diferentes etapas do fluxo de e-commerce, são elas:
/busca
/marca
/categoria
/produto
/login
/pre-cadastro
/carrinho
/finalizar
/finalizado/XXXX
Também contamos com diversas páginas internas responsáveis por diferentes etapas do gerenciamento das informações do cliente:
/cadastro
/enderecos
/endereco/XXXX
/pedidos
/pedido/XXXX
/vendas
/clientes
/cliente/XXXX
/whishlist
/cupons-vales
/alterarsenha
Páginas personalizadas
Nossa plataforma premite também que sejam criadas páginas adicionais com conteúdo completamente personalizado.
As páginas são criadas através do painel em Personalizar > Layout > Outras Páginas. É possível definir título, url e informações de SEO.
Um link para cada uma destas páginas adicionais será exibido automaticamente no rodapé da loja e também na parte debaixo do menu lateral mobile.
Componentes
Utilizamos os seguintes componentes para montar nossos layouts:
Bandeiras de Idiomas
Componente utilizado para inserir os botões de alteração do idioma da loja.
Este componente não pode ser personalizado, e apenas será exibido se as traduções da loja estiverem habilitadas.
<bandeiras-idiomas></bandeiras-idiomas>
Bandeiras de Pagamento
Componente utilizado para inserir as bandeiras das formas de pagamento aceitas pela loja:
<bandeiras-pagamento></bandeiras-pagamento>
Banners Miniaturas
Componente utilizado para inserir os banners do tipo "Miniatura"
<banners-miniatura></banners-miniatura>
Banners Outros
Componente utilizado para inserir os banners do tipo "Outros"
<banners-outros></banners-outros>
Banners Vídeos
Componente utilizado para inserir os banners do tipo "Vídeo Youtube"
<banners-videos></banners-videos>
Carrossel de Avalições
Componente utilizado para inserir um carrossel com as avalições de pedidos marcadas como Publicar::
<carousel-avaliacoes></carousel-avaliacoes>
Carrossel de Banners
Componente utilizado para inserir o Carrossel de Banners. o carrossel exibira os banners do tipo "responsivo" em celulares e tables e do tipo "Desktop" em computadores.
<carousel-banners></carousel-banners>
O tempo de exibição de cada banner por padrão é de 5 segundos. Eventualmente este tempo poderá ser alterado através a adição do atributo "intervalo" e o tempo desejado (em milissegundos).
<carousel-banners intervalo="3000"></carousel-banners>
Carrossel de Marcas
Componente utilizado para inserir um carrossel com o logotipo das marcas cadastradas e com a opção "Destaque na página inicial" ativada:
<carousel-marcas></carousel-marcas>
Categorias Destaques
Componente utilizado para inserir um bloco ou carrossel de imagens com link para as principais categorias da sua loja. É necessário ter uma imagem cadastrada na categoria.
<categorias-destaques></categorias-destaques>
Formulário de Busca
Componente utilizado para inserir o formulário de busca. Em navegadores compatíveis, também exibirá o botão de busca por voz.
<form-busca></form-busca>
Possui o atributo modificador para exibir sugestões:
<form-bsuca sugestoes="1"></form-busca>
Formulário de Newsletter
Componente utilizado para inserir o formulário de cadastro de newsletter. Por padrão exibe os campos Nome e E-mail.
<form-newsletter></form-newsletter>
Possui os atributos modificadores para exibir campo de telefone:
<form-newsletter telefone="1"></form-newsletter>
E para ocultar o campo do nome:
<form-newsletter nome="0"></form-newsletter>
Os atributos podem ser usados em conjunto sem nenhum problema:
<form-newsletter nome="0" telefone="1"></form-newsletter>
Ícone do Carrinho
Componente utilizado para inserir o ícone do carrinho. Se o aplicativo Mini Carrinho estiver habilitado, ao ser clicado ou tocado o ícone vai abrir o mini carrino, caso contrário direcionará para a página do carrinho.
<icone-carrinho></icone-carrinho>
Ícone do menu mobile
Componente utilizado para inserir o ícone do menu mobile. Ao ser clicado ou tocado o ícone vai abrir o menu lateral da loja.
<icone-menu></icone-menu>
Ícone das Redes Sociais
Componente utilizado para inserir os ícone das redes sociais cadastradas na plataforma.
<icones-redes-sociais></icones-redes-sociais>
Logotipo
Insere o logotipo cadastrado na plataforma juntamente com o link para a página inicial da loja.
<logotipo></logotipo>
Menu de Categorias
Insere o menu de categorias da plataforma. Suporta até 3 níveis de hierarquias.
<menu-categorias></menu-categorias>
Possui atributo modificador para exibir um ícone junto ao nome da categoria principal.
Este recurso não pode ser utilizado em conjunto com o componente de categorias destaques.
<menu-categorias icone="1"></menu-categorias>
Também pode exibir uma imagem no submenu da categoria através do atributo abaixo
<menu-categorias imagem="1"></menu-categorias>
Poderá ser necessário utilizar CSS adicional para customizar ou ajustar tamanho e posição do ícone ou da imagem. Uma imagem deverá ser adicionada ao cadastro da categoria.
Os dois atributos não devem ser utilizados ao mesmo tempo pois ambos utilizam a mesma imagem de cadastro.
Página da Pesquisa
Insere uma página exibindo diretamente todos os produtos ativos na loja e opções de filtros disponíveis.
<pagina-pesquisa></pagina-pesquisa>
Plataforma
Insere o logotipo e assinatura da BW Commerce.
<plataforma></plataforma>
Postagens do Blog
Componente utilizado para exibir as últimas postagens no blog.
<postagens-blog></postagens-blog>
O limite de postagens padrão é 3. Eventualmente este limite poderá ser alterado através a adição do atributo "limite" informando um número válido entre 1 e 12.
<postagens-blog limite="3"></postagens-blog>
Também existe a possíbidade de filtrar por postagens de uma determinada categoria. Neste caso o atributo "categoria" pode ser adicionado juntante com o link da categoria.
<postagens-blog limite="3" categoria="moda"></postagens-blog>
Produtos Fixos
Exibe os produtos selecionados manualmente na plataforma através da opção "Produtos em destaque" no menu Catálogo. Este recurso deve ser habilitado pela nossa equipe de suporte.
<produtos-fixos></produtos-fixos>
Produtos Lançamentos
Exibe os produtos marcados como "Lançamento" no catálogo de produtos.
<produtos-lancamentos></produtos-lancamentos>
Produtos Mais Vendidos
Exibe os produtos marcados como "Mais vendido" no catálogo de produtos.
<produtos-mais-vendidos></produtos-mais-vendidos>
Produtos Ofertas
Exibe os produtos com desconto definido em seu cadastro.
<produtos-ofertas></produtos-ofertas>
Produtos Pesquisa
Exibe os produtos da pesquisa com possibilidade de aplicar filtros por atribuitos.
<produtos-pesquisa></produtos-pesquisa>
Para filtrar por produtos de uma determinada palavra informe no atributo 'texto' a palavra a ser pesquisada.
<produtos-pesquisa texto="brinco"></produtos-pesquisa>
Para filtrar por produtos de uma determinada categoria informe no atributo 'hierarquia' o id da hierarquia.
<produtos-pesquisa hierarquia="1.5.2"></produtos-pesquisa>
Para filtrar por produtos de uma determinada marca informe no atributo 'marca' o id da marca.
<produtos-pesquisa marca="2"></produtos-pesquisa>
Para filtrar por produtos até um valor máximo informe no atributo 'preco' o preço máximo.
<produtos-pesquisa preco="29.9"></produtos-pesquisa>
É possível ainda definir um limite e uma ordem seguindo os mesmos padrões da pesquisa da loja virtual, o limite padrão é 4 e a ordem padrão é 1 (Lançamentos).
<produtos-pesquisa limite="8" ordem="1"></produtos-pesquisa>
OBS: Todos os atributos acima podem ser combinados numa única tag.
Selo E-bit
Exibe o selo e-bit. O aplicativo deverá estar devidamente configurado.
<selo-ebit></selo-ebit>
Opiniões Trustvox
Exibe as opiniões do Trustvox. O aplicativo deverá estar devidamente configurado.
<trustvox-opinioes></trustvox-opinioes>
Editor
Para a criação do editor visual, será necessário criar um arquivo chamado "editor.json" na pasta raíz do tema.
Para facilitar, disponibilizamos aqui um arquivo de exemplo. Clique aqui para baixar.
Neste arquivo, poderão ser adicionadas todas as opções que o usuário poderá alterar na loja, como cores, textos, ícones, imagens, fontes, etc.
Abaixo segue uma explicação detalhada de cada funcionlidade.
Campos
Pode ser adicionados quantos campos forem necessários.
Os tipos de dados suportados pelo editor são os seguintes:
Cor
Permite digitar o código hexadecimal da cor ou utilizar o seletor de cores.
{
"nome": "Cor padrão dos textos",
"tipo": "color",
"classe": "body",
"propriedade": "color",
"valor": "#333333"
}
Texto
Permite inserir um texto.
{
"nome": "Título dos Destaques",
"tipo": "text",
"classe": ".titulo-lancamentos:lang(pt)::before",
"propriedade": "content",
"valor": "Destaques"
}
Número
Permite inserir um número.
{
"nome": "Altura do logotipo",
"tipo": "number",
"classe": ".logotipo",
"propriedade": "height",
"valor": "60",
"mascara": "#px"
}
Adicionalmente, caso alguma informação inserida no campo precise de informação adicional, pode ser utilizado o recurso de máscaras. No exemplo acima podemos observar a unidade de medida "px" sendo adicionada à informação inserida.
Select
Permite inserir um campo para seleção de valores pré-definidos.
{
"nome": "Escolha uma fonte",
"tipo": "select",
"classe": "body",
"propriedade": "font-family",
"valor": "'Inter', sans-serif"
"opcoes": [
{
"nome": "Inter",
"valor": "'Inter', sans-serif"
},
{
"nome": "Roboto",
"valor": "'Roboto', sans-serif"
},
{
"nome": "Open Sans",
"valor": "'Open Sans', sans-serif"
},
{
"nome": "Lato",
"valor": "'Lato', sans-serif"
},
{
"nome": "Poppins",
"valor": "'Poppins', sans-serif"
},
{
"nome": "Montserrat",
"valor": "'Montserrat', sans-serif"
}
]
}
Checkbox
Permite definir uma regra css que será habilitada ou desabilitada pelo checkbox.
{
"nome": "Manter menu fixo",
"tipo": "checkbox",
"classe": ".menu-categorias",
"propriedade": "position",
"valor": "fixed",
"ativo": "false"
}
Neste tipo deve ser incluído o campo "ativo" e defini-lo como "true" ou "false" para determinar seu estado padrão.
Imagem
Permite adicionar ou substituir uma imagem
{
"nome": "Imagem de fundo do bloco de newsletter",
"tipo": "file",
"classe": ".newsletter",
"propriedade": "background-image",
"valor": "newsletter.png",
"mascara": "url(#)"
}
Paletas de cores pré-definidas
Podem ser criadas paletas de cores que alteram o visual em apenas um clique.
"paletas": {
"Paleta 1": {
"estilo": "background-image:linear-gradient(to right, #000000 50%, #ffffff 50%)",
"campos": [
{
"classe": "body",
"propriedade": "color",
"valor": "#000000"
},
{
"classe": "body",
"propriedade": "background-color",
"valor": "#ffffff"
}
]
},
"Paleta 2": {
"estilo": "background-image:linear-gradient(to right, #0E0E0E 50%, #00678a 50%)",
"campos": [
{
"classe": "body",
"propriedade": "color",
"valor": "#00678a"
},
{
"classe": "body",
"propriedade": "background-color",
"valor": "#015571"
}
]
}
}
O campo estilo é utilizado para exibir o botão de seleção da paleta, com suas respectivas cores.
Em cada paleta poderão ser declaradas quantas regras css forem necessárias para alterar o visual da loja.
Sessões
Para tornar a experiência de edição mais simples e organizada, os campos podem ser agrupados em Sessões.
As sessões agrupam todos os campos a ela pertencentes e apresentam o comportamento de expandir e recolher seu conteúdo quando clicadas.
Para criar uma sessão adicione seu nome na área "sessoes" e defina um ícone. O nome do ícone deve ser um dos disponíveis na biblioteca de ícones feather icons.
"sessoes": {
"Cores": {
"icone": "edit-2"
},
"Fontes": {
"icone": "type"
},
"Cabeçalho": {
"icone": "arrow-up"
},
"Banners": {
"icone": "image"
},
"Miniaturas": {
"icone": "grid"
},
"Home": {
"icone": "home"
},
"Produto": {
"icone": "package"
},
"Newsletter": {
"icone": "mail"
},
"Rodapé": {
"icone": "arrow-down"
}
}
Para adicionar um campo a uma sessão, basta inserir o item "sessao" e o nome da sessão no campo desejado.
{
"sessao": "Cores",
"nome": "Cor padrão dos textos",
"tipo": "color",
"classe": "body",
"propriedade": "color",
"valor": "#333333"
}
Adicionalmente os campos podem ser divididos em grupos dentro de cada sessão. Basta adicionar a informação do grupo:
{
"sessao": "Cores",
"grupo": "Cores gerais",
"nome": "Cor padrão dos textos",
"tipo": "color",
"classe": "body",
"propriedade": "color",
"valor": "#333333"
}
CSS Adicional
Opcionalmente poderá ser inserido CSS adicional no Editor para ajustes pontuais no layout. Será exibido um campo de texto no editor para o código ser inserido.
Parâmetros
Para a criação de layouts mais elaborados, além dos parâmetros da plataforma, poderão ser criados novos parâmetros no editor e estes estarão disponíveis para serem utilizados na camada visual da loja.
No código a seguir, temos um exemplo de parâmetro que poderá ser utilizado para permitir que o usuário defina o tempo de exibição de cada banner do carrosel de banners:
{
"sessao": "Banners",
"nome": "Tempo (em segundos) antes de passar o banner automaticamente",
"tipo": "number",
"parametro": "banners",
"propriedade": "intervalo",
"valor": "5"
}
O código html deverá ser alterado para definir o valor do parâmetro dentro do atributo modificador "intervalo"
<carousel-banners intervalo="{{parametros.banners.intervalo*1000}}"></carousel-banners>
Neste caso, para tornar mais simples ao usuário, definimos o tempo no editor em segundos e aplicamos uma multiplicação por 1.000 no valor inserido para definir o valor requerido em milissegundos.
Tempos de cache
O cache é um recurso fundamental para a performance da loja. Confira na tabela abaixo.
Tempos de cache da Plataforma BW Commerce:
| Estrutura | Tempo |
|---|---|
| Alteração de Banners e PopUps | 30 minutos |
| Pesquisa de detalhe do produto | 30 minutos |
| Desconto por Categoria | 30 minutos |
| Frete Grátis | 30 minutos |
| Alteração de Layout | 1 hora |
| Configurações da loja | 1 hora |
| Páginas personalizadas | 1 hora |
| Alterações/Nomes Categorias | 1 hora |
| Carrinho e Checkout | Sem cache |
| Cupons de Desconto | Sem cache |
| Descontos Programados | Sem cache |