Layouts

Na plataforma SISeCommerce você pode alterar várias configurações relativas ao layout e design de sua loja virtual. Arquivos HTML, CSS e Javascript podem ser alterados como você deseja, dando liberdade a criação e melhorias de seu layout. Aliado a isso na codificação HTML você pode usar a linguagem SNL como recurso adicional para trabalhar com conteúdo dinâmico. Vamos explicar os conceitos principais da configuração de layout em nossa plataforma.

 

Informação

Para facilitar o processo de edição do layout utilize o atalho CTRL+S para gravar quando algo for alterado. 

Layouts

Criamos um layout base que pode ser usado, como base para criação de qualquer outro layout. Ele usa conceitos simples e disponibiliza os recursos que a plataforma oferece. Recursos recentes  que são aplicados na estruturação do layout.O recursos utilizados para a criação do layout base são:

    • Estruturação CSS Bootstrap versão 3.x
    • Biblioteca jQuery
    • Fontes CSS Awesome
    • Plugins JQuery e CSS - para uma melhor estruturação.

Ambiente de produção e teste

Oferecemos a possibilidade de ter o seu layout atual funcionando na loja virtual e outro layout sendo estruturado no ambiente de teste, sem que um interfira no funcionamento do outro. Este recurso pode ser usado para criar melhorias, realizar testes ou ainda criar um layout para uma período de promoções específico (Natal, Dia das mães, Black Friday) e depois retornar ao ambiente de produção.

1. Layout do ambiente de produção. É este o layout que esta sendo exibido em sua loja virtual para os clientes

2. Layouts do ambiente de testes.

3. Usar o comando Duplicar para que a aplicação crie uma cópia idêntica do layout selecionado. O novo layout duplicado é inserido automaticamente como um layout no ambiente de teste.

4. A opção Publicar apenas aparece nos layouts em teste. Use esta opção caso deseje que um layout de teste passe a ser o de produção.

Performance

Para melhoria na performance da plataforma, os arquivos do layout são separados da camada da aplicação otimizando, assim, o processamento das requisições ao servidor. Ou seja, arquivos CSS, Javascript e imagens do layout ficam em servidores separados da aplicação.  

Layout

Na área de Layout em produção você encontra as opções de configuração e edição dos arquivos html,css e imagens, conforme destacado a seguir.

Configuração

Ao clicar em Configuração  configure recursos que fazem parte do layout. Dependendo da forma como o layout for traballhado e modificado, alguns recursos podem ser desativados.

Arquivos base e plugins 

5. Em Arquivos plugins base  

 5.1 - Informe qual o JQuery que deseja usar em seu layout. Por compatibilidade com todos os plugins da aplicação usamos por padrão a versão 1.8.3 do jQuery.  
 5.2 - Informe qual jQueryUI deseja usar em seu layout.  
 5.3 - Informe se deseja usar o Bootstrap como estruturação CSS de seu layout. Utilizamos a versão 3.2 e recomendamos que seja utilizada esta versão.

6. Em Menu de categorias superior: informe se deseja usar o menu de categoria superior. Este é um menu drop-down padrão e que pode ser exibido usando a variável informada na configuração.

7. Em Menu de categorias lateral (caso seu layout ainda utilize navegação por menus lateral pode ativar este recurso. Este menu pode ser exibido usando a variável informada na configuração)  

 7.1 - Informe se deseja exibir, ou não, a menu. Selecione o tipo do menu, se somente as categorias de departamentos selecionados ou todo o menu de departamentos e categorias.  
 7.2 - Informe em que posição deve ser exibido: lateral esquerda ou lateral direita.  
 7.3 - Informe as páginas em que o menu será exibido.

8.  Em Filtros: informe se deseja usar o recurso de filtros no layout e em que posição ele deve ser exibido.

9. Em Carrossel: informe se deseja usar o plugin de slider padrão da plataforma em seu layout.

10. Em DropMenu: informe se deseja usar o plugin de dropmenu padrão da plataforma em seu layout.

