Liquid : le langage de création de templates de Shopify

Découvrez tout ce que vous devez savoir pour commencer à utiliser Liquid, le langage de création de templates de Shopify.

Si vous venez de débarquer dans l’univers Shopify et que vous lisez régulièrement nos contenus, vous vous demandez certainement ce que signifient toutes ces références à Liquid. Dans cet article, nous parlerons de tout ce que vous devez savoir pour commencer à utiliser Liquid. Vous comprendrez également l’utilité de Liquid pour la conception de thèmes, et découvrirez les grands concepts qui vous permettront de commencer à créer des templates de site e-commerce puissants et immersifs. Commençons par un peu d’histoire.

Liquid a été développé par le cofondateur et CEO de Shopify Tobias Lütke. Liquid est maintenant disponible en projet « open source » sur GitHub. Il est aujourd’hui utilisé dans de nombreux projets logiciels, depuis des systèmes de gestion de contenus jusqu’à des générateurs de sites statiques, en passant bien sûr, par Shopify.

Sommaire

• Liquid : langage ou moteur ?
• À quoi sert Liquid ?
• L’extension et les délimiteurs des fichiers Liquid
• Les objets et les propriétés
• Les propriétés de collections
• Les boucles Liquid
• La logique Liquid
• Les opérateurs
• L’antisèche Liquid
• Plus d’exemples de code Liquid

Liquid : langage ou moteur ?

Certaines personnes considèrent Liquid comme un langage de template, tandis que d’autres préfèrent parler d’un moteur. D’une certaine façon, les deux sont dans le vrai, même si l’appellation exacte n’a pas une grande importance. Ici, nous parlerons d’un langage de template. Liquid possède une syntaxe (comme tous les langages de programmation classiques), des concepts comme la sortie (output), la logique, et les boucles. De plus, il interagit avec des variables (des données), exactement comme le ferait un langage Web comme PHP.

Mais la ressemblance s’arrête là. En raison de sa conception, il y a beaucoup de choses que vous ne pouvez pas faire avec Liquid. Par exemple, le concept d’« état » (state) n’existe pas, il ne vous laisse pas entrer dans les couches de la plateforme, et il peut parfois paraître contre-intuitif, même pour des développeurs expérimentés. Mais Liquid a été bien pensé, et ce qui peut d’abord sembler être un défaut se révèle être un choix volontaire, fait pour de bonnes raisons.

À quoi sert Liquid ?

Comme tout langage de template, Liquid crée un pont entre un fichier HTML et un groupe de données. Dans notre contexte, il s’agit bien sûr d’une boutique Shopify. Pour cela, Liquid permet d’accéder à des variables d’un template, ou un fichier Liquid, avec une syntaxe facile à utiliser et à lire.

Dans Shopify, chaque fichier Liquid permet d’accéder à des variables sans difficulté. Par exemple, le template product.liquid nous permet d’accéder à toutes les données relatives au produit sélectionné. Liquid, lui, permet d’afficher ces données sans avoir aucune information sur ce produit au préalable. Ces variables sont les variables de template.

Vous pouvez aussi utiliser Liquid pour appeler des données qui ne sont pas accessibles pour Shopify. Par exemple, vous pouvez demander à Shopify de remplir une variable que vous créez avec tous les produits d’une collection particulière. Une fois que nous avons les noms des variables auxquelles nous voulons accéder ou que nous créons, nous pouvons utiliser des constructions Liquid comme les « sorties » ou les « boucles » pour afficher les données dans nos fichiers Liquid.

La plateforme Shopify identifie les données qu’elle doit aller chercher, et le format dans lequel elle doit les afficher en fonction du code Liquid de votre thème. Il peut s’agir du simple affichage du nom d’un produit ou quelque chose de plus complexe comme l’affichage d’une série d’images associées à un produit.

Le gros avantage d’un langage de template comme Liquid est que le designer n’a pas besoin de savoir quoi que ce soit concernant la boutique sur laquelle il travaille. Ainsi, vos thèmes sont 100 % compatibles et peuvent être appliqués à différentes boutiques sans connaissances préalables concernant le contenu des boutiques.

L’extension et les délimiteurs des fichiers Liquid

