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.availableproduct.collectionsproduct.compare_at_priceproduct.contentproduct.descriptionproduct.featured_imageproduct.featured_mediaproduct.first_available_variantproduct.handleproduct.gift_card?product.idproduct.imagesproduct.mediaproduct.optionsproduct.priceproduct.price_maxproduct.price_minproduct.price_variesproduct.published_atproduct.requires_selling_planproduct.selected_variantproduct.tagsproduct.titleproduct.typeproduct.urlproduct.variantsproduct.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.altimage.attached_to_variant?image.idimage.product_idimage.positionimage.srcimage.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.
