¿Qué es Twig?

Twig es un motor para generar templates basado en PHP, a través del cual creamos todos los templates o archivos reutilizables de un theme en Tiendanube. 

Nuestros desarrolladores generan código backend haciendo posible que podamos consumirlo a través de objetos, variables y métodos en el front end. 

Cada archivo terminado en la extensión “.tpl” significa que podemos utilizar Twig dentro él, desde un HTML hasta un CSS y 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();
}

Otra cosa que marca el uso de Twig es todo lo que se encuentra entre las llaves “{{ }}” o las llaves el porcentaje “{% %}”.

Desde un simple texto

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

Hasta una condición

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

Como cualquier lenguaje de programación, con Twig podemos tener:

Condicionales

Para mostrar o cargar contenido si se cumplen ciertas condiciones o grupos de condiciones:

{% 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 %}

También usando {% set %} podemos guardar muchas condiciones dentro de una variable.

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

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

Incluso usamos condiciones para cargar contenido dependiendo el template que se renderiza. En el ejemplo de abajo solo se carga el JavaScript para los detalles de producto.

{% if template == 'product' %}

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

{% endif %}

Iteraciones

Podemos iterar dentro de un objeto y mostrar su contenido, por ejemplo dentro del objeto “navigation” para mostrar todos los “items” de la navegación.

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

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

Y usando “loop” entendemos dentro qué número de iteración mostrar un determinado contenido o cambio. 

{% 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 más información sobre Twig recomendamos leer su documentación la cual es bastante completa, ofreciendo una guía de como aplicar filtros, como hacer cuentas matemáticas, etc.