Les fichiers Liquid ont une extension .liquid. Un fichier Liquid est un mélange de code HTML et de constructions Liquid. La syntaxe est facile à lire et on la distingue facilement du langage HTML lorsque l’on travaille sur un fichier Liquid, notamment par la présence de deux groupes de délimiteurs. La double accolade {{ }} introduit la sortie, et l’association accolade et signe pourcentage {% %} introduit la logique. Étant donné que chaque construction Liquid commence par l’un ou par l’autre, vous vous familiariserez très vite avec ces délimiteurs.

Les délimiteurs sont comme des « paramètres fictifs ». Un paramètre fictif est comme un morceau de code qui sera remplacé par des données lorsque le thème créé sera envoyé sur le navigateur. C’est au designer de déterminer la nature de ces données dans le code Liquid du fichier Liquid. Ainsi, tout comme les templates qui combinent PHP et HTML, les thèmes Liquid sont des représentations du rendu final.

Sortie

Examinons maintenant la syntaxe de la construction en « sortie ». Comme son nom l’indique, la construction sortie dans Liquid consiste littéralement à sortir un fragment de données de notre boutique pour l’afficher dans une page.

Voici un exemple rapide de paramètre fictif de sortie que l’on rencontrera régulièrement dans le fichier product.liquid :

<h2>{{ product.title }}</h2>

Ce paramètre fictif de sortie permet d’afficher le nom du produit sélectionné à la place des {{ }}, par exemple :

<h2>Tasse Bistrot;/h2>

À moins d’y accoler des filtres (nous y reviendrons), la sortie consiste simplement à remplacer le paramètre fictif par un fragment de texte de votre boutique.

Les objets et les propriétés

Ce premier exemple introduit également la syntaxe du point dans Liquid, que l’on retrouve dans de nombreux langages de template ou de serveur. Prenons l’exemple de shop.name, qui se compose de deux éléments.

Le premier élément qui précède le point . est l’objet. Dans ce cas, on parlera de l’objet shop. Cet objet est une variable qui représente toutes les données relatives à la boutique et qui ont été définies dans l’interface administrateur Shopify.

Cet exemple peut se décliner de différentes façons :

• shop.address
• shop.address.city
• shop.address.country
• shop.address.country_upper
• shop.address.province
• shop.address.province_code
• shop.address.street
• shop.address.summary
• shop.address.zip
• shop.collections_count
• shop.currency
• shop.description
• shop.domain
• shop.email
• shop.enabled_currencies
• shop.enabled_payment_types
• shop.metafields
• shop.money_format
• shop.money_with_currency_format
• shop.name
• shop.password_message
• shop.permanent_domain
• shop.phone
• shop.policies
• shop.privacy_policy
• shop.products_count
• shop.published_locales
• shop.refund_policy
• shop.shipping_policy
• shop.terms_of_service
• shop.secure_url
• shop.taxes_included
• shop.types
• shop.url
• shop.vendors

Dans cette liste, les éléments qui suivent le point . représentent les propriétés de l’objet. Une propriété peut correspondre à une information simple comme le nom de la boutique (comme dans notre exemple ci-dessus). Il peut également s’agir d’une liste d’éléments, tels que les modes de paiement acceptés dans la boutique.

Les propriétés de collections

Vous remarquerez que certains exemples de la liste ci-dessus sont au pluriel, par exemple :

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

Ces propriétés représentent des collections Liquid. Au lieu de sortir une chaîne de données comme le nom de la boutique, elles appellent une série de données. En d’autres termes, il s’agit d’une liste d’éléments à laquelle nous accédons grâce à une boucle Liquid.

Si vous utilisez Shopify et Liquid pour la première fois, il est facile de se perdre avec la notion de collection. Ne vous inquiétez pas, c’est normal. Pour faire simple, nous parlerons donc de « collections de produits » et de « collections Liquid ». Le premier désigne un regroupement logique de produits défini dans l’interface administrateur de Shopify, et le deuxième désigne une liste d’éléments auxquels nous accédons grâce au code Liquid.

Enfin, il est intéressant de noter que chaque élément de la liste de notre collection Liquid peut également posséder des propriétés. Par exemple, product.images désigne une liste d’images associées à un produit particulier.

Chaque image de cette liste possède des propriétés différentes :

• image.alt
• image.aspect_ratio
• image.attached_to_variant?
• image.height
• image.id
• image.media_type
• image.position
• image.preview_image
• image.product_id
• image.src
• image.variants
• image.width

Afin d’accéder à toutes ces propriétés, vous devrez utiliser une boucle Liquid.

Les boucles Liquid

