Menu

Balises logiques (tags)

Les balises logiques (aussi appelés tags) permettent de mieux contrôler vos snippets et vos gabarits.

Voici une liste des principaux tags reconnus :

Commentaires

Les commentaires sont encadrés par un tag d'ouverture "{% comment %}" et un tag de fermeture "{% endcomment %}". Comme les autres langages, tous les caractères placés entre ces tags sont totalement ignorés par le moteur de thème et ne seront jamais pris en compte par Liquid.

Il est à noter que vous pouvez placez plusieurs lignes entre ces tags.

Bonjour le monde. {% comment %} Maintenant c'est une ligne de commentaire. {% endcomment %} <br />
Bonjour le monde,
Je pense que je serais heureux aujourd'hui. {% comment %} Maintenant voici
plusieurs lignes de commentaires totalement
ignorées par le moteur Liquid {% endcomment %}

Le code ci-dessus affichera :

Bonjour le monde. 
Bonjour le monde, je pense que je serais heureux aujourd'hui.

If / Else / Unless : Conditions

IF / ELSE est une déclaration qui vous est sans doute familière car connue à travers tous les autres langages. Liquid vous permet d'écrire de simples expressions conditionnelles à l'intérieur d'un IF. UNLESS est le contraire de IF et est utile uniquement si vous devez vérifier que quelque chose n'est pas vraie.

{% if user %}
  salut {{ user.name }}
{% endif %}

{% if user.name == 'ludovic' %}
  salut ludovic
{% endif %}

{% if user.name != 'ludovic' %} 
  salut non-tobi
{% endif %}

{% unless user.name == 'ludovic' %} 
  salut non-ludovic
{% endunless %}

{% if user.name == 'ludovic' or user.name == 'ludovic' %} 
  salut marc ou ludovic
{% endif %}

{% if user.name == 'ludovic' and user.last_name == 'scottish' %} 
  salut ludovic scottish
{% endif %}

{% if user.name contains 'ludo' %} 
  salut ludovic
{% endif %}

{% if user.creditcard == nil %}
   Votre carte bancaire n'est pas renseignée.
{% endif %}

{% if user.payments == empty %}
   vous n'avez pas encore payé ! 
{% endif %}

{% if user.age > 18 %}
   Se connecter ici
{% else %}
   Désolé, vous êtes trop jeune.
{% endif %}

{% unless user.age > 18 %}
  Désolé, vous être trop jeune.
{% else %}
  Se connecter ici
{% endunless %}

Case : Conditions multiples

Si vous avez besoin de tester plusieurs conditions, vous pouvez utiliser le tag CASE.

{% case condition %} 
  {% when 1 %} 
    faire des choses pour 1 
  {% when 2 %} 
    faire des choses pour 2 
  {% else %} 
    sinon faire ceci
{% endcase %} 

Exemple :

{% case template %}
  {% when 'index' %}
     Bienvenue !
  {% when 'product' %}
     {{ product.vendor | link_to_vendor }} / {{ product.title }}
  {% else %}
     {{ node.title }}
{% endcase %}

Cycle : Boucles basiques

Souvent, vous devez alterner entre différentes couleurs pour des tâches similaires. Par-exemple pour utiliser des couleurs différentes d'une ligne à l'autre dans un tableau. Liquid vous propose un tag spécial appelé CYCLE.

{% cycle 'one', 'two', 'three' %}<br /> 
{% cycle 'one', 'two', 'three' %}<br /> 
{% cycle 'one', 'two', 'three' %}<br /> 
{% cycle 'one', 'two', 'three' %} 
one
two
three
one

Cette balise peut prendre en charge un nom de groupe. Ceci est très utile dès lors que vous avez plusieurs boucles CYCLE différentes imbriquées entre-elles. Si aucun nom de groupe n'est fourni alors il est assumé que les balises CYCLE trouvées avec les mêmes paramètres sont de groupe commun.

Le nom de groupe peut aussi être une variable.

Exemple :

{% cycle 'groupe 1': 'one', 'two', 'three' %}<br /> 
{% cycle 'groupe 1': 'one', 'two', 'three' %}<br /> 
{% cycle 'groupe 2': 'one', 'two', 'three' %}<br /> 
{% cycle 'groupe 2': 'one', 'two', 'three' %} 
one
two 
one
two

For : Boucles avancées

Liquid autorise les boucles sur des collections d'objet. Une collection est une liste d'éléments.

 {% for element in collection %} 
    {{ element }}
  {% endfor %} 

