Qué es Liquid de Shopify: el lenguaje de programación de Shopify para crear plantillas

Para muchos diseñadores y programadores, usar plantillas es un antónimo de originalidad: si alguien puede usar el mismo diseño web que tú, diferenciarte no será tan fácil. 

Si quieres crear plantillas únicas para tu ecommerce o dedicarte a desarrollar y vender plantillas de Shopify, debes aprender, inevitablemente, el lenguaje Liquid de Shopify.

Desarrollado por el cofundador de Shopify, Tobias Lütke, Liquid es un proyecto de código abierto publicado en GitHub y se utiliza principalmente para desarrollar plantillas para tiendas online Shopify.

Guarda esta guía completa de Liquid de Shopify y vuelve siempre que necesites un repaso de la sintaxis, los operadores, los filtros o la lógica de este sencillo, pero potente, lenguaje de programación.

La función de Liquid de Shopify

Como cualquier lenguaje de plantillas, Liquid sirve para crear un puente entre un archivo HTML y un registro de datos; registro de datos que, en este caso, es una tienda online de Shopify.

En otras palabras, te permite acceder a diferentes variables desde el interior de una plantilla con una sintaxis fácil de leer y utilizar. La plantilla «product.liquid», por ejemplo, te da acceso a los detalles relacionados con el producto visualizado en pantalla.

Al mismo tiempo, Liquid permite dar salida a estos datos sin necesidad de saber nada acerca del producto; esto es posible a través de las variables de plantillas. También es posible usar Liquid para extraer datos, como rellenar una variable que tú creaste con todos los productos de una colección.

Una vez que conoces los nombres de las variables, puedes usar las estructuras de Liquid de Shopify para mostrar los datos correctos en tu plantilla. Shopify procesa la información de tu plantilla y ejecuta las funciones necesarias para extraer y mostrar los datos que correspondan.

Lo mejor es que al redactar el código de tu plantilla, no es necesario que introduzcas la información de ninguna tienda online (ni de sus productos) en particular. En cambio, cualquier plantilla Liquid es apta para usar en cualquier tienda online de Shopify.

La extensión de archivo Liquid y sus delimitadores

Todos los archivos Liquid de Shopify tienen la extensión «.liquid». Un archivo .liquid se compone de una combinación de código HTML estándar y estructuras de Liquid.

La sintaxis es sencilla y diferenciar entre el código HTML y las estructuras Liquid es fácil, en parte gracias al uso de 2 tipos de delimitadores:

• Las llaves dobles {{ }}: indican una salida o output
• Los símbolos de porcentaje entre llaves {% %}: indican el uso de una lógica

Una manera de entender a los delimitadores es como «marcadores», segmentos de código que son sustituidos por datos concretos cuando la compilación de la plantilla se envía al navegador.

Los datos que sustituyen a los marcadores son los introducidos por el diseñador de la interfaz; así, los delimitadores o marcadores son representaciones abstractas de los datos concretos que los reemplazaran gráficamente en pantalla.

La sintaxis de salida de Liquid

La «salida» (el output) en Liquid, como su nombre lo indica, es lo que dará salida a los datos extraídos de tu tienda hacia la página; es decir: desde el backend hasta el frontend.

Un ejemplo sencillo es el marcador <h2>{{ product.title }}</h2>; cuando la plantilla se ejecute, el código dentro de las etiquetas HTML será reemplazado por el nombre del producto, como <h2>Camiseta deportiva</h2>.

A menos que la salida sea manipulada con un filtro, será, sencillamente, una cuestión de sustituir el marcador por una secuencia de texto extraída de tu tienda online.

Objetos y propiedades de Liquid

El ejemplo anterior sirve para ilustrar cómo se utiliza la sintaxis de punto en Liquid. Los marcadores se dividen en 2 partes: el elemento previo al punto es el objeto, el elemento posterior es la propiedad.

En el marcador product.title, el objeto es el producto y la propiedad es el título. Así, este marcador sirve para extraer el título (el nombre) del producto. Estas son algunas de las propiedades del objeto «product» más utilizadas:

• product.available
• product.collections
• product.compare_at_price
• product.content
• product.description
• product.featured_image
• product.featured_media
• product.first_available_variant
• product.handle
• product.gift_card?
• product.id
• product.images
• product.media
• product.options
• product.price
• product.price_max
• product.price_min
• product.price_varies
• product.published_at
• product.requires_selling_plan
• product.selected_variant
• product.tags
• product.title
• product.type
• product.url
• product.variants
• product.vendor

Propiedades de colección

Con un vistazo rápido te alcanzará para darte cuenta de que muchas propiedades de objeto están expresadas en plural. Cambiando al objeto «shop», encontrarás propiedades como «shop.metafields» y «shop.types».

Estas propiedades, expresadas en plural, representan colecciones de Liquid. Es importante que no confundas estas colecciones con las colecciones de productos que configuras en el administrador de Shopify.