Les boucles sont très utilisées dans les thèmes Shopify. Vous verrez, c’est un jeu d’enfant. Si vous connaissez les bases d’au moins une forme de programmation, vous n’aurez aucun mal à appréhender le concept de boucle.

Souvent désignée for loop, une boucle permet de sortir le même fragment de code dans votre fichier Liquid un certain nombre de fois. Comme vu plus haut, la sortie d’une liste d’images associées à un produit spécifique est un bon exemple.

Attardons-nous un instant sur cet exemple de collection Liquid product.images que nous venons d’évoquer. Avec cette boucle, nous voulons sortir toutes les images associées à un produit spécifique. Voici un exemple de boucle très simple qui permet d’afficher tous les éléments d’image du produit désigné :

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

Décomposons cette boucle pour bien comprendre la logique.

Étape 1

{% for image in product.images %}

Dans cette première ligne, on aperçoit le second type de délimiteur, à savoir l’association d’accolades et du signe pourcentage {% %}. Dans ce cas, nous utilisons une boucle for Liquid. Comme nous l’avons évoqué, les boucles fonctionnent avec des collections Liquid et permettent de répéter chaque élément de notre liste l’un après l’autre. S’il y a six images associées au produit sélectionné, notre boucle for va appeler la variable six fois. S’il en possède dix, il répètera la variable dix fois, et ainsi de suite. Une fois que tous les éléments de la liste ont été appelés (à moins de paramétrer la boucle autrement), le reste de la page sera traité.

À noter qu’à moins de préciser le nombre d’appels que doit réaliser notre boucle, nous ne savons pas combien de fois la boucle répètera l’appel. Nous savons seulement que Liquid continuera pour afficher chaque élément de la liste. La boucle se terminera après la dernière itération, et c’est à ce moment que la page poursuivra son chargement.

Afin d’accéder aux propriétés de chaque élément de la liste, nous devons définir une variable pour représenter l’élément concerné par la boucle. Dans notre exemple, il s’agit de image. Même si ce choix peut paraître évident, cela aidera les autres designers à comprendre votre logique à l’avenir, car il peut s’agir de n’importe quel élément. Par exemple, nous pourrions utiliser alltheimagesintheworld, ce qui donnerait :

{% for alltheimagesintheworld in product.images %}

L’exemple initial est plus pertinent, mais ce dernier exemple sert simplement à insister sur le fait que cette variable n’a aucun lien avec la collection Liquid.

Étape 2

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

La deuxième ligne de notre exemple de code est un mélange de code HTML et Liquid. Vous remarquerez également que l’attribut src est rempli par une balise de sortie Liquid.

Cela introduit le concept de filtre dans cet article, délimité par le caractère | (souvent désigné en anglais comme un pipe). Mais patience, nous y reviendrons un peu plus loin. Dans notre exemple, le filtre concerne la variable image (l’élément actuel de notre boucle) et précise les dimensions, en pixels, dans lesquelles l’image doit s’afficher.

Étape 3

{% endfor %}

La dernière ligne de notre exemple correspond à l’instruction de fin endfor. Elle indique au template de poursuivre le chargement de la page après l’exécution de la boucle.

Si nous avions trois images dans notre objet product.images, la sortie finale ressemblerait à cela :

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

Les boucles sont vraiment utiles. C’est pourquoi vous en rencontrerez régulièrement durant la conception de vos thèmes. L’affichage d’images et de variantes de produits sont deux exemples très répandus.

Les filtres Liquid

Entrevus dans l’exemple de code précédent, les filtres sont une autre fonctionnalité très intéressante de Liquid.

Les filtres ont trois fonctions principales :

• Ils permettent de manipuler le format de sortie des données.
• Ils permettent de rendre les thèmes compatibles.
• Ils font gagner du temps aux concepteurs de thèmes en réduisant la quantité de code qu’ils doivent écrire.

Les filtres sont toujours accolés à une information de sortie Liquid. Nous allons maintenant parler de certains filtres, en commençant par le filtre date.

Lorsque vous publiez un article de blog, vous voulez certainement que la date de publication apparaisse :

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

Dans ce nouvel exemple, vous remarquerez le caractère | (souvent désigné pipe) dans la balise de sortie. À gauche du pipe, on trouve l’objet article et ses propriétés published_at. À droite du pipe, on trouve le filtre date suivi d’un argument indiquant le format de sortie de la date, dans ce cas '%d %B %Y'

