O que é Twig?

O Twig é um mecanismo para criar templates em PHP. Através dele criamos todos os templates e arquivos reutilizáveis de um layout na Nuvemshop.

Nossos desenvolvedores geram código de backend, tornando possível consumi-lo por meio de objetos, variáveis e métodos no front-end.

Cada arquivo que termina na extensão ".tpl" significa que podemos usar o Twig dentro dele. (Do HTML até CSS e JS).

HTML

<ul class="footer-menu m-0 p-0">
    {% for item in menus[settings.footer_menu] %}
        <li class="footer-menu-item my-4">
            <a class="footer-menu-link" href="{{ item.url }}" {% if item.url | is_external %}target="_blank"{% endif %}>{{ item.name }}</a>
        </li>
    {% endfor %}
</ul>

CSS

{% if settings.theme_variant == 'squared' %}
  
  {# /* // Square */ #}

  {# /* /Components */ #}

  .btn-primary{
    background-size: 200% 200%;
    background-image: linear-gradient(to top, $primary-color 50%, transparent 50%);
    color: $primary-color;
    border-bottom: 3px solid $primary-color;
    @extend %body-font;
    font-weight: bold;
    @include prefix(transition, all 0.09s ease-in, webkit ms moz o);
    &:hover{
      color: $main-background;
      background-image: linear-gradient(to top, $primary-color 51%, transparent 50%);
      background-position: 0 100%;
    } 
  }

{% endif %}

JS

if (!variant.available){
    button.val('{{ "Sin stock" | translate }}');
    button.addClass('nostock');
    button.attr('disabled', 'disabled');
    $product_shipping_calculator.hide();
}

Outra coisa que marca o Twig é tudo que encontramos entre chaves "{{ }}" ou entre chaves com o simbolo de porcentagem "{%%}".

De um simple texto

<p>{{ 'Si' | translate }}</p>

Até uma condição

{% if product.display_price %}
    {{ product.price | money }}
{% endif %}

Como qualquer linguagem de programação, com o Twig podemos ter:

Condicionais

Para exibir ou carregar conteúdo se determinadas condições ou grupos de condições forem atendidos:

{% if condition %}
    content
{% endif %}

{% if condition %}
    content 1
{% else %}
    content 2
{% endif %}

{% if contition1 and condition2 and condition 3 %}
    content
{% endif %}

{% if contition1 or condition2 or condition 3 %}
    content
{% endif %}

{% if contition1 and (condition2 or condition 3) %}
    content
{% endif %}

{% if settings.video_embed %}
    content
{% endif %}

Também usando {% set%} podemos salvar muitas condições dentro de uma variável.

{% set mega_condition = condition1 and condition2 and condition3 %}

{% if mega_condition %}
    content
{% endif %}

Nós usamos condições para carregar conteúdo dependendo do template que é renderizado. No exemplo abaixo, o JavaScript é carregado apenas para detalhes do produto.

{% if template == 'product' %}

    {# Facebook comment box JS #}
    {% if settings.show_product_fb_comment_box %}
        {{ fb_js }}
    {% endif %}
    
    {# Pinterest share button JS #}
    {{ pin_js }}

{% endif %}

Iterações

Podemos iterar dentro de um objeto e mostrar seu conteúdo, por exemplo dentro do objeto "navigation" para mostrar todos os "items" da navegação.

{% for item in navigation %}
    {{ item.name }}
{% endfor %}

{% for item in navigation %}
    {% if item.subitems %}
        {{ item.name }}
    {% else %}
        {{ item.name }}
    {% endif %}
{% endfor %}

E usando "loop" entendemos em qual número de iteração para mostrar um determinado conteúdo ou alteração.

{% for item in navigation %}
    {% if loop.index == 1 %}
        {{ item.name }}
    {% endif %}
{% endfor %}

{% for item in navigation %}
    {% if loop.index >= 10 %}
        {{ item.name }}
    {% endif %}
{% endfor %}

{% for item in navigation %}
    {% if loop.first %}
        {{ item.name }}
    {% endif %}
{% endfor %}

{% for item in navigation %}
    {% if loop.last %}
        {{ item.name }}
    {% endif %}
{% endfor %}

Para mais informações sobre o Twig, recomendamos a leitura de sua documentação, que é bastante completa, oferecendo um guia sobre como aplicar filtros, como fazer contas matemáticas, etc.