Conociendo la sintaxis de Twig

Como ya sabías, en Tiendanube usamos Twig como motor para la creación de plantillas de nuestras tiendas. En ocasiones anteriores, te contamos cómo añadir un menú personalizado autoadministrable. En este post queremos contarte un poco más sobre la sintaxis de Twig, en particular, sobre las expresiones.

Una expresión de twig es una porción de código que es reemplazada cuando la plantilla es enviada al Navegador. Una de las expresiones más básicas es la de doble llave {{ }}, pero existen expresiones más complejas que tienen una componente “lógica” {%%}.

Comencemos con un ejemplo simple

Veamos qué sucede con la expresión <h2>{{ product.name }}</h2>.

Cuando el navegador recibe esta expresión y la renderiza, reemplaza los {{ }} del archivo .tpl por la variable que se esta utilizando (en este caso, el nombre del producto). Es decir, su “output” se traduce directamente en el HTML.  Por ejemplo:

<h2>Camisa a cuadros</h2>

A continuación, enumeramos algunos ejemplos de expresiones que podemos utilizar:

{{ store.name }} → El nombre de la tienda
{{ store.url }} → La url de la tienda
{{ product.description }} → Descripción del producto
{{ category.name }} → Nombre de la categoría

Otro ejemplo:

{{ store.url }} → Dentro del href se convierte en un link al home de la tienda. Mientras que {{ store.name }} → Es interpretado, en este caso, por el DOM como “Tienda de Ejemplo” que es el nombre de la tienda.

Estructuras de control

Avancemos hacia los tags de control de Twig. En un principio pueden parecer complejos pero dejan de serlo ni bien comienzas a utilizarlos.

Mientras que las dos llaves {{}} generan un “output” que permiten obtener información y mostrarla, las expresiones de “lógica” {%%} permiten controlar el flow del template. A diferencia de los ejemplos anteriores, estas expresiones no renderizan directamente, sino que controlan lo que se muestra y lo que no se muestra dentro de la tienda.

Un ejemplo de esto puede ser el siguiente:

{% if product.available %}
<p>El producto está disponible</p>
{% else %}
<p>Producto sin stock</p>
{% endif %}

En este ejemplo, puedes ver que manipulamos el DOM utilizando un simple “if, else, endif”. Estos “ifs” pueden entenderse como preguntas que le hacemos al diseño.

Siguiendo esa lógica, si la respuesta a la pregunta que hacemos es “verdadero” vamos a renderizar “<p>El producto está disponible</p>“. Por el contrario, si es “falso”, nuestro diseño no mostraría nada, salvo que, como en este caso, utilicemos un {% else %} entonces veríamos  “<p>Producto sin stock</p>“. La clase .out-of stock-product existe en nuestras plantillas y es la que permite dar estilo a este mensaje.

Vamos por otro ejemplo:

{% if has_logo %}
<div>
{{ store.logo | img_tag | a_tag(store.url) }}
</div>
{% else %}
<div>
<a href=”{{ store.url }}”>{{ store.name }}</a>
</div>
{% endif %}

En este ejemplo se ve cómo utilizamos un “if” para mostrar dentro de la tienda el logotipo que se subió desde el administrador. En caso de que el logo no exista, mostramos el nombre de la tienda.

Hay varios operadores que puedes utilizar en las tiendas:
== → igual
!= → no igual
> → Mayor que
< → Menor que
>= → Mayor o igual
<= → Menor o igual
or → o
and → y

¿Vamos a otro ejemplo?

{% if cart.total > 10000 %}
<input type=”submit” name=”go_to_checkout” value=”Finalizar Compra” />
{% else %}
<p>El valor mínimo de compra es $100,00</p>
{% endif %}

En este caso, definimos un mínimo de compra de $100,00 (10000 incluye los dos decimales, por lo que se traduce como 100,00). En el caso de que la compra sea mayor a $100 mostramos el boton de para ir al checkout, “else” mostramos el mensaje “El valor mínimo de compra es $100,00”.

Puedes ver más ejemplos de expresiones de Tiwg visitando nuestra Documentación para Diseñadores o la documentación de Twig (en inglés).