Para muchos dise\u00f1adores y programadores, usar plantillas es un ant\u00f3nimo de originalidad: si alguien puede usar el mismo dise\u00f1o web que t\u00fa, diferenciarte no ser\u00e1 tan f\u00e1cil.<\/p>\n
Si quieres crear plantillas \u00fanicas para tu ecommerce o dedicarte a desarrollar y vender plantillas de Shopify, debes aprender, inevitablemente, el lenguaje Liquid de Shopify.<\/p>\n
Desarrollado por el cofundador de Shopify, Tobias L\u00fctke, Liquid es un proyecto de c\u00f3digo abierto publicado en GitHub y se utiliza principalmente para desarrollar plantillas para tiendas online Shopify.<\/p>\n
Guarda esta gu\u00eda completa de Liquid de Shopify y vuelve siempre que necesites un repaso de la sintaxis, los operadores, los filtros o la l\u00f3gica de este sencillo, pero potente, lenguaje de programaci\u00f3n.<\/p>\n
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.<\/p>\n
En otras palabras, te permite acceder a diferentes variables desde el interior de una plantilla con una sintaxis f\u00e1cil de leer y utilizar. La plantilla \u00abproduct.liquid\u00bb, por ejemplo, te da acceso a los detalles relacionados con el producto visualizado en pantalla.<\/p>\n
Al mismo tiempo, Liquid permite dar salida a estos datos sin necesidad de saber nada acerca del producto; esto es posible a trav\u00e9s de las variables de plantillas. Tambi\u00e9n es posible usar Liquid para extraer datos, como rellenar una variable que t\u00fa creaste con todos los productos de una colecci\u00f3n.<\/p>\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\u00f3n de tu plantilla y ejecuta las funciones necesarias para extraer y mostrar los datos que correspondan.<\/p>\n
Lo mejor es que al redactar el c\u00f3digo de tu plantilla, no es necesario que introduzcas la informaci\u00f3n 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.<\/p>\n
Todos los archivos Liquid de Shopify tienen la extensi\u00f3n \u00ab La sintaxis es sencilla y diferenciar entre el c\u00f3digo HTML y las estructuras Liquid es f\u00e1cil, en parte gracias al uso de 2 tipos de delimitadores:<\/p>\n Una manera de entender a los delimitadores es como \u00abmarcadores\u00bb, segmentos de c\u00f3digo que son sustituidos por datos concretos cuando la compilaci\u00f3n de la plantilla se env\u00eda al navegador.<\/p>\n Los datos que sustituyen a los marcadores son los introducidos por el dise\u00f1ador de la interfaz; as\u00ed, los delimitadores o marcadores son representaciones abstractas de los datos concretos que los reemplazaran gr\u00e1ficamente en pantalla.<\/p>\n La \u00absalida\u00bb (el output) en Liquid, como su nombre lo indica, es lo que dar\u00e1 salida a los datos extra\u00eddos de tu tienda hacia la p\u00e1gina; es decir: desde el backend<\/em> hasta el frontend<\/em>.<\/p>\n Un ejemplo sencillo es el marcador A menos que la salida sea manipulada con un filtro, ser\u00e1, sencillamente, una cuesti\u00f3n de sustituir el marcador por una secuencia de texto extra\u00edda de tu tienda online.<\/p>\n El ejemplo anterior sirve para ilustrar c\u00f3mo 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.<\/p>\n En el marcador Con un vistazo r\u00e1pido te alcanzar\u00e1 para darte cuenta de que muchas propiedades de objeto est\u00e1n expresadas en plural. Cambiando al objeto \u00ab 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.<\/p>\n Cada colecci\u00f3n de Liquid te devuelve una matriz de datos, una lista de elementos a los que puedes acceder a trav\u00e9s de un loop<\/em> de Liquid. A su vez, cada elemento dentro de una colecci\u00f3n puede tener sus propias propiedades.<\/p>\n A modo de ejemplo, dentro del marcador de colecci\u00f3n \u00ab Un loop<\/em> o bucle es una herramienta que te permite extraer en tu plantilla el mismo segmento de c\u00f3digo una cantidad de veces determinada o hasta que se cumple una condici\u00f3n (o varias).<\/p>\n Volviendo sobre el ejemplo anterior, al marcador de colecci\u00f3n \u00abproduct.images\u00bb, echa un vistazo a este loop, bastante sencillo, cuya funci\u00f3n es extraer (mostrar) todas las im\u00e1genes asociadas a un producto en particular:<\/p>\n Para comprender mejor esta sintaxis, analizamos el loop l\u00ednea por l\u00ednea:<\/p>\n Como puedes ver, la sintaxis de este loop de Liquid usa el segundo tipo de delimitador: los porcentajes entre llaves Es decir, que la orden se repetir\u00e1 en bucle hasta completarse. Si hay 6 im\u00e1genes asociadas al producto, se repetir\u00e1 6 veces; si hay 10, se repetir\u00e1 10 veces. Esto, claro, si no introduces una condici\u00f3n que limite la cantidad de repeticiones del loop.<\/p>\n Para que el c\u00f3digo extraiga la propiedad correcta de cada elemento, deber\u00e1s designar una variable que represente dicho elemento en el loop. En el caso del ejemplo la variable es image<\/strong>, un t\u00e9rmino que tiene mucho sentido utilizar para llamar a la propiedad de im\u00e1genes.<\/p>\n Por supuesto, puedes darle el nombre que prefieras a tus variables, pero utilizar un sistema l\u00f3gico para nombrar variables es una buena pr\u00e1ctica muy recomendable, en especial si trabajas con un equipo de desarrolladores o si planeas vender tus plantillas.<\/p>\n La segunda l\u00ednea del ejemplo de loop consiste en una parte de HTML y una de Liquid de Shopify. Al mismo tiempo, el atributo HTML \u00ab Lo que se busca en esta segunda l\u00ednea es darle al c\u00f3digo HTML la URL de la imagen, es decir, rellenar el atributo de la fuente o \u00ab En este caso, el filtro determina el tama\u00f1o, expresado en p\u00edxeles (300 x 300px), que debe tener la imagen de la lista que est\u00e1 extrayendo y mostrando en pantalla, para la que esta segunda l\u00ednea del loop crea una URL calificada.<\/p>\n","protected":false},"excerpt":{"rendered":" Para muchos dise\u00f1adores y programadores, usar plantillas es un ant\u00f3nimo de originalidad: si alguien puede usar el mismo dise\u00f1o web que t\u00fa, diferenciarte no ser\u00e1 tan f\u00e1cil. Si quieres crear plantillas \u00fanicas para tu ecommerce o dedicarte a desarrollar y vender plantillas de Shopify, debes aprender, inevitablemente, el lenguaje Liquid de Shopify. Desarrollado por el…<\/p>\n","protected":false},"author":1,"featured_media":653,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[98],"yoast_head":"\n.liquid<\/code>\u00bb. Un archivo .liquid se compone de una combinaci\u00f3n de c\u00f3digo HTML est\u00e1ndar y estructuras de Liquid.<\/p>\n\n
{{ }}<\/code><\/strong>: indican una salida o output<\/em><\/li>\n{% %}<\/code><\/strong>: indican el uso de una l\u00f3gica<\/li>\n<\/ul>\nLa sintaxis de salida de Liquid<\/strong><\/h2>\n
<h2>{{ product.title }}<\/h2><\/code>; cuando la plantilla se ejecute, el c\u00f3digo dentro de las etiquetas HTML ser\u00e1 reemplazado por el nombre del producto, como <h2>Camiseta deportiva<\/h2><\/code>.<\/p>\nObjetos y propiedades de Liquid<\/strong><\/h2>\n
product.title<\/code>, el objeto es el producto y la propiedad es el t\u00edtulo. As\u00ed, este marcador sirve para extraer el t\u00edtulo (el nombre) del producto. Estas son algunas de las propiedades del objeto \u00abproduct\u00bb m\u00e1s utilizadas:<\/p>\n\n
product.available<\/code><\/li>\nproduct.collections<\/code><\/li>\nproduct.compare_at_price<\/code><\/li>\nproduct.content<\/code><\/li>\nproduct.description<\/code><\/li>\nproduct.featured_image<\/code><\/li>\nproduct.featured_media<\/code><\/li>\nproduct.first_available_variant<\/code><\/li>\nproduct.handle<\/code><\/li>\nproduct.gift_card?<\/code><\/li>\nproduct.id<\/code><\/li>\nproduct.images<\/code><\/li>\nproduct.media<\/code><\/li>\nproduct.options<\/code><\/li>\nproduct.price<\/code><\/li>\nproduct.price_max<\/code><\/li>\nproduct.price_min<\/code><\/li>\nproduct.price_varies<\/code><\/li>\nproduct.published_at<\/code><\/li>\nproduct.requires_selling_plan<\/code><\/li>\nproduct.selected_variant<\/code><\/li>\nproduct.tags<\/code><\/li>\nproduct.title<\/code><\/li>\nproduct.type<\/code><\/li>\nproduct.url<\/code><\/li>\nproduct.variants<\/code><\/li>\nproduct.vendor<\/code><\/li>\n<\/ul>\nPropiedades de colecci\u00f3n<\/strong><\/h2>\n
shop\u00bb<\/code><\/strong>, encontrar\u00e1s propiedades como \u00abshop.metafields<\/code>\u00bb y \u00abshop.types<\/code>\u00bb.<\/p>\nproduct.images<\/code>\u00bb, que devuelve todas las im\u00e1genes asociadas a un producto en particular, cada imagen tiene a su vez una variedad de propiedades, a las que podemos acceder a trav\u00e9s de un loop<\/em>:<\/p>\n\n
image.alt<\/code><\/li>\nimage.attached_to_variant?<\/code><\/li>\nimage.id<\/code><\/li>\nimage.product_id<\/code><\/li>\nimage.position<\/code><\/li>\nimage.src<\/code><\/li>\nimage.variants<\/code><\/li>\n<\/ul>\nLos<\/strong> loops<\/em><\/strong> de Liquid<\/strong><\/h2>\n
{% for image in product.images %}\r\n\u00a0<img src=\"{{ image | img_url: '300x300' }}\">\r\n{% endfor %}<\/code><\/pre>\nPrimera l\u00ednea<\/strong><\/h3>\n
{% for image in product.images %}<\/code><\/pre>\n{% %}<\/code>. En este caso, lo que suceder\u00e1 es que, al ejecutarse el c\u00f3digo, el sistema va a extraer todas las im\u00e1genes asociadas con el producto en cuesti\u00f3n.<\/p>\nSegunda l\u00ednea<\/strong><\/h3>\n
<img src=\"{{ image | img_url: '300x300' }}\"><\/code><\/pre>\nsrc<\/code>\u00bb (source<\/em>, o fuente) se enlaza con una etiqueta de salida de Liquid de doble llave {{ }}.<\/p>\nsrc<\/code>\u00bb. Un elemento clave en esta segunda l\u00ednea es el s\u00edmbolo de \u00ab|\u00bb o barra vertical, que representa un filtro.<\/p>\n