Liquid : tags et filtres | Développer avec Shopify

Afficher une propriété brute, comme appris au guide précédent, ne suffit pas toujours. Vous voulez souvent contrôler si quelque chose s'affiche, répéter un bloc pour chaque élément d'une liste, ou transformer une valeur avant de l'afficher, par exemple un prix stocké en centimes qu'il faut présenter proprement. Liquid distingue deux familles d'outils pour ça : les tags et les filtres.

Les tags : contrôler la logique

Un tag Liquid s'écrit entre accolades et pourcentages, {% ... %}, et contrôle le déroulement du template : une condition, une boucle, une variable temporaire. Contrairement aux doubles accolades vues au guide précédent, un tag n'affiche rien par lui-même.

Le tag {% if %} affiche un bloc de contenu seulement si une condition est vraie. Pour Atelier Lumière, vérifier qu'une bougie est en stock avant de proposer le bouton d'achat :

condition avec if

{% if product.available %}

<button>Ajouter au panier</button>

{% else %}

<p>Épuisé</p>

{% endif %}

Le tag {% for %} répète un bloc de contenu pour chaque élément d'une liste. Pour afficher chaque variante de Bougie Cèdre :

boucle avec for

{% for variant in product.variants %}

<option>{{ variant.title }}</option>

{% endfor %}

Le tag {% assign %} crée une variable temporaire, utile pour stocker un résultat intermédiaire avant de l'utiliser, sans avoir à répéter un calcul complexe plusieurs fois dans le même fichier.

Les filtres : transformer une valeur

Un filtre s'applique directement à une valeur, avec une barre verticale, pour la transformer avant affichage. Le filtre le plus utilisé sur une boutique Shopify est probablement money, qui transforme un prix stocké en plus petite unité monétaire (les centimes) en un texte lisible avec le symbole de devise :

filtre money

→ 15,00 €

Vous pouvez chaîner plusieurs filtres à la suite, chacun recevant le résultat du précédent. Par exemple, mettre un titre en majuscules puis tronquer le résultat à une certaine longueur, avec {{ product.title | upcase | truncate: 20 }}.

Tags et filtres ne se confondent jamais

Un tag contrôle le déroulement du template, entre accolades et pourcentages. Un filtre transforme une valeur déjà présente, avec une barre verticale, à l'intérieur de doubles accolades. Si vous cherchez à répéter un bloc entier ou à poser une condition, c'est un tag qu'il vous faut ; si vous voulez seulement ajuster l'apparence d'une valeur déjà identifiée, c'est un filtre.

Tester ces outils sur Atelier Lumière

Ouvrez une section de test dans votre thème local, et affichez le prix de Bougie Cèdre formaté avec le filtre money, à l'intérieur d'une condition {% if %} qui vérifie que le produit est bien disponible. Vérifiez dans votre aperçu local sur 127.0.0.1:9292 que le prix s'affiche correctement formaté, et que le bloc entier disparaît si vous testez temporairement avec un produit en rupture de stock.

Vérifiez que vous avez compris

Vous voulez afficher un prix arrondi et bien formaté, à partir d'une valeur brute en centimes. S'agit-il d'un besoin pour un tag, ou pour un filtre ?

Pour un filtre. Vous ne contrôlez ici aucune logique de répétition ou de condition : vous transformez une valeur déjà identifiée avant de l'afficher, exactement le rôle du filtre money présenté dans ce guide.