Qué es Liquid, el lenguaje para la creación de plantillas en Shopify

如果eres nuevo en la plataforma Shopify, y revisas nuestro contenido, tal vez te estés preguntando de qué tratan todas esas referencias deLiquid. En este artículo te explicaremos todo lo que debes saber acerca de Liquid, cómo se ajusta para el desarrollo de tu interfaz de Shopify y los conceptos medulares que te capacitarán para que empieces a crear poderosas y atractivas plantillas para el ecommerce. Iniciemos con una pequeña historia.

Liquid fue desarrollado por el cofundador y CEO de Shopify, Tobias Lütke, y ahora se encuentra disponible como unproyecto de código abiertoen GitHub. Hoy en día se utiliza en una gran variedad de proyectos de software, desde content management systems hasta generadores de sitios de fichero plano y, desde luego, Shopify.

Liquid: ¿lenguaje o motor?

Algunos se refieren a Liquid como un lenguaje de plantillas, mientras que otros lo conocen como motor. No importa el término que utilices, ambas formas son correctas en muchos sentidos. Personalmente, me gusta llamarle lenguaje de plantillas. Tiene una sintaxis (como en todos los lenguajes tradicionales de programación), tiene conceptos tales como salida, lógica y circuitos, e interactúa con variables (datos), tal y como lo harías con un lenguaje centrado en la web, como con PHP.

如果n embargo, es ahí donde las similitudes terminan. Hay demasiadas cosas que no puedes hacer, por diseño. Por ejemplo, no tiene el concepto de "estado", no te permite llegar muy al fondo de las carátulas de la plataforma y ocasionalmente puede parecer un contador intuitivo de codificadores de temporada. Sin embargo, fue muy bien pensado y lo que a primera vista pudiera parecer una limitación, está hecho así a propósito por una buena razón.

Función de Liquid

Liquid, al igual que cualquier lenguaje de plantillas, crea un puente entre un archivo HTML y un registro de datos. En nuestro contexto, desde luego que el dato es una tienda de Shopify. Esto es posible al permitirnos acceder a variables desde el interior de una plantilla con una sintaxis fácil de leer y de utilizar.

En Shopify, cada plantilla nos permite acceder a ciertas variables sin tener que hacer un gran esfuerzo. Por ejemplo, la plantilla product.liquid nos permite acceder a todos los detalles relacionados con el producto que se esté visualizando en ese momento. Liquid, a su vez, nos permite generar estos datos sin tener que saber nada acerca del propio producto. Estas variables se conocen como variables de plantillas. También puedes utilizar Liquid para rescatar datos que no estén disponibles para nosotros. Por ejemplo, puedes solicitar a Shopify que ingrese una variable que tú creaste con todos los productos de una colección en particular.

Una vez que conozcamos los nombres de las variables a las que tenemos que acceder o crear, podremos usar las creaciones de Liquid, tales como "salida" o "loop" para mostrar los datos de nuestra plantilla.

La plataforma Shopify comprende qué dato recuperar y cómo mostrarlo según el código Liquid que tengas en tu plantilla. Pudiera tratarse de algo sencillo como de mostrar el nombre de un producto; o algo un poco más complejo, como mostrar una serie de imágenes de productos.

拉格兰ventaja de联合国lenguaje de plantillas科莫Liquid es que tú, como diseñador, no tienes que sabes absolutamente nada acerca los datos en sí. De por sí, tus plantillas son 100 por ciento independientes y se pueden aplicar a registros múltiples sin tener conocimiento del contenido de los registros.

La extensión de archivo Liquid y sus delimitadores

洛杉矶archivos液体tienen .liquid la扩展。Un archivo .liquid es una combinación de código HTML estándar y creaciones Liquid. Es de una sintaxis de fácil lectura y fácil de distinguir de HTML cuando se trabaja con un archivo de plantilla. Esto se facilita aún más gracias al uso de dos juegos de delimitadores.

