Conhecendo as sintaxes do Twig

Por: Dannie Karam
Conhecendo as sintaxes do Twig

Aqui você encontra:

Como você sabe, na Nuvemshop usamos o Twig como mecanismo para criar planilhas para as nossas lojas. Anteriormente, te ensinamos como adicionar um menu personalizado autoadministrável. Neste post, queremos te ensinar um pouco mais sobre as sintaxes do Twig, particularmente, sobre as expressões.

Uma expressão do Twig é uma porção de códigos que é substituída quando a planilha é enviada ao navegador. Uma das expressões mais básicas é a de chave dupla {{ }}, mas existem expressões mais completas que possuem um componente “lógico” {%%}.

Começando com exemplos simples

Vejamos o que acontece com a expressão <h2>{{product.name}}</h2>.

Quando o navegador recebe esta expressão e a renderiza, substitui os {{ }} do arquivo por .tpl pela variável que está utilizando (neste caso, o nome do produto). Ou seja, seu “output” se traduz diretamente no HTML. Por exemplo:

<h2>Camisa</h2>

Na sequência, enumeramos alguns exemplos de expressões que podemos utilizar.

{{store.name{{ -> o nome da loja

{{store.url}} -> a url da loja

{{product.description}} -> descrição do produto

{{category.name}} -> nome da categoria

Outro exemplo

{{store.url}} -> dentro do href, se converte um link para a home da loja. Enquanto {{store.name}} é interpretado, neste caso, pelo domínio como “loja de exemplo” que é o nome da loja.

Estruturas de controle

Seguindo até as tags de controle do Twig, que em princípio podem parecer complexas, mas são bem mais fáceis de usar do que parece. Enquanto as chaves {{}} geram um “output” que permite obter informação e mostrá-la, as expressões de “lógica” {%%} permitem controlar o flow do template. A diferença para os exemplos anteriores é que essas expressões não renderizam diretamente, mas controlam o que se mostra e o que não se mostra dentro da loja.

Um exemplo disso pode ser o seguinte:

{%if product.available %}

<p> O produto está disponível </p>

{%else%}

<p> Produto sem estoque</p>

{% endif %}

Neste exemplo, é possível perceber que manipulamos o domínio utilizando um simples “if, else, endif”. Estes “ifs” podem ser entendidos como perguntas que estamos fazendo para os layouts.

Seguindo essa lógica, se a resposta à pergunta que fazemos for verdadeira, vamos renderizar “<p> O produto está disponível </p>. Ao contrário, sendo falso, nosso layout não mostraria nada a não ser que utilizássemos o {% else %}. Neste caso, veríamos “<p> Produto sem estoque </p>”. A classe .out-of-stock-product existe em nossas planilhas e permite personalizar essa mensagem.

Outro exemplo

{%if has_logo%}

<div>

{{ store.logo | img_tag | a_tag(store.url) }}

</div>

<a href=”{{ store.url }}”>{{store.name}}</a>

</div>

{%endif%}

Neste exemplo, vemos como utilizar um “if” para mostrar dentro da loja o logotipo cadastrado no administrador. E no caso de não ter logo, mostrar o nome da loja.

 Alguns operadores

Há vários operadores que podem ser utilizados nas lojas

== -> igual

!= -> não igual

> -> maior que

< -> menor que

>= -> maior ou igual

<= -> menor ou igual

ou -> ou

and -> e

Exemplo final

{% if cart.total > 10000%}

<input type = “submit” name=”go_to_checkout”value=”Finalizar Compra”/>

{%else%}

<p> O valor mínimo de compras é R$100,00 </p>

{%endif%}

Neste caso, definimos um mínimo de compras de R$100,00 (10000 inclui os decimais, por isso é traduzido para R$100,00). No caso da compra ser maior que R$100, mostramos o botão para ir ao checkout, ou caso contrário, com else, mostramos a mensagem de “compra mínima de R$100,00”.

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

Testar 30 dias grátis
Crie a sua loja na Nuvemshop
O melhor evento de e-commerce para PME’s do Brasil

13 a 15 de julho — online e gratuito

Reserve o seu lugar