Cómo Crear Tablas Dinámicas Usando `divs` en las Plantillas de Email
Las tablas dinámicas permiten presentar información cambiante de manera automatizada dentro de los emails o plantillas en DANAconnect, sin necesidad de actualizar manualmente cada elemento. Este artículo te guiará sobre cómo crear tablas dinámicas usando divs dentro del editor de emails en la plataforma DANAconnect, utilizando el botón de bloques (Blocks) para insertar los tags <block> que permiten escribir código VTL (Velocity Template Language) en las plantillas de email.
Una tabla dinámica se genera automáticamente a partir de datos variables, como una lista de productos financieros, promociones o clientes. En lugar de definir manualmente cada fila, con una cantidad fija de elementos, se utilizan bucles que extraen los datos dinámicos de un texto JSON de un campo de la lista de contactos y los coloca dentro de una estructura definida por divs que simula el formato de una tabla con filas y columnas.
Las tablas dinámicas son útiles cuando necesitas:
- Mostrar información que cambia frecuentemente (como un listado de productos financieros o promociones).
- Organizar datos de manera clara y accesible.
- Adaptar tu contenido a diferentes usuarios con datos personalizados.
Para crear una tabla dinámica dentro de tus plantillas de email en DANAconnect, sigue estos pasos:
Dirígete al Conversation Manager y selecciona el nodo de email donde desees agregar una tabla dinámica.
En el editor de email, haz clic en el botón de bloques (Blocks) para abrir el "Block Properties" y comenzar a insertar los tags <block> que permiten escribir código VTL (Velocity Template Language) en las plantillas de email.
Dentro del campo Template, inserta el código de contenido dinámico. A continuación te mostramos un ejemplo de cómo hacerlo para listar productos financieros y sus descripciones, utilizando divs para simular columnas.
- Tags `<block>`: Los tags <block> se insertan usando el botón de bloques (Blocks) desde el editor de email, lo que permite escribir código VTL y manejar bucles como #foreach para recorrer los datos y finalizar con #end.
- Simulación de columnas con `divs`: La estructura de los divs está diseñada para simular columnas. Cada producto financiero tiene su propio div, que se alinea horizontalmente con el nombre y la descripción del producto.
- Encabezado estático: El encabezado de la tabla ("Nombre del Producto Financiero" y "Descripción") se muestra una vez al inicio.
Para que esta tabla funcione de manera dinámica, necesitas una fuente de datos, que sería una variable que se llena desde un campo en la lista de contactos y se mapea al momento de la activación de la conversación en DANAconnect. En este ejemplo, el JSON se encuentra en $s{productList} que, como ya mencionamos, es una variable que se llena desde un campo en la lista de contactos. A continuación tienes un ejemplo de un archivo JSON con productos financieros que funcionaría bien en ejemplo anterior:
NOTA IMPORTANTE: El json debe estar minificado (minify) para que funcione. En el ejemplo de arriba lo hemos puesto beautified para efectos de comprensión, pero se debe poner el json en la lista de contactos en bloque de texto minificado sin saltos de línea. Igualmente, es importante recordar que el campo de la lista de contacto debe tener suficiente longitud en caracteres para contener el json completo.
Una vez que hayas insertado el código dinámico y los datos JSON en tu plantilla de email, verifica que los datos se estén mostrando correctamente. El bucle generará automáticamente un nuevo div por cada producto financiero, mostrando su nombre y descripción en columnas. Te recomendamos hacer una prueba de un envío a un solo contacto antes de hacer la activación.
¿Qué es una Tabla Dinámica?
Una tabla dinámica se genera automáticamente a partir de datos variables, como una lista de productos financieros, promociones o clientes. En lugar de definir manualmente cada fila, con una cantidad fija de elementos, se utilizan bucles que extraen los datos dinámicos de un texto JSON de un campo de la lista de contactos y los coloca dentro de una estructura definida por divs que simula el formato de una tabla con filas y columnas.
¿Cuándo Usar Tablas Dinámicas?
Las tablas dinámicas son útiles cuando necesitas:
- Mostrar información que cambia frecuentemente (como un listado de productos financieros o promociones).
- Organizar datos de manera clara y accesible.
- Adaptar tu contenido a diferentes usuarios con datos personalizados.
Cómo Implementar Tablas Dinámicas Usando divs
Para crear una tabla dinámica dentro de tus plantillas de email en DANAconnect, sigue estos pasos:
Paso 1: Acceder al Editor de Email
Dirígete al Conversation Manager y selecciona el nodo de email donde desees agregar una tabla dinámica.
En el editor de email, haz clic en el botón de bloques (Blocks) para abrir el "Block Properties" y comenzar a insertar los tags <block> que permiten escribir código VTL (Velocity Template Language) en las plantillas de email.
Paso 2: Insertar Código de Tabla Dinámica
Dentro del campo Template, inserta el código de contenido dinámico. A continuación te mostramos un ejemplo de cómo hacerlo para listar productos financieros y sus descripciones, utilizando divs para simular columnas.
Ejemplo HTML con divs para crear un Listado de Productos Financieros:
<html>
<head>
<title>Lista de Productos</title>
<style type="text/css">
.product-container {
width: 100%;
margin-bottom: 20px;
}
.product-row {
width: 100%;
padding: 10px;
border-bottom: 1px solid #ccc;
}
.product-header {
font-weight: bold;
background-color: #f0f0f0;
padding: 10px;
}
.product-column {
display: inline-block;
width: 48%;
vertical-align: top;
}
</style>
</head>
<body>
<!-- Encabezado que solo se muestra una vez -->
<div class="product-container">
<div class="product-row product-header">
<div class="product-column">Nombre del Producto Financiero</div>
<div class="product-column">Descripción</div>
</div>
<!-- Inicio del loop que muestra los productos -->
<block name="loop">#foreach( $product in $s{productList} )</block>
<div class="product-row">
<div class="product-column" style="width: 48%; padding-right: 2%;">$product.name</div>
<div class="product-column" style="width: 48%; padding-left: 2%;">$product.description</div>
</div>
<block name="fin">#end</block>
</div>
</body>
</html>Explicación:
- Tags `<block>`: Los tags <block> se insertan usando el botón de bloques (Blocks) desde el editor de email, lo que permite escribir código VTL y manejar bucles como #foreach para recorrer los datos y finalizar con #end.
- Simulación de columnas con `divs`: La estructura de los divs está diseñada para simular columnas. Cada producto financiero tiene su propio div, que se alinea horizontalmente con el nombre y la descripción del producto.
- Encabezado estático: El encabezado de la tabla ("Nombre del Producto Financiero" y "Descripción") se muestra una vez al inicio.
Paso 3: Fuente de los datos y Estructura de Datos (JSON)
Para que esta tabla funcione de manera dinámica, necesitas una fuente de datos, que sería una variable que se llena desde un campo en la lista de contactos y se mapea al momento de la activación de la conversación en DANAconnect. En este ejemplo, el JSON se encuentra en $s{productList} que, como ya mencionamos, es una variable que se llena desde un campo en la lista de contactos. A continuación tienes un ejemplo de un archivo JSON con productos financieros que funcionaría bien en ejemplo anterior:
[
{ "name": "Cuenta de Ahorros Premium", "description": "Cuenta con intereses altos y cero comisiones." },
{ "name": "Tarjeta de Crédito Platinum", "description": "Tarjeta con beneficios exclusivos y millas acumuladas." },
{ "name": "Préstamo Personal", "description": "Préstamo con tasas bajas y pagos flexibles." },
{ "name": "Plan de Inversiones", "description": "Diversifica tu portafolio con este plan de inversiones a largo plazo." }
]NOTA IMPORTANTE: El json debe estar minificado (minify) para que funcione. En el ejemplo de arriba lo hemos puesto beautified para efectos de comprensión, pero se debe poner el json en la lista de contactos en bloque de texto minificado sin saltos de línea. Igualmente, es importante recordar que el campo de la lista de contacto debe tener suficiente longitud en caracteres para contener el json completo.
Paso 4: Verifica y Prueba
Una vez que hayas insertado el código dinámico y los datos JSON en tu plantilla de email, verifica que los datos se estén mostrando correctamente. El bucle generará automáticamente un nuevo div por cada producto financiero, mostrando su nombre y descripción en columnas. Te recomendamos hacer una prueba de un envío a un solo contacto antes de hacer la activación.
Actualizado el: 03/10/2024
¡Gracias!