Sans ce filtre, Shopify afficherait la date de publication de l’article telle qu’elle apparaît dans la base de données, dans un format qui n’est généralement pas lisible pour un humain. En revanche, en ajoutant le caractère | et le filtre date, nous pouvons modifier le format afin d’afficher les données dans le format de notre choix.

Pour résumer, les filtres permettent d’appeler un fragment de données dans une boutique et de le modifier. Si l’on décompose, la partie située à gauche du pipe est transformée par notre filtre et sort dans la partie droite dans un nouveau format. Ce dernier élément représente les données modifiées qui apparaîtront dans le thème.

Prenons un nouvel exemple :

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

Dans cet exemple, nous utilisons deux filtres pour créer un élément de style dans la mise en page finale.

En partant de la gauche, nous voyons le nom de notre fichier CSS, qui se trouve dans notre répertoire de ressources. Ensuite, nous appliquons notre premier filtre : asset_url. Ce filtre est extrêmement utile, vous l’utiliserez régulièrement.>/p>

Nous avons déjà parlé de la façon dont Liquid permet de rendre les thèmes de Shopify compatibles avec toutes les boutiques. En effet, grâce à Liquid, les thèmes n’ont pas besoin de « connaître » le contenu de la boutique et peuvent donc être appliqués à différentes boutiques. En revanche, cela peut être source de problèmes au moment d’appeler des ressources, car nous devons connaître l’emplacement de la ressource souhaitée (image, fichier JavaScript, fichier CSS) sur le réseau.

Mais pas de panique, le filtre asset_url vient à notre rescousse. Grâce à ce filtre, Shopify affichera le chemin absolu qui mène au répertoire de ressources pour le thème et accolera le nom de la ressource souhaitée à la fin du chemin. Attention, le filtre ne vérifie pas si le fichier existe ou non, c’est à vous de vous assurer que le fichier correspondant à la première partie du tag, dans notre cas style.css, se trouve bien dans le répertoire de ressources.

Voici à quoi cela pourrait ressembler :

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

Le dernier filtre de la chaîne, stylesheet_tag, prend l’URL et l’intègre à un élément de style qui s’affiche ensuite dans la mise en page finale. Voici le rendu final :

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

Il existe de nombreux filtres très utiles, en voici quelques-uns qui vous rendront de fiers services :

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

La logique Liquid

Le dernier aspect de Liquid que nous devons aborder est la logique. Prenons un nouvel exemple :

{% if product.available %}
<h2>Prix: 99€/h2>
{% else %}
<h2 class="sold-out">Désolé, ce produit est en rupture de stock.</h2>
{% endif %}

Dans cet exemple, nous contrôlons la sortie de notre fichier Liquid en utilisant une simple instruction if, else, endif. D’une certaine façon, l’instruction if fonctionne comme une question. En fonction de la réponse à cette question, une partie différente de la balise sortira, ou aucune selon le cas.

Dans l’exemple ci-dessus, si la réponse à notre « question » if est vrai (product.available peut être vrai ou faux), nous sortons le texte « Ce produit est disponible. » Si c’est faux, notre fichier Liquid continue et sort le texte qui suit l’instruction {% else %}, dans ce cas « Désolé, ce produit est en rupture de stock. »

Autrement dit, la logique nous permet de contrôler le flux d’une page et de prendre des décisions concernant les données de sortie. À noter qu’à l’inverse des tags de sortie, les tags de logique de vos fichiers Liquid ne produisent aucun résultat directement visible. Au lieu de cela, ils permettent de modifier le rendu final avec une grande précision.

Vous utiliserez probablement beaucoup d’instructions if durant la conception de vos thèmes pour Shopify. Voici un nouvel exemple :