Cada colección de Liquid te devuelve una matriz de datos, una lista de elementos a los que puedes acceder a través de un loop de Liquid. A su vez, cada elemento dentro de una colección puede tener sus propias propiedades.

A modo de ejemplo, dentro del marcador de colección «product.images», que devuelve todas las imágenes asociadas a un producto en particular, cada imagen tiene a su vez una variedad de propiedades, a las que podemos acceder a través de un loop:

• image.alt
• image.attached_to_variant?
• image.id
• image.product_id
• image.position
• image.src
• image.variants

Los loops de Liquid

Un loop o bucle es una herramienta que te permite extraer en tu plantilla el mismo segmento de código una cantidad de veces determinada o hasta que se cumple una condición (o varias).

Volviendo sobre el ejemplo anterior, al marcador de colección «product.images», echa un vistazo a este loop, bastante sencillo, cuya función es extraer (mostrar) todas las imágenes asociadas a un producto en particular:

{% for image in product.images %}
 <img src="{{ image | img_url: '300x300' }}">
{% endfor %}

Para comprender mejor esta sintaxis, analizamos el loop línea por línea:

Primera línea

{% for image in product.images %}

Como puedes ver, la sintaxis de este loop de Liquid usa el segundo tipo de delimitador: los porcentajes entre llaves {% %}. En este caso, lo que sucederá es que, al ejecutarse el código, el sistema va a extraer todas las imágenes asociadas con el producto en cuestión.

Es decir, que la orden se repetirá en bucle hasta completarse. Si hay 6 imágenes asociadas al producto, se repetirá 6 veces; si hay 10, se repetirá 10 veces. Esto, claro, si no introduces una condición que limite la cantidad de repeticiones del loop.

Para que el código extraiga la propiedad correcta de cada elemento, deberás designar una variable que represente dicho elemento en el loop. En el caso del ejemplo la variable es image, un término que tiene mucho sentido utilizar para llamar a la propiedad de imágenes.

Por supuesto, puedes darle el nombre que prefieras a tus variables, pero utilizar un sistema lógico para nombrar variables es una buena práctica muy recomendable, en especial si trabajas con un equipo de desarrolladores o si planeas vender tus plantillas.

Segunda línea

<img src="{{ image | img_url: '300x300' }}">

La segunda línea del ejemplo de loop consiste en una parte de HTML y una de Liquid de Shopify. Al mismo tiempo, el atributo HTML «src» (source, o fuente) se enlaza con una etiqueta de salida de Liquid de doble llave {{ }}.

Lo que se busca en esta segunda línea es darle al código HTML la URL de la imagen, es decir, rellenar el atributo de la fuente o «src». Un elemento clave en esta segunda línea es el símbolo de «|» o barra vertical, que representa un filtro.

En este caso, el filtro determina el tamaño, expresado en píxeles (300 x 300px), que debe tener la imagen de la lista que está extrayendo y mostrando en pantalla, para la que esta segunda línea del loop crea una URL calificada.

Tercera línea

{% endfor %}

Esta última línea del loop es una sentencia simple que, básicamente, le está diciendo a la plantilla que debe continuar luego de que todas las instancias del loop hayan sido ejecutadas.

Si la lista de imágenes asociadas al producto en particular que hemos llamado con «product.image» tuviera 3 imágenes, por ejemplo, el resultado al ejecutarse el loop se vería más o menos así:

<img src="//cdn.shopify.com/s/files/1/0311/1623/0794/products/plant-in-clay-pot_300x300.jpg" alt="camiseta-x-azul" />
<img src="//cdn.shopify.com/s/files/1/0311/1623/0794/products/plant-in-green-pot_300x300.jpg" alt="camiseta-x-roja" />
<img src="//cdn.shopify.com/s/files/1/0311/1623/0794/products/plant-in-white-pot_300x300.jpg" alt="camiseta-x-amarilla" />

Comprender cómo funcionan y cómo se utilizan los loops de Liquid para Shopify es fundamental para el desarrollo de interfaces: son claves para gestionar las imágenes y variantes de productos.

Filtros de Liquid

El ejemplo del loop para las imágenes de producto trae un elemento igualmente importante de entender: un filtro. Los filtros en Liquid cumplen 3 funciones principales:

1. Manipular los datos de salida
2. Permitir que las plantillas sean agnósticas
3. Reducen la cantidad de código que debes escribir

Los filtros siempre se utilizan en conjunto con un elemento de salida de Liquid. Echa un vistazo, ahora, a un ejemplo de filtro de fecha o date.

Este filtro te servirá, por ejemplo, para introducir el campo de fecha en publicaciones de blog:

<p class="date-time">{{ article.published_at | date: '%d %B %Y' }}</p>

A la izquierda de la barra vertical «|» verás el objeto artículo «article» junto con la propiedad «published_at» (publicado el); a la derecha, el filtro de fecha junto con el formato deseado, en este caso '%d %B %Y' o día, mes, año.

Si no utilizarás el filtro, Shopify mostraría de forma automática la fecha en que se publicó el artículo, pero en el formato en que se almacena en su base de datos, un formato que puede no ser legible.

