Cómo crear listas dinámicas en los emails con contenidos provenientes de las listas de contacto
En este artículo, aprenderás a utilizar el contenido de tu lista de contactos para generar listas dinámicas usando ul (listas no ordenadas) en tus emails o templates. Esto te permitirá mostrar información como nombres de productos de manera dinámica y automatizada. También te mostraremos cómo usar el botón de block en el Conversation Manager para implementar esta funcionalidad de forma sencilla.
Una lista dinámica se llena automáticamente con datos que provienen de las listas de contactos. Esto significa que puedes crear listas personalizadas para cada destinatario sin tener que hacerlo manualmente. En este caso, usarás una estructura ul para crear una lista de elementos, como productos o servicios.
Las listas dinámicas son útiles cuando necesitas:
- Mostrar una serie de elementos, como productos, características o servicios.
- Automatizar la presentación de datos sin necesidad de editar manualmente cada elemento.
- Ofrecer contenido personalizado a partir de la información almacenada en la lista de contactos.
A continuación, te mostramos cómo crear una lista dinámica usando una lista no ordenada (ul) para iterar sobre un conjunto de datos, como los productos almacenados en tu lista de contactos.
Este bucle itera sobre cada elemento en la variable $s{products} que contiene una lista de productos desde tu lista de contactos en formato json (se mapea con el campo de la lista de contactos al momento de la activación como cualquier otra variable).
Cada vez que el bucle se ejecuta, se tomará un producto del arreglo y se mostrará en la lista.
Dentro del bucle, cada elemento del arreglo se mostrará como un elemento de la lista (<li>). La etiqueta <li> contiene el nombre del producto:
Este código genera una lista no ordenada que muestra dinámicamente el nombre de cada producto.
El bucle se cierra con el bloque #end, lo que indica que el proceso de iteración ha finalizado.
El Conversation Manager te permite agregar bloques dinámicos de código en tus templates, utilizando el botón de block. Esto facilita la personalización del contenido sin tener que escribir todo el código manualmente.
Aquí te mostramos cómo usar este botón:
Inserta un Block desde el Conversation Manager:
En la interfaz del nodo de email del Conversation Manager, verás un botón de block que te permite insertar bloques de código VTL en tus plantillas.
Define Bloques para el Bucle:
- Bloque para Iniciar el Bucle:
Al hacer clic en el botón de block, selecciona el bloque para iniciar el bucle que iterará sobre los datos. En este caso, el bloque #foreach iterará sobre la variable que contiene los productos:
- Bloque para Mostrar Elementos:
A continuación, define el bloque donde se mostrará cada elemento de la lista dinámica. Este bloque se encargará de insertar el nombre del producto dentro de un elemento <li> de la lista:
- Bloque para Cerrar el Bucle:
Finalmente, cierra el bucle con un bloque que indique el final de la iteración:
Personaliza el Contenido:
Puedes repetir este proceso para agregar más elementos dinámicos o personalizar el contenido con diferentes variables. El botón de block te permite insertar código dinámico sin tener que preocuparte por los detalles del formato.
¿Qué es una Lista Dinámica?
Una lista dinámica se llena automáticamente con datos que provienen de las listas de contactos. Esto significa que puedes crear listas personalizadas para cada destinatario sin tener que hacerlo manualmente. En este caso, usarás una estructura ul para crear una lista de elementos, como productos o servicios.
¿Cuándo Usar Listas Dinámicas con `ul`?
Las listas dinámicas son útiles cuando necesitas:
- Mostrar una serie de elementos, como productos, características o servicios.
- Automatizar la presentación de datos sin necesidad de editar manualmente cada elemento.
- Ofrecer contenido personalizado a partir de la información almacenada en la lista de contactos.
Estructura del Código para Crear una Lista Dinámica con ul
A continuación, te mostramos cómo crear una lista dinámica usando una lista no ordenada (ul) para iterar sobre un conjunto de datos, como los productos almacenados en tu lista de contactos.
Código de Ejemplo:
<html>
<head>
<title>Lista Dinámica de Productos</title>
</head>
<body>
<pre>
<block name="look1">#foreach( $product in $s{products} )</block>
</pre>
<ul>
<li><block name="item">$product.name</block></li>
</ul>
<block name="fin">#end</block>
</body>
</html>Explicación del Código
Paso 1: Bucle #foreach
Este bucle itera sobre cada elemento en la variable $s{products} que contiene una lista de productos desde tu lista de contactos en formato json (se mapea con el campo de la lista de contactos al momento de la activación como cualquier otra variable).
#foreach( $product in $s{products} )Cada vez que el bucle se ejecuta, se tomará un producto del arreglo y se mostrará en la lista.
Paso 2: Generar la Lista Dinámica
Dentro del bucle, cada elemento del arreglo se mostrará como un elemento de la lista (<li>). La etiqueta <li> contiene el nombre del producto:
<ul>
<li><block name="item">$product.name</block></li>
</ul>Este código genera una lista no ordenada que muestra dinámicamente el nombre de cada producto.
Paso 3: Cierre del Bucle
El bucle se cierra con el bloque #end, lo que indica que el proceso de iteración ha finalizado.
#endCómo Usar el Botón de Block en el Conversation Manager
El Conversation Manager te permite agregar bloques dinámicos de código en tus templates, utilizando el botón de block. Esto facilita la personalización del contenido sin tener que escribir todo el código manualmente.
Aquí te mostramos cómo usar este botón:
Inserta un Block desde el Conversation Manager:
En la interfaz del nodo de email del Conversation Manager, verás un botón de block que te permite insertar bloques de código VTL en tus plantillas.
Define Bloques para el Bucle:
- Bloque para Iniciar el Bucle:
Al hacer clic en el botón de block, selecciona el bloque para iniciar el bucle que iterará sobre los datos. En este caso, el bloque #foreach iterará sobre la variable que contiene los productos:
<block name="look1">#foreach( $product in $s{products} )</block>- Bloque para Mostrar Elementos:
A continuación, define el bloque donde se mostrará cada elemento de la lista dinámica. Este bloque se encargará de insertar el nombre del producto dentro de un elemento <li> de la lista:
<li><block name="item">$product.name</block></li>- Bloque para Cerrar el Bucle:
Finalmente, cierra el bucle con un bloque que indique el final de la iteración:
<block name="fin">#end</block>Personaliza el Contenido:
Puedes repetir este proceso para agregar más elementos dinámicos o personalizar el contenido con diferentes variables. El botón de block te permite insertar código dinámico sin tener que preocuparte por los detalles del formato.
Actualizado el: 09/10/2024
¡Gracias!