O que é o Twig e como usar essa ferramenta com a Nuvemshop?

Por: Dannie Karam
O que é o Twig e como usar essa ferramenta com a Nuvemshop?

Aqui você encontra:

Twig é um sistema que te permite criar templates para utilizar com PHP (que é a linguagem em que está desenvolvida a Nuvemshop). É este sistema o responsável por fornecer uma resposta para assuntos visuais sobre aplicativos desenvolvidos nessa linguagem. Existem alguns motivos pelos quais as ferramentas deste tipo têm bastante utilidade, como por exemplo:

  • Usar o Twig (ou qualquer outro sistema de templates) para definir o layout de um site faz com que a experiência de implementar um desenho seja muito mais limpa e menos pesada;
  • Permite separar por completo o desenho da lógica, evitando problemas com o desenvolvimento da própria plataforma;
  • Maior flexibilidade quanto à imagem do site.

Por que usamos Twig na Nuvemshop?

No caso específico da Nuvemshop, há muitos motivos pelos quais usamos o Twig. Para começar, um site de e-commerce possui uma lógica muito complexa: há muitos produtos, muitas categorias, variantes distintas para os produtos, carrinho, entre outras coisas. E entre tudo isso ainda é necessário definir o desenho de todas as páginas, o que poderia ser um pesadelo.

Por outro lado, pela própria natureza da loja online, há páginas que se repetem muitas vezes, como a página de produtos ou de categorias. Graças a esses templates desenhados no Twig é possível desenvolver estas páginas uma única vez e replicá-las quantas vezes for necessário. Prático, né? E tem mais!

É possível também dar total liberdade a cada um dos nossos clientes quanto à imagem de suas lojas. É precisamente isso que nos permite oferecer flexibilidade absoluta no que tange a HTML, CSS e o JavaScript das lojas. Finalmente, o Twig também é muito fácil de aprender.

Se você é designer e tem conhecimentos de HTML e CSS, o Twig é a ferramenta ideal para que você possa trabalhar com nossos templates sem necessidade de aprender PHP. Ou seja, você desenvolve livremente sem necessidade de programar.

Como modificar um template?

Agora, se você tem interesse em criar um template ou implementar um layout sob medida, há alguns pontos importantes que devem ser levados em conta. Em primeiro lugar, você precisa saber que o código gerado por um template no Twig é simplesmente um código HTML, mas com algumas particularidades.

Um exemplo é que ele permite incluir variáveis a serem substituídas quando executar o template. Também é possível criar uma “estrutura-árvore” para que um layout herde o comportamento de outro e estenda a sua funcionalidade igualmente, se necessário.

Em particular, os desenhos da Nuvemshop ficam organizados em uma estrutura de pastas e arquivos. Quanto aos arquivos, há uma extensão “.tpl” para cada tipo de página que existe dentro da loja. Os ficheiros “.tpl” existentes podem ser vistos abaixo:

layout.tpl: esse arquivo contem o head e o body do HTML e todo o conteúdo comum a todas páginas da loja, como o menu para navegar, o rodapé e os dados de contato.

home.tpl: contêm dados relativos à página de início da loja.

category.tpl: contém a estrutura da página da lista de produtos de uma categoria.

product.tpl: aqui há a estrutura da página de um produto específico.

cart.tpl: aqui há a estrutura da página de carrinho de compras.

contact.tpl: contém a estrutura da página de contato.

search.tpl: é a página de resultados das buscas.

page.tpl: contém a estrutura das páginas de conteúdo que podem ser criadas dentro da loja.

404.tpl: é a página de erro 404 (página não encontrada)

 

Ganhe tempo e receba conteúdos da Nuvemshop no seu e-mail Ganhe tempo

Receba semanalmente uma curadoria dos melhores conteúdos sobre Marketing, Vendas, Gestão e E-commerce diretamente no seu e-mail.

Faça como +30mil lojas e
crie a sua Nuvemshop

Testar 30 dias grátis
Crie a sua loja na Nuvemshop

Nossa resposta ao Coronavírus

Conheça a iniciativa #TamoJunto. Todas as ações que estamos criando aqui na Nuvemshop para te ajudar neste momento.

Conhecer a #TamoJunto