Comprendre Liquid : Le langage de template de Shopify

5 min
Code editor showing Liquid syntax

Je vais vous expliquer en détail ce qu'est Liquid dans le contexte de Shopify.

Liquid est un langage de template open-source créé par Shopify pour dynamiser les thèmes de ses boutiques en ligne. C'est essentiellement un langage qui permet de créer une interface entre les données de votre boutique et l'affichage HTML de votre site.

Les aspects fondamentaux de Liquid

1. Syntaxe de base

Liquid utilise deux types de délimiteurs principaux :

  • {{ ... }} pour afficher du contenu
  • {% ... %} pour la logique (conditions, boucles, etc.)

Exemple simple :

<h1>{{ product.title }}</h1>
{% if product.available %}
  Prix : {{ product.price | money }}
{% endif %}

2. Les objets Liquid

Liquid donne accès aux données de votre boutique via des objets prédéfinis :

  • product : informations sur les produits
  • collection : données des collections
  • cart : informations du panier
  • customer : données du client
  • shop : informations générales de la boutique

3. Les filtres

Les filtres sont des modificateurs qui transforment les données. Par exemple :

{{ product.price | money }}           // Formate le prix
{{ product.title | capitalize }}      // Met en majuscule
{{ collection.products | size }}      // Compte le nombre d'éléments

4. Les balises de contrôle

Liquid permet d'utiliser des structures de contrôle comme :

{% if customer %}
  Bonjour {{ customer.name }}
{% else %}
  Veuillez vous connecter
{% endif %}

{% for product in collection.products %}
  {{ product.title }}
{% endfor %}

5. Les assignations

Vous pouvez créer des variables temporaires :

{% assign ma_variable = 'valeur' %}
{% assign produits_disponibles = collection.products | where: 'available' %}

6. Les tableaux

Liquid permet de manipuler des tableaux avec plusieurs méthodes :

{% assign fruits = 'pomme,orange,banane' | split: ',' %}
{% for fruit in fruits %}
  {{ fruit }}
{% endfor %}

7. Les inclusions

Vous pouvez modulariser votre code :

{% include 'header' %}
{% section 'footer' %}

Avantages de Liquid

  • Sécurité : Liquid est conçu pour être sûr et ne permet pas l'exécution de code malveillant
  • Simplicité : La syntaxe est facile à apprendre
  • Flexibilité : Permet de créer des layouts complexes
  • Performance : Le code est compilé et mis en cache

Limitations

  • Pas de vraie programmation : Liquid n'est pas un langage de programmation complet
  • Fonctionnalités limitées : Certaines opérations complexes nécessitent des solutions alternatives
  • Spécifique à Shopify : Bien que open-source, il est principalement utilisé dans l'écosystème Shopify

Conclusion

Liquid est un outil puissant pour personnaliser votre boutique Shopify. Il offre un bon équilibre entre facilité d'utilisation et fonctionnalités, tout en maintenant la sécurité de votre site. Pour les développeurs Shopify, c'est une compétence essentielle à maîtriser.