{% if cart.item_count > 0 %}
<p>Vous avez {{ cart.item_count }} article(s) dans votre panier.</p>
{% else %}
<p>Votre panier est vide. :( Pourquoi ne pas <a href= "/products"> jeter un œil à notre gamme de produits ?</a></p>
{% endif %}

Cet exemple montre comment vous pouvez afficher le nombre d’articles présents dans le panier d’un visiteur ou un lien vers vos produits.

Les opérateurs

Dans ce dernier exemple, vous avez certainement remarqué la présence de l’opérateur « supérieur à » >. Étant donné que la variable cart.item_count renvoie le nombre d’articles présents dans le panier de l’internaute, nous pouvons savoir si ce nombre est supérieur à zéro, et donc s’il y a des articles dans le panier.

Si la réponse est true (donc vrai), nous pouvons afficher un message indiquant le nombre d’articles dans le panier. Dans le cas contraire, nous pouvons afficher :

<p>Votre panier est vide. :( Pourquoi ne pas <a href= "/products">jeter un œil à notre gamme de produits ?</a></p> instead.

Nous pouvons aussi refactoriser notre exemple à l’aide d’un filtre. En utilisant le filtre pluralize, nous pouvons afficher « article » ou « articles » en fonction du nombre d’articles présents dans le panier. L’avantage est que nous n’avons pas besoin de connaître le nombre d’articles exact pour que Shopify affiche le bon message :

{% if cart.item_count > 0 %}
<p>Vous avez {{ cart.item_count }} {{ cart.item_count | pluralize: 'item', 'items' }} dans votre panier.</p>
{% else %}
<p>Votre panier est vide. :( Pourquoi ne pas <a href= "/products">jeter un œil à notre gamme de produits ?</a></p>
{% endif %}

Dans ce dernier exemple, vous remarquerez la présence du filtre pluralize, qui englobe deux paramètres. Le premier est le mot au singulier et le second au pluriel.

En plus de l’opérateur > dans l’exemple ci-dessus, il existe une grande variété d’opérateurs de comparaison dans Liquid, parmi lesquels :

• == égal à
• != différent de
• > supérieur à
• < inférieur à
• >= supérieur ou égal à
• <= inférieur ou égal à
• or condition A ou condition B
• and condition A et condition B
• contains contient un fragment dans une chaine, ou une chaine dans un groupe de chaînes

Par défaut, même si votre code Liquid n’a aucune donnée à sortir, le code Liquid de votre template affichera une ligne vide dans le fichier HTML final. Vous pouvez toutefois contrôler ces espaces avec Liquid. En utilisant un trait d’union dans la syntaxe de votre balise tel que {{-, -}}, {%-, et -%}, vous pouvez supprimer une espace depuis la gauche ou la droite du rendu d’un tag.

L’antisèche Liquid

Si vous avez peur de ne pas pouvoir retenir l’ensemble des filtres, opérateurs et structures Liquid, rassurez-vous. Shopify met à votre disposition un récapitulatif des constructions Liquid. Vous y trouverez tous les objets, tags et filtres Liquid, des exemples d’application simples et des liens vers notre documentation. C’est une ressource indispensable qui vous rendra bien des services. Ajoutez-la à vos favoris et prenez le temps de la découvrir.

Plus d’exemples de code Liquid

Pour apprendre, rien ne vaut un bon exemple. C’est pourquoi nous vous proposons de voir comment intégrer des composants de thème populaires pour découvrir le fonctionnement des thèmes Shopify. La page d’exemples de code Liquid de Shopify est une bibliothèque de composants de thème qui permet de découvrir comment les objets, propriétés et filtres Liquid fonctionnent ensemble en tant qu’éléments d’une boutique donnée.

En résumé

Nous avons vu beaucoup de choses dans cet article, mais nous espérons que vous possédez maintenant les bases suffisantes pour commencer à vous repérer dans le langage Liquid.

Pour récapituler, voici les points que nous avons abordés :

• Liquid est un langage de template qui permet d’afficher des données dans un template.
• Liquid possède des constructions comme la sortie, la logique, les boucles, et la gestion des variables.
• Les fichiers Liquid sont un mélange de code HTML et Liquid, et ont une extension .liquid.
• Les fichiers Liquid utilisés dans un thème de Shopify sont compatibles avec les autres thèmes et n’ont pas besoin de « connaître » la boutique dans laquelle ils sont utilisés.
• Les deux types de délimiteurs utilisés par Liquid.
• Comment sortir des données d’une boutique dans un fichier Liquid ?
• Comment modifier le format de sortie de données à l’aide de filtres ?
• Comment créer une boucle concernant une collection Liquid pour afficher différents éléments ?
• L’utilisation de la logique dans un fichier Liquid.
• Les différents opérateurs de comparaison.
• Comment contrôler les espaces dans Liquid ?

Vous voulez en savoir plus sur la conception de thèmes pour Shopify ou pour vos clients ? Parcourez la documentation Shopify pour approfondir vos connaissances sur les concepts de Liquid et leur utilité pour concevoir des thèmes.

Découvrez comment modifier des thèmes Shopify dans un environnement local :

---

Publié par Maud Leuenberger. Maud est la rédactrice en chef du blog français de Shopify.

Texte original par Keir Whitaker. Traduction par Nicolas Bruno