Las llaves dobles {{ }} indican salida, y porcentajes entre llaves {% %} indican lógica. Te familiarizaras rápidamente con ellas ya que todas las creaciones de Liquid empiezan con una o la otra.

Otra forma de interpretar los delimitadores es como "marcadores". Un marcador puede ser apreciado como un segmento de código que finalmente será sustituido por datos en cuanto la plantilla compilada se envíe al explorador. Este dato lo define completamente el diseñador de la interfaz como resultado del código Liquid en la plantilla. Así, las plantillas Liquid, al igual que las plantillas que entrelazan PHP y HTML, sirven como representaciones de lo que se mostrará gráficamente.

Salida

Examinemos la sintaxis para "salida". Como el nombre lo indica, salida en Liquid literalmente dará salida a una parte de datos del registro hacia la plantilla.

He aquí un ejemplo rápido de un marcador de salida que comúnmente encontrarás en la plantilla product.liquid:

{{ product.title }}

Cuando se haya procesado, nos generará el nombre del producto visualizado en lugar de {{ }}, por ejemplo:

American Diner Mug

A menos que la salida sea manipulada con un filtro (el cual veremos pronto) será simplemente cuestión de sustituir el marcador en su totalidad por una secuencia de texto de tu registro.

Objetos y propiedades

Este ejemplo también nos conduce a la sintaxis Liquid punto. Esto es común en muchas plantillas y lenguajes del lado del servidor. Si tomamos como ejemplo nuestro shop.name, podremos separarlo en dos partes.

El primer elemento previo al . es el objeto. En este caso, shop es el objeto. Esta es una variable que representa todos los datos relativos a la tienda que definimos en la administración de Shopify. Estos elementos de datos incluyen:

• shop.address
• shop.collections_count
• shop.currency
• shop.description
• shop.domain
• shop.email
• shop.enabled_payment_types
• shop.metafields
• shop.money_format
• shop.money_with_currency_format
• shop.name
• shop.password_message
• shop.permanent_domain
• shop.products_count
• shop.types
• shop.url
• shop.vendors
• shop.locale

Los elementos que siguen al . representan las propiedades del objeto shop. Una propiedad puede ser tan sencilla como el nombre de la tienda (de acuerdo a nuestro ejemplo anterior) o pudiera ser una lista de artículos como las formas de pago habilitadas para la tienda.

Propiedades de colección

Te darás cuenta a partir de la lista anterior que una cantidad de propiedades están en plural, p. ej.::

• shop.enabled_payment_types
• shop.metafields
• shop.types

Estas propiedades representan colecciones de Liquid. En vez de devolver una lista de datos como el nombre de la tienda, nos devolverá una matriz de datos; dicho de otra forma, una lista de artículos a los que podremos acceder por medio de un loop Liquid.

Cuando se utilizan Shopify y Liquid por primera vez, es fácil confundirse con las colecciones. Ciertamente me sucedió eso. Por lo tanto me voy a referir a "colecciones de productos" y "colecciones de Liquid". La primera es una agrupación lógica de productos definidos en la administración de Shopify y la segunda es una lista de elementos a los que podemos acceder en el código de Liquid.

Por último, vale la pena decir que cada una de las listas de artículos de nuestra colección de Liquid también pueden tener propiedades. Un buen ejemplo de esto es product.images. Este representa una lista de todas las imágenes que se han ido agregando a un producto en particular.

Cada una de las imágenes de la lista tiene múltiples propiedades asociadas a ella.

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

Podemos utilizar un loop de Liquid con el fin de acceder a estas propiedades.

Loops de Liquid

Los loops se utilizan ampliamente en las interfaces de Shopify y, afortunadamente, son muy fáciles de comprender. Si ya has hecho alguna programación básica, el concepto de loop te parecerá muy familiar.

El uso de un loop nos permite extraer el mismo segmento de código una cantidad de veces conocida en nuestra plantilla. Como se dijo anteriormente, un ejemplo representativo sería generar todas las imágenes asociadas al producto.

Demos una mirada a un ejemplo para utilizar la colección product.images de Liquid que expuse anteriormente.

