Introducción a Liquid
Liquid es un lenguaje de plantillas creado por Shopify y escrito en Ruby. Actualmente está disponible como un proyecto de código abierto en GitHub, que es utilizado en varios desarrollos por muchas empresas de software. Liquid es la base de todos los temas de Shopify y se usa para cargar contenido dinámico en las páginas de las tiendas en línea.
En este artículo
¿Qué es un lenguaje de plantillas?
Los diseñadores y desarrolladores de sitios pueden usar el lenguaje de plantillas para crear páginas web que combinan contenido estático común a varias páginas y contenido dinámico que cambia al navegar de una página a otra. El lenguaje de plantillas permite reutilizar elementos estáticos que definen el diseño de la página web, mientras que la página se llena dinámicamente con datos de la tienda Shopify. Los elementos estáticos se escriben en HTML, y los elementos dinámicos en Liquid. Los elementos Liquid en el archivo actúan como marcadores de posición: cuando el código en el archivo se compila y se envía al navegador, Liquid los reemplaza con datos de la tienda Shopify.
Sintaxis de Liquid
Al igual que los lenguajes de programación tradicionales, Liquid tiene sintaxis, interactúa con variables e incluye construcciones como salida y lógica. Las construcciones de Liquid son fáciles de reconocer y se diferencian del HTML por dos conjuntos de delimitadores: delimitadores con doble llave {{}}, que indican salida, y delimitadores con llaves de porcentaje {% %}, que representan la lógica y el flujo de control.
Existen tres grupos principales en el código Liquid:
Objetos
Los objetos Liquid obtienen datos del servidor Shopify. En la plantilla del tema, los objetos se colocan entre dobles llaves {{ }} y se ven así:
{{product.title}}
En el ejemplo anterior, product es un objeto y title es una propiedad de ese objeto. Cada objeto tiene una lista de propiedades relacionadas. Para aprender más sobre las propiedades del objeto producto, visita Objeto product.
El objeto Liquid {{product.title}} se encuentra en la plantilla «Producto» del tema Shopify. Cuando el código del archivo se compila y se muestra en la página del producto de la tienda Shopify, el objeto Liquid se mostrará en el título de la página. Por ejemplo, en una tienda de ropa el resultado podría ser:
Camiseta magnífica
Aunque cada producto en una tienda Shopify usa la misma plantilla, los objetos Liquid en la plantilla mostrarán datos diferentes según la página del producto que se esté viendo.
Para aprender más sobre los diferentes objetos Liquid que se pueden usar en las plantillas de temas, visita Objetos Liquid.
Etiquetas Liquid
Las etiquetas Liquid se usan para crear lógica y control de flujo en las plantillas. Llaves con porcentaje {% %}, y el texto que las rodea no produce resultados visibles al mostrar la página web, pero permiten asignar variables y crear condiciones o bucles.
Por ejemplo, puedes usar etiquetas Liquid para mostrar contenido diferente en la página del producto según si el producto está disponible o no:
{% if product.available %}
Precio: 99,99 $
{% else %}
Lo siento, este producto está agotado.
{% endif %}
Si el producto está disponible, se mostrará lo siguiente:
Precio: 99,99 $
Si el producto no está disponible, se mostrará:
Lo siento, este producto está agotado.
En el ejemplo anterior se utilizan las etiquetas Liquid if y else, que son etiquetas de control de flujo.
Las etiquetas Liquid se dividen en cuatro tipos:
Filtros
Los filtros Liquid se usan para modificar la salida de números, cadenas, objetos y variables. Se colocan dentro de la etiqueta {{ }} o {% %} и обозначаются символом «|».
Un ejemplo simple es el filtro capitalize:
{{ 'привет мир!' | capitalize }}
El filtro modifica la cadena capitalizándola. Se mostrará:
¡Hola mundo!
En una etiqueta se pueden usar varios filtros, y se aplican de izquierda a derecha:
{{ 'Привет мир!' | capitalize | remove: "мир" }}
Primero la cadena se muestra con la primera letra en mayúscula, luego se elimina la palabra mundo. Se mostrará lo siguiente:
¡Hola!
Puedes usar filtros Liquid para una amplia gama de operaciones con datos. Los filtros se dividen en 8 tipos:
- Filtros de arreglos
- Filtros de color
- Filtros HTML
- Filtros matemáticos
- Filtros monetarios
- Filtros de cadena
- Filtros de URL
- Filtros adicionales
Plantillas de temas
Puede acceder a los archivos de su tema desde la sección «Temas» de su panel en Shopify:
Escritorio
iPhone
Android
- Desde su panel de Shopify, vaya a Online Store > Themes.
- Busque el tema que desea modificar y luego haga clic en Actions > Edit code.
- Haga clic en el nombre del archivo Liquid que desea modificar y edítelo.
- Haga clic en Guardar.
- Revise la página correspondiente de su tienda en línea para verificar el resultado.
- En la aplicación Shopify, toque Store.
- Haga clic en el botón … junto a Online Store y luego en Manage sales channel.
- Haga clic en Temas.
- Busque el tema que desea modificar y luego haga clic en Actions > Edit code.
- Haga clic en el nombre del archivo Liquid que desea modificar y edítelo.
- Haga clic en Guardar.
- Revise la página correspondiente de su tienda en línea para verificar el resultado.
- En la aplicación Shopify, toque Store.
- Haga clic en el botón … junto a Online Store y luego en Manage sales channel.
- Haga clic en Temas.
- Busque el tema que desea modificar y luego haga clic en Actions > Edit code.
- Haga clic en el nombre del archivo Liquid que desea modificar y edítelo.
- Haga clic en Guardar.
- Revise la página correspondiente de su tienda en línea para verificar el resultado.
Recursos adicionales
Además de la información completa sobre Liquid disponible en el Centro de ayuda, puede usar Shopify Cheat Sheet como una guía rápida de Liquid para su proyecto.
Para ver videos sobre este y otros temas, visite el canal de YouTube de Shopify para desarrolladores.