Ouvrez votre serveur de développement local, lancé au guide 9, et gardez la fiche Bougie Cèdre à l'esprit. Ce guide vous apprend à afficher, puis à comprendre, les informations de ce produit directement en Liquid.

Ce qu'est un objet en Liquid

Un objet Liquid représente une donnée réelle de votre boutique : un produit, une collection, le panier en cours, le client connecté. Quand vous êtes sur une page produit, Shopify met automatiquement à votre disposition un objet nommé product, qui contient toutes les informations de la fiche actuellement affichée : celle de Bougie Cèdre, si c'est cette page que le visiteur consulte.

Accéder à une propriété avec un point

Un objet contient plusieurs propriétés, chacune correspondant à une information précise. Pour accéder à une propriété, on écrit le nom de l'objet, un point, puis le nom de la propriété :

Cette notation « objet point propriété » revient partout en Liquid, quel que soit l'objet concerné : collection.title pour le titre d'une collection, cart.item_count pour le nombre d'articles dans le panier.

Afficher une valeur avec des doubles accolades

Pour afficher réellement une valeur dans la page, entourez l'expression de doubles accolades :

Ouvrez un fichier de section existant dans le thème Skeleton, repérez une expression de ce type, et modifiez temporairement le texte HTML autour pour observer le résultat dans votre aperçu local : ce test rapide confirme que vous comprenez bien où et comment une valeur Liquid s'affiche concrètement.

Des objets à l'intérieur d'objets

Certaines propriétés contiennent elles-mêmes un autre objet, ce qui permet de chaîner les points. Par exemple, un produit possède une image principale, accessible via product.featured_image, et cette image possède elle-même une propriété alt pour son texte alternatif : product.featured_image.alt. Lisez toujours une expression Liquid de gauche à droite, un point à la fois, pour comprendre exactement ce qu'elle désigne.

Bon réflexe

Avant d'utiliser une propriété que vous ne connaissez pas encore, vérifiez son existence exacte et son comportement dans la documentation officielle des objets Liquid sur shopify.dev, plutôt que de deviner son nom par analogie avec une autre propriété. Une propriété mal orthographiée n'affiche généralement aucune erreur visible : elle affiche simplement une valeur vide, ce qui peut rendre l'erreur difficile à repérer.

Comment vérifier que vous avez bien compris la notation

Dans un fichier de section de test, ajoutez temporairement une ligne qui affiche {{ product.vendor }}, et vérifiez dans votre aperçu local qu'elle affiche bien le fournisseur renseigné sur la fiche produit, comme vu dans le parcours Shopify : les bases. Retirez cette ligne de test une fois la vérification faite.

Vérifiez que vous avez compris

Vous lisez l'expression {{ product.featured_image.alt }} dans un fichier de section. Que représente cette expression, propriété par propriété ?

Elle part de l'objet product (le produit actuellement affiché), accède à sa propriété featured_image (son image principale, elle-même un objet), puis à la propriété alt de cette image (son texte alternatif). Le résultat final est donc le texte alternatif de l'image principale du produit.

Chapitre terminé