Nuestro propósito con este loop es generar todas las imágenes para un producto en particular. He aquí un loop demasiado sencillo que generará cada imagen en línea.

{% for image in product.images %}

{% endfor %}

Vamos a separarlo en partes para comprenderlo completamente.

Paso 1

{% for image in product.images %}

La primera línea nos introduce al segundo estilo de delimitador, la sintaxis de llaves y porcentajes {% %}. Aquí es donde estamos utilizando un Liquid para loop. Los loops funcionan con las colecciones de Liquid y nos permite repetir cada elemento de nuestra lista. Si el producto que estamos visualizando en ese momento tuviera seis imágenes asociadas a él, nuestro loop para se repetiría seis veces; Si tuviera 10, entonces se repetiría 10 veces, y así sucesivamente. Solamente una vez que se ha observado cada elemento de la lista (a menos que se ordene otra cosa), se considerará la siguiente parte de la plantilla.

Vale la pena advertir que a menos que pidamos específicamente qué tan grande debe ser nuestro loop, no sabremos cuántos loops sucederán, Solo que Liquid irá a cada elemento de nuestra lista a su vez. El loop terminará después de la última repetición y es en este punto cuando la plantilla llevará a cabo su procesamiento.

Con el fin de acceder a las propiedades de cada elemento, designaremos una variable que represente el elemento en curso en el loop. En nuestro ejemplo anterior es imagen. Pese a que este es una elección obvia, y ayudará a otros diseñadores a comprender nuestra lógica en el futuro, literalmente puede ser cualquier cosa. Por ejemplo, podremos utilizar alltheimagesintheworld, En cuyo caso tendría el siguiente aspecto:

{% for alltheimagesintheworld in product.images %}

Por supuesto que este es un ejemplo absurdo como para ilustrarlo. La imagen le da mucho más sentido, solo que yo sólo quería enfatizar el hecho de que esta variable no tiene relación con la colección de Liquid.

Paso 2

La segunda línea en nuestro ejemplo de código consiste en una parte de HTML y una parte de Liquid. También te darás cuenta de que el atributo SRC tiene datos ingresados con una etiqueta de salida de Liquid.

Esto nos introduce al concepto de filtros que se denotan con el caracter | (tubo). Los veremos con mayor detalle más adelante. En nuestro ejemplo, el filtro está tomando la variable de imagen (el elemento en curso en nuestro loop) y está creando una URL completamente calificada para la versión de tamaño medio de la imagen, la cual fue creada cuando la imagen del producto se agregó a la administración de Shopify.

Veremos洛杉矶filtros denotados为什么el caracter | en seguida basta con decir que esta creación corta ocupará el atributo SRC con la URL completamente calificada para la versión mediana de la imagen a la vista en ese momento en nuestra lista. El filtro hace todo el trabajo de creación del atributo SRC por nosotros.

Paso 3

{% endfor %}

La última línea de nuestro ejemplo es nuestra declaración endfor. Esto le dice a la plantilla continuar después de que todos los loops fueron ejecutados.

如果tuviéramos tres imágenes en nuestro objeto product.images, el resultado final tendría un aspecto parecido a esto:

4 Técnicas de generación de interfaces en Shopify para agregar a tu flujo de trabajo(contenido disponible en inglés)

Filtros de Liquid

Otra función importante de Liquid son los filtros de salida que utilicé anteriormente en el ejemplo del código. Los filtros tienen tres objetivos principales:

• Manipular los datos de salida de alguna manera.
• Permitir que nuestras interfaces sean independientes.
• Ahorrar tiempo a los diseñadores de interfaces al reducir el código que es necesario escribir.

Los filtros se utilizan siempre junto con una salida de Liquid. Demos un vistazo a algunos filtros empezando con el de la fecha.

Al producir una salida de una entrada de blog, probablemente querrá permitir al lector conocer la fecha de publicación.

{{ article.published_at | date: '%d %B %Y' }}

