Une boucle permet à un template HTML de répéter la même structure pour plusieurs éléments de votre projet Ezus.
Par exemple, au lieu de créer manuellement une section pour le Jour 1, le Jour 2, le Jour 3, etc., vous pouvez créer la structure une seule fois et utiliser une boucle pour la répéter pour chaque jour du programme.
Les boucles sont particulièrement utiles lorsque le nombre d'éléments peut varier d'un projet à l'autre.
⚠️ Cet article se concentre sur l'utilisation spécifique des boucles Ezus dans les templates HTML. Il suppose que vous connaissez déjà les bases du HTML.
1. Comment fonctionne une boucle ?
Une boucle comporte trois parties principales :
{% for item in collection %} Content to repeat {% endfor %}{% for ... %} démarre la boucle.
Le contenu situé entre les balises d'ouverture et de fermeture est répété pour chaque élément.
{% endfor %} ferme la boucle.
Par exemple, pour répéter du contenu pour chaque jour du programme :
{% for day in days %} <h2>{{ day.title }}</h2> {% endfor %}Si votre programme contient trois jours, Ezus parcourt les jours un par un et génère l'élément <h2> pour chacun d'entre eux.
💡 Considérez une boucle comme : « Pour chaque élément de cette collection, génère ce contenu. »
2. Utiliser les informations de l'élément actuel
À l'intérieur d'une boucle, la variable fait référence à l'élément en cours de traitement.
Par exemple :
{% for day in days %} <h2>{{ day.title }}</h2> {% endfor %}Ici :
daysest la collection parcourue par Ezus.dayreprésente le jour actuel.day.titlerécupère le titre de ce jour.
Si le projet contient :
Arrival in Paris
Discover Paris
Departure
la même boucle peut générer :
Arrival in Paris
Discover Paris
Departure
Vous n'avez pas besoin de créer un code HTML distinct pour chaque jour.
⚠️ Les variables à l'intérieur des boucles utilisent la syntaxe de l'objet actuel, comme {{ day.title }}. Ne copiez pas automatiquement une variable Slides telle que $$days.1.title$$ dans une boucle HTML.
🔭 Consultez Liste complète des variables HTML pour trouver les variables HTML disponibles et leur contexte.
3. Afficher la position d'un élément avec loop.index
À l'intérieur d'une boucle, vous pouvez utiliser :
{{ loop.index }}pour afficher la position de l'élément actuel.
Le premier élément renvoie 1, le deuxième 2, et ainsi de suite.
Par exemple :
{% for day in days %} <h2>Day {{ loop.index }} — {{ day.title }}</h2> {% endfor %}Cela peut générer :
Day 1 — Arrival in Paris
Day 2 — Discover Paris
Day 3 — Departure
Cela est utile lorsque vous souhaitez numéroter automatiquement les éléments sans attribuer manuellement un numéro à chacun d'entre eux.
💡 Vous pouvez également utiliser l'élément que vous parcourez + .index. Par exemple : au lieu de {{loop.index}} dans une boucle days, vous pouvez utiliser {{day.index}}.
4. Parcourir les jours
Utilisez une boucle days lorsque vous souhaitez répéter du contenu pour chaque jour du programme.
Par exemple :
{% for day in days %} <section> <h2>Day {{ loop.index }} — {{ day.title }}</h2> <p>{{ day.description }}</p> </section> {% endfor %}La <section> est répétée pour chaque jour disponible dans le projet.
💡 Placez tous les éléments qui doivent être répétés pour chaque jour à l'intérieur de la boucle. Les éléments placés après {% endfor %} ne sont générés qu'une seule fois.
5. Parcourir les éléments du programme
Les boucles peuvent également être utilisées pour les informations du programme telles que les étapes, les hébergements et les transports.
Le même principe s'applique : la boucle parcourt une collection et la variable à l'intérieur de la boucle représente l'élément actuel.
Par exemple, une structure pour les étapes peut suivre cette logique :
{% for step in steps %} <div> <h3>{{ step.title }}</h3> </div> {% endfor %}Une structure similaire peut être utilisée pour d'autres collections prises en charge, telles que les hébergements ou les transports.
Les informations disponibles à l'intérieur de la boucle dépendent de l'objet que vous parcourez. Un jour, une étape, un hébergement, un transport, un produit ou un autre objet peut donner accès à des informations différentes.
6. Utiliser des boucles imbriquées
Vous pouvez placer une boucle à l'intérieur d'une autre lorsque vous devez répéter des informations appartenant à chaque élément d'une première collection.
Un exemple courant consiste à afficher les étapes associées à chaque jour.
La structure suit cette logique :
{% for day in days %} <h2>{{ day.title }}</h2> {% for step in day.steps %} <h3>{{ step.title }}</h3> {% endfor %} {% endfor %}La boucle externe parcourt les jours. Pour chaque jour, la boucle interne parcourt les étapes associées à ce jour.
Cela permet à la page web générée de suivre la hiérarchie du programme :
Day 1
→ Step 1
→ Step 2
Day 2
→ Step 1
→ Step 2
→ Step 3
💡 Lorsque vous travaillez avec des boucles imbriquées, faites attention à l'objet que vous utilisez actuellement. day.title fait référence au jour actuel, tandis que step.title fait référence à l'étape actuelle à l'intérieur de ce jour.
💡 Dans les templates HTML Ezus, les conditions sont prises en charge pour les étapes au sein d'un jour, en utilisant des structures telles que {% if day.steps %}. Ne supposez pas que des conditions peuvent être appliquées à d'autres variables ou objets.
7. Vérifier que chaque boucle est fermée
Chaque boucle ouverte avec :
{% for ... %}doit être fermée avec :
{% endfor %}Par exemple :
{% for day in days %} <h2>{{ day.title }}</h2> {% endfor %}Si vous utilisez des boucles imbriquées, chaque boucle nécessite son propre {% endfor %}.
La mise en forme et l'indentation peuvent faciliter la compréhension de la structure :
{% for day in days %} {% for step in day.steps %} {{ step.title }} {% endfor %} {% endfor %}⚠️ Un {% endfor %} manquant ou mal positionné peut empêcher le template de se générer correctement ou entraîner la répétition du contenu de manière inattendue.
9. Erreurs fréquentes avec les boucles
Si une boucle ne produit pas le résultat attendu, vérifiez :
La collection : assurez-vous de parcourir le bon type d'informations.
L'objet actuel : utilisez la variable correspondant à l'objet à l'intérieur de la boucle.
Les balises d'ouverture et de fermeture : vérifiez que chaque
{% for ... %}possède un{% endfor %}correspondant.Les boucles imbriquées : assurez-vous que chaque variable fait référence au bon niveau d'information.
Les informations sources : vérifiez que le projet contient bien les éléments que la boucle est censée afficher.
Les conditions : si le contenu se trouve à l'intérieur d'une condition
{% if %}, vérifiez que la condition est remplie.
⚠️ Un résultat vide ne signifie pas nécessairement que la boucle est incorrecte. La collection peut simplement ne contenir aucune information correspondante dans le projet utilisé pour le test.
10. Tester votre boucle
Après avoir créé ou modifié une boucle :
Enregistrez le template HTML.
Générez la page web avec un projet représentatif.
Vérifiez le nombre d'éléments générés.
Comparez-les avec les informations correspondantes dans le projet.
Vérifiez le premier et le dernier élément afin de vous assurer que l'ensemble de la collection est bien traité.
Testez avec un autre projet contenant un nombre différent d'éléments.
💡 Une bonne boucle doit s'adapter sans nécessiter de modifications du HTML lorsqu'un projet contient trois éléments et qu'un autre en contient dix.
🔭 Consultez Liste complète des variables HTML pour trouver les variables disponibles dans vos templates HTML, ainsi que Utiliser les champs personnalisés dans les templates HTML si vous devez récupérer des informations à partir de champs configurés spécifiquement pour votre compte.