Un bucle permite que una plantilla HTML repita la misma estructura para varios elementos de tu proyecto de Ezus.
Por ejemplo, en lugar de crear manualmente una sección para el Día 1, Día 2, Día 3, etc., puedes crear la estructura una sola vez y utilizar un bucle para repetirla para cada día del programa.
Los bucles son especialmente útiles cuando el número de elementos puede variar de un proyecto a otro.
⚠️ Este artículo se centra en el uso específico de los bucles en las plantillas HTML de Ezus. Se presupone que ya estás familiarizado con los conceptos básicos de HTML.
1. ¿Cómo funciona un bucle?
Un bucle tiene tres partes principales:
{% for item in collection %} Content to repeat {% endfor %}{% for ... %}inicia el bucle.El contenido situado entre las etiquetas de apertura y cierre se repite para cada elemento.
{% endfor %}cierra el bucle.
Por ejemplo, para repetir contenido para cada día del programa:
{% for day in days %} <h2>{{ day.title }}</h2> {% endfor %}Si tu programa contiene tres días, Ezus recorre los días uno a uno y genera el elemento <h2> para cada uno de ellos.
💡 Piensa en un bucle como: «Para cada elemento de esta colección, genera este contenido».
2. Utilizar información del elemento actual
Dentro de un bucle, la variable hace referencia al elemento que se está procesando en ese momento.
Por ejemplo:
{% for day in days %} <h2>{{ day.title }}</h2> {% endfor %}Aquí:
dayses la colección que recorre Ezus.dayrepresenta el día actual.day.titlerecupera el título de ese día.
Si el proyecto contiene:
Llegada a París
Descubrir París
Salida
el mismo bucle puede generar:
Llegada a París
Descubrir París
Salida
No necesitas crear un HTML diferente para cada día.
⚠️ Las variables dentro de los bucles utilizan la sintaxis del objeto actual, como {{ day.title }}. No copies automáticamente una variable de Slides como $$days.1.title$$ dentro de un bucle HTML.
🔭 Consulta Lista completa de variables para HTML para encontrar las variables HTML disponibles y su contexto.
3. Mostrar la posición de un elemento con loop.index
Dentro de un bucle, puedes utilizar:
{{ loop.index }}
para mostrar la posición del elemento actual.
El primer elemento devuelve 1, el segundo devuelve 2, y así sucesivamente.
Por ejemplo:
{% for day in days %} <h2>Day {{ loop.index }} — {{ day.title }}</h2> {% endfor %}Esto puede generar:
Día 1 — Llegada a París
Día 2 — Descubrir París
Día 3 — Salida
Esto resulta útil cuando quieres numerar elementos automáticamente sin tener que asignar manualmente un número a cada uno.
💡 También puedes utilizar el elemento que estás recorriendo + .index. Por ejemplo: en lugar de {{loop.index}} dentro de un bucle de días, puedes utilizar {{day.index}}.
4. Recorrer los días con un bucle
Utiliza un bucle days cuando quieras repetir contenido para cada día del programa.
Por ejemplo:
{% for day in days %} <section> <h2>Day {{ loop.index }} — {{ day.title }}</h2> <p>{{ day.description }}</p> </section> {% endfor %}El elemento <section> se repite para cada día disponible en el proyecto.
💡 Coloca todos los elementos que deban repetirse para cada día dentro del bucle. Los elementos situados después de {% endfor %} se generan una sola vez.
5. Recorrer los elementos del programa con un bucle
Los bucles también pueden utilizarse para información del programa, como etapas, alojamientos y transportes.
Se aplica el mismo principio: el bucle recorre una colección y la variable situada dentro del bucle representa el elemento actual.
Por ejemplo, una estructura para las etapas puede seguir esta lógica:
{% for step in steps %} <div> <h3>{{ step.title }}</h3> </div> {% endfor %}Se puede utilizar una estructura similar para otras colecciones compatibles, como alojamientos o transportes.
La información disponible dentro del bucle depende del objeto que estés recorriendo. Un día, etapa, alojamiento, transporte, producto u otro objeto puede proporcionar información diferente.
6. Utilizar bucles anidados
Puedes colocar un bucle dentro de otro cuando necesites repetir información que pertenece a cada elemento de una primera colección.
Un ejemplo habitual es mostrar las etapas asociadas a cada día.
La estructura sigue esta lógica:
{% for day in days %} <h2>{{ day.title }}</h2> {% for step in day.steps %} <h3>{{ step.title }}</h3> {% endfor %} {% endfor %}El bucle exterior recorre los días. Para cada día, el bucle interior recorre las etapas asociadas a ese día.
Esto permite que la página web generada siga la jerarquía del programa:
Día 1
→ Etapa 1
→ Etapa 2
Día 2
→ Etapa 1
→ Etapa 2
→ Etapa 3
💡 Cuando trabajes con bucles anidados, presta atención al objeto que estás utilizando en cada momento. day.title hace referencia al día actual, mientras que step.title hace referencia a la etapa actual dentro de ese día.
💡 En las plantillas HTML de Ezus, las condiciones son compatibles con las etapas dentro de un día, utilizando estructuras como {% if day.steps %}. No asumas que las condiciones pueden aplicarse a otras variables u objetos.
7. Asegúrate de cerrar todos los bucles
Cada bucle abierto con:
{% for ... %}debe cerrarse con:
{% endfor %}Por ejemplo:
{% for day in days %} <h2>{{ day.title }}</h2> {% endfor %}Si utilizas bucles anidados, cada bucle necesita su propio {% endfor %}.
El formato y la indentación pueden facilitar la comprensión de la estructura:
{% for day in days %} {% for step in day.steps %} {{ step.title }} {% endfor %} {% endfor %}⚠️ La ausencia de un {% endfor %} o su colocación incorrecta puede impedir que la plantilla se genere correctamente o hacer que el contenido se repita de forma inesperada.
9. Errores habituales con los bucles
Si un bucle no produce el resultado esperado, comprueba:
La colección: asegúrate de estar recorriendo el tipo de información correcto.
El objeto actual: utiliza la variable correspondiente al objeto dentro del bucle.
Etiquetas de apertura y cierre: comprueba que cada
{% for ... %}tenga su correspondiente{% endfor %}.Bucles anidados: asegúrate de que cada variable haga referencia al nivel de información correcto.
Información de origen: comprueba que el proyecto contenga realmente los elementos que esperas que muestre el bucle.
Condiciones: si el contenido se encuentra dentro de una condición
{% if %}, comprueba que se cumpla la condición.
⚠️ Un resultado vacío no significa necesariamente que el bucle sea incorrecto. Es posible que la colección simplemente no contenga la información correspondiente en el proyecto utilizado para la prueba.
10. Prueba tu bucle
Después de crear o modificar un bucle:
Guarda la plantilla HTML.
Genera la página web con un proyecto representativo.
Comprueba cuántos elementos se han generado.
Compáralos con la información correspondiente del proyecto.
Comprueba el primer y el último elemento para asegurarte de que se está procesando la colección completa.
Realiza una prueba con otro proyecto que contenga un número diferente de elementos.
💡 Un buen bucle debe adaptarse sin necesidad de realizar cambios en el HTML cuando un proyecto contiene tres elementos y otro contiene diez.
🔭 Consulta Lista completa de variables para HTML para encontrar las variables disponibles dentro de tus plantillas HTML y Uso de campos personalizados en plantillas HTML si necesitas recuperar información de campos configurados específicamente para tu cuenta.