Como en el caso anterior observarás el caracter | (con frecuencia llamado pipa) en medio de la etiqueta de salida. En el lado izquierdo del caracter pipa tenemos el objeto del artículo con su propiedad "publicado_el", y a la derecha tenemos el filtro de la fecha con un argumento para denotar el formato de la fecha, en este caso '%d %B %Y'.

如果n el filtro, Shopify sencillamente produciría la salida de la fecha en que el artículo del blog se publicó, y en el formato en el que se almacena en la base de datos, el cual las personas no pueden leer. Sin embargo, al añadir | e incluir el filtro de la fecha, podemos manipular el formato para que produzca salida en el formato que deseamos.

En términos simples, los filtros nos permiten tomar un dato de nuestra tienda y cambiarlo. Lo que iniciamos en el lado izquierdo es afectado por el caracter pipa a través de nuestro filtro y emerge en el lado derecho con un cambio en el tamaño. Son estos datos manipulados a los que luego se da salida en la plantilla.

Este es otro ejemplo:

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

Aquí estamos usando dos filtros con el objetivo final de crear un elemento de estilo completamente formado en el archivo de diseño.

Empezamos a la izquierda con el nombre de nuestro archivo CSS, ubicado en la carpeta de activos. A continuación aplicamos nuestro primer filtro, en este caso el filtro asset_url. Este es un filtro increíblemente útil y el cual usarás mucho. He mencionado con anterioridad como las interfaces Shopify, gracias a Liquid, son independientes. No precisan contar con ningún conocimiento de la tienda con la que están trabajando y la misma interfaz puede aplicarse a múltiples tiendas. Sin embargo esto puede causar problemas al intentar consultar activos puesto que necesitamos una forma de conocer la ubicación de algún activo (imagen, archivo JS, archivo CSS) en la red.

Afortunadamente el asset_url viene a nuestro rescate. Al usar este filtro Shopify regresará a la ruta completa de la carpeta de activos para la interfaz y añadirá el nombre de nuestro activo al final Sólo recuerda que no verificará si realmente el archivo existe: depende de nosotros asegurarnos de que la primera parte de la etiqueta, de nuestro caso, 'style.css', se encuentre en la carpeta de activos.

Es así como se podrá ver en la salida:

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

El último filtro de la cadena, el stylesheet_tag, toma la URL y la envuelve en un elemento de estilo, el cual luego se produce en nuestro archivo de diseño. Este es el resultado final:

Cada filtro toma la salida del filtro anterior, y luego la modifica. Cuando no existen más filtros a los cuales pasar datos, el resultado es la salida como HTML en la plantilla.

Existen muchos filtros en verdad muy útiles, estos son algunos de los que manejarás:

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

La lógica de Liquid

El último aspecto de Liquid que necesitamos observar es la lógica. Este es un ejemplo:

{% if product.available %}

Price: £99.99

{% else %}

Sorry - sold out

{% endif %}

En este fragmento, estamos controlando la salida a nuestra plantilla, usando una sencilla instrucción IF con "si, o bien" De alguna manera las instrucciones IF son una especie de pregunta. Dependiendo de la respuesta a la pregunta, se producirá una pieza distinta o marca, o en algunos casos no habrá ninguna marca.

En el ejemplo anterior, si la respuesta a nuestra pregunta de instrucción IF es verdadera (producto.devoluciones disponibles verdadero o falso) dejamos las palabras "Este producto está disponible", si es falsa, nuestra plantilla continúa y produce la salida del texto siguiendo nuestra cláusula {% o bien %}, en este caso "Lo siento, este producto está agotado".

Otra manera de ver la lógica es que nos permite controlar el flujo de una plantilla y finalmente tomar decisiones sobre qué datos se exhiben. Vale la pena observar que a diferencia de las etiquetas de salida, la inclusión de etiquetas de lógica en tus plantillas no da como resultado la traducción de cualquier cosa, más bien nos permite controlar de manera exacta lo que se traduce.

Tal vez uses mucho instrucciones IF en el desarrollo de interfaces de Shopify. Este es otro ejemplo:

