24/08/2014

Conceitos básicos e estruturas de layout

Layout structure ecommerce

Para entender a estrutura de diretórios dos layouts Nuvem Shop é importante abrir o FTP. É o que vai permitir que se personalizem os layouts dentro da plataforma de forma organizada e prática. Para isso, o primeiro passo é acessar o administrador da loja Nuvem Shop e clicar em Layouts. Abaixo de todos os modelos disponíveis, há um botão para abrir o FTP. Ao clicar, será possível verificar o login e senha já fornecidos pelo sistema.

Abrindo um cliente FTP, que pode ser o FileZilla, por exemplo, é necessário localizar os campos de login e senha e copiar os valores que apareceram no administrador da loja. Desta forma, tudo ficará atrelado para que suas modificações funcionem bem. É importante lembrar que as modificações no layout não alteram produtos, categorias e o que foi alimentado através do administrador da Nuvem Shop. A única coisa que muda é o visual da página. Portanto, é indicado fazer um backup do layout para que seja possível ativar e desativar o FTP quando quiser, sem perder o trabalho de webdesign.

Dentro do editor de código será possível ver o layout.tpl, que armazena um HTML comum, mas que permite o uso de variáveis. {{product.name}}, por exemplo, é substituído pelo nome real do produto. O mesmo deve acontecer para categorias e outros campos. O layout.tpl também tem todos os elementos fixos das páginas. Isso significa que através dele é possível modificar o cabeçalho, rodapé, os elementos padrões da navegação, o resumo do carrinho, entre outros.

Dentro do editor também, você encontrará sessões para substituir pelos conteúdos reais da home, página de produto ou de categoria, por exemplo, através do template_content. Ao inserir esse código, tudo o que vem depois será relacionado ao conteúdo específico de uma página, como a home ou a página de categorias por exemplo. Lá também existirá uma pasta para cada tipo de página. Cada uma delas possui um HTML particular que você pode abrir e alterar.

Utilizando static é possível alterar tudo que é estático da loja: imagens, java script, entre outros. Enquanto isso, utilizar o termo snipplets significa fazer uso do tpl que tem código para várias páginas. Ou seja: utilizando snipplets, não é necessário reescrever o código caso o utilize novamente. Se usar snipplet e “navigation.tpl”, a página repetirá o que está em “navigation”. Ao atualizá-la, o snipplet fará com que todos os locais preenchidos assim também se atualizem sem precisar alterar todo o código.

Finalmente, na pasta config., há uma série de arquivos .txt. Estes possuem as configurações do layout. Por exemplo: uma loja multi-idiomas deve ter .txt’s com textos em outras línguas. Ou no caso de querer alterar uma fonte ou texto da loja, também é possível acionar a pasta config.

Data da última atualização: 16/02/2018


O que você achou desse conteúdo?


Dannie Karam

Com mais de 10 anos de experiência em gerenciamento de projetos digitais, Danniela é comunicadora, escritora e líder do time de Branding da Nuvem Shop. Gosta de música, viagem, pessoas e culturas. E sempre fala demais, especialmente quando escreve de si em terceira pessoa.


    conceitos-bsicos-e-estruturas-de-layout