25/08/2014

Conhecendo as sintaxes do Twig

twig sintaxes

Como você sabe, na Nuvem Shop 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”.

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.


    conhecendo-as-sintaxes-do-twig