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:

Quando falamos de programação, existem muitas linguagens e, dentro de cada uma delas, uma forma diferente de criar os códigos. O Twig é uma dessas ferramentas que facilitam a vida do desenvolvedor na hora de mexer na parte visual de um site.

Por isso, hoje vamos entender o que é Twig, como essa ferramenta funciona e como utilizá-la para modificar os templates da sua loja virtual na Nuvemshop. Pronto para começar?

O que é Twig?

Twig é um sistema que te permite criar templates para utilizar em PHP (uma das linguagens de programação). É esse sistema responsável por fornecer uma resposta para assuntos visuais sobre aplicativos desenvolvidos nessa linguagem.

Existem alguns motivos pelos quais as ferramentas como o Twig 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 layout seja menos pesada e, portanto, mais limpa visualmente;
  • Ele permite separar por completo o layout da lógica, evitando problemas com o desenvolvimento da própria plataforma;
  • Maior flexibilidade quanto à imagem do site.

Mas o que é template?

De forma resumida, um template é um modelo que pode ser utilizado para criar alguma coisa. No caso da programação, existem templates para facilitar a codificação de páginas — e o Twig é uma ferramenta que permite a utilização desses modelos.

Usando esses templates, os códigos se tornam mais simples e, como vimos para o caso do Twig, a separação entre a parte visual e a lógica por trás do website torna a codificação menos complexa.

Por que usamos Twig na Nuvemshop?

A Nuvemshop utiliza o PHP em seu sistema e 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, categorias, variantes distintas para os produtos, carrinho, entre outras coisas. Além disso tudo, ainda é necessário definir o layout 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 as páginas de produtos ou de categorias. Graças a esses templates desenhados no Twig é possível desenvolver essas páginas uma única vez e replicá-las quantas vezes for necessário. Prático, não é?

É 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 JavaScript das lojas.

Por fim, por ser relativamente mais simples, o Twig também é 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 precisar programar. 😊

Como modificar um template para loja Nuvemshop?

Se você tem interesse em criar um template ou implementar um layout sob medida em uma loja Nuvemshop, há alguns pontos importantes que devem ser levados em conta. Vamos passar por eles a seguir.

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 layouts 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 arquivos “.tpl” existentes podem ser vistos abaixo:

  • layout.tpl: esse arquivo contém o head e o body do HTML e todo o conteúdo comum a todas as 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).

Para criar um novo layout, é preciso acessar o tema-base da Nuvemshop, a partir do qual as modificações serão feitas.

Entendido?

Esperamos que este conteúdo tenha deixado mais claro o que é Twig e como essa ferramenta pode simplificar a vida de quem for criar layouts personalizados na Nuvemshop.

Se você pensa em vender pela internet, te convido a testar a Nuvemshop por 30 dias. É grátis, você já vai poder montar sua loja e começar as vendas! E, caso você queira, pode conferir as opções gratuitas e que não exigem mudanças por meio da programação na loja de layouts da Nuvemshop.

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

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

Sabemos que migrar sua loja não é uma decisão simples.

Descubra os benefícios e facilidades que a Nuvemshop oferece exclusivamente para migrações.

Saiba mais sobre a migração