El filtro date es lo que te permite manipular el formato en que se muestra la fecha de publicación. Dicho de otra forma, el lado derecho del filtro modifica (o filtra) el elemento presente en el lado izquierdo. Este es otro ejemplo:

{{ 'style.css' | asset_url | stylesheet_tag }}

En este caso, algo más complejo, hemos usado 2 filtros para crear un único elemento de estilo en el archivo de diseño. El primer elemento a la izquierda es el archivo CSS; a este archivo se le aplica el filtro asset_url, que es uno de los filtros más útiles en Liquid.

Cuando utilizas el filtro de asset_url, lo que hace Shopify es extraer la ruta completa de la carpeta donde están los elementos y añadirle el nombre de tu archivo CSS al final. ¿Por qué es tan importante esto? Porque es necesario para que la plantilla pueda extraer los archivos correctos en cada tienda donde se implementa.

Si tu archivo CSS se llama elcssdemitienda.css, entonces el elemento de salida del ejemplo se vería más o menos así:

//cdn.shopify.com/s/files/1/0222/9076/assets/elcssdemitienda.css

El segundo filtro, el stylesheet_tag, envuelve a la URL generada en un elemento de estilo que luego se expresa en el archivo de diseño. El resultado final, entonces, se vería algo así:

<link href= "//cdn.shopify.com/s/files/1/0222/9076/t/10/assets/style.css" rel="stylesheet" type="text/css" media="all" />

Cada filtro que dispones toma la salida del filtro anterior como elemento de partida y lo modifica. Una vez aplicados todos los filtros, se expresa la salida en formato HTML en la plantilla.

Estos son algunos de los filtros de Liquid para Shopify más utilizados:

• asset_url
• stylesheet_tag
• script_tag
• date
• pluralize
• replace
• handle
• money
•  money_with_currency
• img_url
• link_to

La lógica de Liquid

Otro aspecto necesario para aprender a usar Liquid es su lógica. Echa un vistazo a este código:

{% if product.available %}
 <h2>Precio: 99,99 €</h2>
{% else %}
 <h2 class="sold-out">Agotado</h2>
{% endif %}

En este fragmento de código, verás que utilizamos 3 sentencias sencillas: if, else y endif. Estas sentencias son condicionales. La sentencia if, por ejemplo, indica una condición que debe cumplirse para que el resto del código se ejecute.

En el ejemplo, la sentencia if está indicando que el código en cuestión solo debe ejecutarse si el producto está disponible, es decir, si quedan unidades en inventario. Si el product.available devuelve una sentencia true (verdadero), se mostrará el precio.

Si, en cambio, la sentencia que devuelve es false (falso), el código continúa ejecutando la sentencia else. Esta indica qué se debe hacer en caso de que la condición if no se cumpla.

En este caso, si no quedan unidades en inventario (si product.available devuelve false) la interfaz debe mostrar el texto que se indica: Agotado. Por último, la sentencia endif simplemente sirve para delimitar hasta donde llega la función condicional.

Esta lógica es clave para que cada página dentro de una tienda online «sepa» qué contenido debe mostrar. Para ilustrarlo mejor, aquí va otro ejemplo de lógica if de Liquid para Shopify:

{% if cart.item_count > 0 %}
 <p>Tienes {{ cart.item_count }} producto(s) en tu carrito</p>
{% else %}
 <p>No hay nada en tu carrito :( Por qué no echas un vistazo a nuestras <a href="/products"> últimas novedades</a></p>
{% endif %}

Como te imaginas, este código genera 2 posibilidades: si el usuario tiene uno o más productos en su carrito, le mostrará el texto determinado antes de la etiqueta else; si no tiene ningún producto, le mostrará el texto posterior.

Operadores

Un último elemento que vale la pena destacar son los operadores. En el ejemplo anterior, habrás notado que delimitamos la condición if utilizando un operador «mayor que» o >.

Este operador indica que, una vez que la variable cart.item_count devuelve la cantidad de artículos que hay en el carrito del usuario, la condición se cumple únicamente si esta cantidad es mayor que cero.

Existe una multitud de operadores útiles en Liquid. Estos son algunos de los más utilizados:

• == igual a
• != no igual a
•  > mayor que
•  < menor que
• >= mayor que o igual a
• <= menor que o igual a
• Or este o ese
• And debe ser este y ese
• Contains Incluye la subcadena si se utiliza en una cadena, o el elemento si se utiliza en una matriz.

Comienza a programar en Liquid para Shopify

Como todo lenguaje de programación, aprenderás a escribir en Liquid a medida que lo utilices. Este artículo te servirá de guía y recordatorio, pero ten igual de presente en todo momento la hoja de resumen o cheat sheet de Liquid (disponible en inglés).

No hace falta que seas programador o desarrollador web para comenzar a escribir código. Es solo una cuestión de práctica, y mientras más te adentres en el tema, más posibilidades tendrás de crear una tienda online absolutamente única e, incluso, de vender tus plantillas a negocios de todo el mundo.