A l'intérieur d'une boucle FOR, vous avez accès à des méthodes "outils" pour vos besoins supplémentaires en design :

 forloop.length       # => longueur de la boucle (nombre d'itérations)
 forloop.index        # => index de l'itération courante (commence à 1) 
 forloop.index0	     # => index de l'itération courante (commence à 0) 
 forloop.rindex       # => combien d'éléments reste-il ? (commence à 1)
 forloop.rindex0     # => combien d'éléments reste-il ? (commence à 0)
 forloop.first      # => est-ce la première itération ?
 forloop.last         # => est-ce la dernière itération ?

Il existe plusieurs attributs pour permettre de filtrer les éléments qui sont susceptibles de passer dans la boucle.

  • limit permet de restreindre le nombre d'éléments
  • offset permet de définir l'index de commencement de la boucle dans la liste d'éléments
# collection = [1,2,3,4,5,6]
{% for element in collection limit:2 offset:2 %} 
    {{ element }}
{% endfor %} 
3
4

Au lieu de parcourir une liste existante, vous pouvez définir une série de nombres à boucler. Vous pouvez utiliser à la fois des nombres et des variables existantes pour créer la série.

# Si item.quantity est 4...
{% for i in (1..item.quantity) %}
    {{ i }}
{% endfor %}
1
2
3
4

Tableaux

Liquid peut créer pour vous les lignes et cellules de tableau. Vous devez tout de même toujours spécifier la balise HTML <table>.

Voici un exemple :

  {% tablerow element in collection cols: 3 limit: 12 %}
    {{ element.variable }}
  {% endtablerow %}

Vous pouvez aussi utiliser des fonctions "outils" pour connaître plusieurs propriétés de la boucle de tableau en cours :

 tablerowloop.length       # => longueur de la boucle (combien d'itération ?)
 tablerowloop.index        # => index de l'itération courante 
 tablerowloop.index0	      # => index ode l'itération courante (commence à 0) 
 tablerowloop.rindex       # => combien d'éléments reste-il à afficher ?
 tablerowloop.rindex0      # => combien d'éléments reste-il à afficher ? (commence à 0)
 tablerowloop.first        # => est-ce la première itération ?
 tablerowloop.last         # => est-ce la dernière itération ?
 tablerowloop.col          # => index de la colonne dans la ligne courante
 tablerowloop.col0        # => index de la colonne dans la ligne courante (commence à 0)
 tablerowloop.col_first    # => est-ce la première colonne dans cette ligne ?
 tablerowloop.col_last     # => est-ce la dernière colonne dans cette ligne ?
  {% tablerow item in items cols: 3 %}
    {% if tablerowloop.col_first %}
      Première colonne: {{ item.variable }}
    {% else %}
      Autre colonne: {{ item.variable }}
    {% endif %}
  {% endtablerow %}

 Assignement de variable

Vous pouvez stocker des données dans vos propres variables, que vous pourrez utiliser dans des balises d'affichages ou dans des tags. La plus simple méthode pour créer une variable est d'utiliser le tag ASSIGN.

{% assign name = 'freestyle' %}
{% for t in collection.tags %}
{% if t == name %}
<p>Freestyle!</p>
{% endif %}
{% endfor %}

Une autre manière de faire ceci est d'assigner les valeurs booléennes VRAI/FAUX à la variable :

{% assign freestyle = false %}
{% for t in collections.tags %}
    {% if t == 'freestyle' %}
        {% assign freestyle = true %}
    {% endif %}
{% endfor %}
{% if freestyle %}
  <p>Freestyle!</p>
{% endif %}

Si vous souhaitez combiner un certain nombre de chaine de caractère et les sauvegader dans une variable, vous pouvez le faire via le tag CAPTURE. Cette balise est un bloc qui "capture" ce qui sera affiché à l'intérieur et l'assigne à une variable au lieu de l'afficher à l'écran.

Voici un exemple de fonctionnement :

{% capture attribute_name %}
    {{ item.title | handleize }}-{{ i }}-color
{% endcapture %}

<label for="{{ attribute_name }}">Color:</label>
<select name="attributes[{{ attribute_name }}]" id="{{ attribute_name }}">
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
</select>

Note: ce que vous enregistrez via la balise capture sera toujours une chaîne de caractère !

  {% capture value %}10{% endcapture %}
  {% if value == 10 %}
      Cela ne s'affichera jamais
  {% endif %}
  {% if value == '10' %}
      Cela s'affichera
  {% endif %}

Articles en vedette