11. Em Font Awesome: Informe se deseja usar as fontes CSS Font Awesome em seu layout.  

Imagens de botôes

Altere nesta aba todos os botões indicados, caso deseje. Isto ajuda na personalização de sua loja.

Configuração do Slider

11. Em Slider: informe se o plugin está ativo ou não

12. Em Aparência

 12.1 - Informe a Largura e Altura em pixels e se o sistema deve auto ajustar a altura da imagem
 12.2 - Informe o tipo de layout do slider, se deve ser mostrado o cursor de arrastar e o espaçamento (em pixels) dos sliders.

13. Em Animação

 13.1 - Informe se ela inicia automaticamente e se deve haver repetição.Informe também se a animação deve parar quando chegar no último slide.
 13.2 - Informe se a animação serã pausada ou sobreposta com o mouse, qual a velocidade da transição entre os sliders e a partir de qual imagem se inicia.

14. Em Efeitos de Animação: informe qual o efeito que deseja colocar.

15. Em Controle do Slide

 15.1 - Informe se as setas devem ser ocultadas quando o mouse estiver fora do alide ou quando o slide for um vídeo.
 15.2 - Informe se os botões devem ser ocultados quando o mouse estiver fora do slide ou quando o slide for um vídeo.
 15.3 - Informe se a barra de tempo deve ser ocultada quando o mouse estiver fora do slide ou quando o slide for um vídeo.

Editar HTML, CSS e Imagens 

É nesta tela que serão editados os arquivos que fazem parte do layout. Eles são agrupados em:

  • LAYOUT - são os arquivos principais do layout. Para as páginas de entrada, produto, carrinho, o arquivo principal é o: layout.html. Já para o checkout e confirmação do pedido: pedido.html.  Novos arquivos LAYOUT não podem ser criados.

  • TEMPLATE - são os arquivos que exibem os conteúdos dinâmicos de uma página. Por exemplo, a página de listagem de produtos (listaprodutos.html) ou a de exibição do produto (produto.padrao.html). Novos arquivos TEMPLATE não podem ser criados.

  • SNIPPET - determinados conteúdos dinâmicos podem exibir um nível de personalização maior, como por exemplo a listagem dos produtos. Através da liguagem SNL pode-se trabalhar com arrays para a exibição dos conteúdos como o arquivo listaprodutos.lista.htmlNovos arquivos SNIPPET não podem ser criados.

  • CSS - são os arquivos .css de cada página da loja virtual. Por padrão a plataforma sempre abre os arquivos base.estrutura.css, base.layout.css e base.plugins.css. Os demais arquivos .css são abertos somente quanto a página em questão está sendo visualizada.

  • JS - são os arquivos .js (Javascript) da loja virtual. Por padrão e para funcionamento da loja virtual os arquivos necessários já são abertos de forma automática, mas opcionalmente pode adicionar arquivos .js ao seu layout.

  • IMAGENS - são as imagens que fazem parte do layout. Usando o conceito de melhoria de performance usamos e recomendamos o uso de sprites CSS para a configuração e estruturação de seus layouts.

16. Ao finalizar uma alteração no arquivo do layout clique aqui para Salvar. Automaticamente são criados backups das últimas alterações efetuadas no arquivo que foi alterado.

17. Ações relativas ao arquivo sendo exibido. (*veja maiores explicações abaixo)

18. Para pré-visualizar o layout com as alterações que foram efetuadas.

19. Documentação das variáveis que podem ser usadas no layout seguindo a linguagem SNL.

layouts-005

  • Upload - faça o upload direto de um arquivo. Assim não precisa copiar-colar o conteúdo. Com este recurso o arquivo de upload é aberto e colocado o conteúdo do mesmo no arquivo sendo alterado.

  • Restore de backup - se ocorreu algum erro no funcionamento pode retornar o backup de versões anteriores.

  • Histórico - registro das alterações efetuadas no arquivo.
Este artigo foi útil para você? Sim Não