Cómo Crear Tablas Dinámicas en las Plantillas de Email Usando `<table>` y data proveniente de la Lista de Contactos
Las tablas dinámicas son una forma eficiente de presentar datos variables dentro de un email, como podría ser una lista de productos y sus descripciones especialmente personalizadas para el destinatario. En este artículo, te mostramos cómo crear una tabla dinámica utilizando tablas <table> en el HTML y cómo llenar su contenido automáticamente con datos que provienen de la lista de contactos.
Una tabla dinámica se genera automáticamente utilizando un conjunto de datos que se toma de la lista de contactos. Estos datos se llenan y mapean al momento de la activación de la conversación, permitiendo crear tablas personalizadas sin necesidad de agregar manualmente cada fila y columna.
- Automatización: No necesitas modificar manualmente la tabla cada vez que cambian los productos o sus descripciones; el código lo hace automáticamente.
- Hiper Personalización: Cada usuario recibe información específica según los datos almacenados en su registro de la lista de contactos. Las tablas se generan automáticamente basadas en la información asociadas a cada contacto, lo que permite entregar contenido altamente relevante y personalizado.
- Organización: Los datos se presentan de manera clara y estructurada, ideal para listas con detalles, catálogos de productos o informes.
- Flexibilidad: Puedes ajustar el contenido dinámico según los datos disponibles en la lista de contactos.
A continuación, te mostramos cómo crear una tabla dinámica con un ejemplo que presenta una lista de productos y sus descripciones. Esta tabla se llenará automáticamente con datos en formato json provenientes de un campo específico de la lista de contactos.
Así se vería la tabla en el editor del nodo de email del Conversation Manager:
La tabla se estructura utilizando las etiquetas estándar de HTML <table>, con un encabezado que contiene las columnas Producto y Descripción:
Esta primera fila define los encabezados de la tabla, que indican el tipo de información que se mostrará en las columnas.
El bucle #foreach permite iterar sobre los datos que provienen de la variable dinámica $s{product_list}, que contiene la lista de productos y sus descripciones mapeados desde la lista de contactos al momento de la activación de la conversación.
- `post-block="#end`" : Indica que la acción asignada a este bloque (en este caso, la etiqueta <tr>) finalizará una vez que dicho bloque se cierre con la directiva #end. Esto significa que todo lo que se encuentra dentro de este bloque será procesado en cada iteración del bucle y terminará con el cierre del bloque de la fila (</tr>).
- `$item.name`: Muestra el nombre del producto.
- `$item.description`: Muestra la descripción del producto.
Cada vez que el bucle se ejecuta, se creará una nueva fila con el nombre y la descripción de un producto en las celdas correspondientes.
La variable $s{product_list} podría contener una lista de productos similar a esta:
Estos datos serán utilizados para llenar la tabla automáticamente cuando se cargue el template.
¿Qué es una Tabla Dinámica?
Una tabla dinámica se genera automáticamente utilizando un conjunto de datos que se toma de la lista de contactos. Estos datos se llenan y mapean al momento de la activación de la conversación, permitiendo crear tablas personalizadas sin necesidad de agregar manualmente cada fila y columna.
¿Por qué usar tablas dinámicas?
- Automatización: No necesitas modificar manualmente la tabla cada vez que cambian los productos o sus descripciones; el código lo hace automáticamente.
- Hiper Personalización: Cada usuario recibe información específica según los datos almacenados en su registro de la lista de contactos. Las tablas se generan automáticamente basadas en la información asociadas a cada contacto, lo que permite entregar contenido altamente relevante y personalizado.
- Organización: Los datos se presentan de manera clara y estructurada, ideal para listas con detalles, catálogos de productos o informes.
- Flexibilidad: Puedes ajustar el contenido dinámico según los datos disponibles en la lista de contactos.
Estructura del Código para Crear una Tabla Dinámica
A continuación, te mostramos cómo crear una tabla dinámica con un ejemplo que presenta una lista de productos y sus descripciones. Esta tabla se llenará automáticamente con datos en formato json provenientes de un campo específico de la lista de contactos.
Código de Ejemplo:
<html>
<head>
<title>Tabla Dinámica de Productos</title>
</head>
<body>
<table border="1" cellpadding="1" cellspacing="1" style="width:500px;">
<tbody>
<tr>
<td width="20%">Producto</td>
<td width="80%">Descripción</td>
</tr>
<tr block="#foreach( $item in $s{product_list} )" post-block="#end">
<td width="20%"><strong><block>$item.name</block></strong></td>
<td width="80%"><strong><block>$item.description</block></strong></td>
</tr>
</tbody>
</table>
</body>
</html>Así se vería la tabla en el editor del nodo de email del Conversation Manager:
Explicación del Código
Paso 1: Definir la Estructura de la Tabla
La tabla se estructura utilizando las etiquetas estándar de HTML <table>, con un encabezado que contiene las columnas Producto y Descripción:
<tr>
<td width="20%">Producto</td>
<td width="80%">Descripción</td>
</tr>Esta primera fila define los encabezados de la tabla, que indican el tipo de información que se mostrará en las columnas.
Paso 2: Usar el Bucle #foreach para Llenar la Tabla
El bucle #foreach permite iterar sobre los datos que provienen de la variable dinámica $s{product_list}, que contiene la lista de productos y sus descripciones mapeados desde la lista de contactos al momento de la activación de la conversación.
<tr block="#foreach( $item in $s{product_list} )" post-block="#end">
<td width="20%"><strong><block>$item.name</block></strong></td>
<td width="80%"><strong><block>$item.description</block></strong></td>
</tr>- `post-block="#end`" : Indica que la acción asignada a este bloque (en este caso, la etiqueta <tr>) finalizará una vez que dicho bloque se cierre con la directiva #end. Esto significa que todo lo que se encuentra dentro de este bloque será procesado en cada iteración del bucle y terminará con el cierre del bloque de la fila (</tr>).
- `$item.name`: Muestra el nombre del producto.
- `$item.description`: Muestra la descripción del producto.
Cada vez que el bucle se ejecuta, se creará una nueva fila con el nombre y la descripción de un producto en las celdas correspondientes.
Ejemplo de Datos en la Lista de Contactos
La variable $s{product_list} podría contener una lista de productos similar a esta:
[
{
"name": "Tarjeta de Crédito Oro",
"description": "Tarjeta de crédito con beneficios premium y acceso a descuentos exclusivos."
},
{
"name": "Tarjeta de Crédito Platino",
"description": "Tarjeta con alta línea de crédito, acceso a salas VIP y programas de recompensas."
},
{
"name": "Tarjeta de Crédito Cashback",
"description": "Tarjeta que devuelve un porcentaje del dinero gastado en compras elegibles."
}
]Estos datos serán utilizados para llenar la tabla automáticamente cuando se cargue el template.
Actualizado el: 09/10/2024
¡Gracias!