{% if cart.item_count > 0 %}

You have {{ cart.item_count }} item(s) in your cart

{% else %}

There's nothing in your cart :( Why not have a look at our product range

{% endif %}

El fragmento muestra cómo puedes, ya sea exhibir el número de artículos en el carrito de un visitante, o producir un enlace a tus productos.

Operadores

Observarás que en este ejemplo utilizamos el operador mayor que >. A medida que la variable cart.item_count devuelve la cantidad de artículos en el carrito del usuario actual podemos verificar si este es >mayor que cero, es decir, si contiene artículos.

如果esto arroja "verdadero" podemos producir la salida del mensaje con el conteo de artículos actual, si no, podemos producir la salida:

There's nothing in your cart :( Why not have a look at our product range

instead.

En verdad podemos rediseñar nuestro ejemplo con un filtro. Al usar el filtro pluralize podemos producir salida a un artículo o artículos, dependiendo de la cantidad de artículos en el carrito. Lo bueno en este caso es que no tenemos que conocer el conteo en el pedido para que Shopify produzca la designación correcta.

{% if cart.item_count > 0 %}

You have {{ cart.item_count }} {{ cart.item_count | pluralize: 'item', 'items' }} in your cart

{% else %}

There's nothing in your cart :( Why not have a look at our product range

{% endif %}

Observarás que el ejemplo rediseñado incluye ahora el filtro pluralize, el cual toma dos parámetros. El primero es la palabra en singular y el segundo es el plural.

Aunque hemos usado el operador > en el ejemplo anterior, existe una gran variedad de operadores de comparación en Liquid, como:

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

Hoja de respuestas de Liquid

如果te pareces un poco a mí te será difícil aprenderte de memoria todos estos filtros de Liquid, operadores y estructuras. Por fortuna, recientemente publicamos una nuevaHoja de respuestas de Shopify Liquidpara ti (actualmente disponible en inglés). Es un recurso indispensable el cual te recomiendo tengas como marcador y te familiarices con él.

Resumen

Hemos abarcado mucho en este artículo. Esperamos que te haya proporcionado una buena introducción a Liquid. Este es un recordatorio de los temas tratados:

• Liquid es un lenguaje de plantilla que nos permite exhibir datos en una plantilla.
• Liquid incluye constructos como salida, lógica, loops, y tiene que ver con variables.
• Los archivos de Liquid son una mezcla de HTML y código Liquid, y tienen la extensión .liquid.
• Los archivos de Liquid usados en una interfaz Shopify son independientes y no tienen conceptos de la tienda en la cual se están usando en la actualidad.
• Los dos tipos de delimitadores usados en Liquid.
• Cómo producir una salida de una tienda en una plantilla.
• Cómo manipular datos con filtros.
• Cómo realizar un loop sobre una colección de Liquid para producir una salida de artículos múltiples.
• El uso de la lógica en una plantilla.
• Los distintos tipos de operadores usados para la comparación

¿Quieres aprender más acerca del diseño de interfases para Shopify o de tus clientes? Puedes aprender más acerca de conceptos Liquid y cómo utilizarlos en tu propio desarrollo de interfaces en上海opify docs. O consultar nuestra amplia guía de aprendizaje de Liquid para Shopify. Ingresa tu dirección electrónica y descárgala a continuación.

Utiliza tus conocimientos para ayudar a emprendedores de todo el mundo.

El Programa de Shopify Partner conecta a gente talentosa como tú con más de 800.000 emprendedores en todo el mundo. Genera ingresos ayudándolos a diseñar tiendas virtuales, tomando fotografías de productos o desarrollando una app.

Obtén más información sobre el Programa de Shopify Partner

---

Publicado por Pablo Golán, editor en jefe del blog de Shopify en español y responsable de marketing de contenidos y localización para España y Latinoamérica. Texto original de Keir Whitaker, Equipo de Marketing en Shopify. Traducción a cargo de LTD, Leading & Developing Trends.