Las plantillas de correo electrónico se expresan en HTML y lenguaje de marcado. Si se utiliza la biblioteca de Javascript Underscore, es posible crear plantillas dinámicas enriquecidas con datos.
💡 Si estás buscando cómo editar la plantilla de checkout con WhatsApp, haz clic aquí.
📖 Este artículo te explica:
Sustitución de datos variables en plantillas de correo electrónico con HTML
Para utilizar el valor de una variable en la plantilla, es necesario usar esta sintaxis:
<%= ... %>
Por ejemplo, el siguiente código corresponde a la última fila de una tabla HTML. La fila tiene tres celdas vacías, el título traducido de los datos, el valor total general y la divisa establecida en la configuración de compra del Flipbook.
<table>
... (las primeras columnas se eliminaron por claridad)...
<tr>
<td></td>
<td></td>
<td></td>
<td><strong><%= data.language.grandTotal %></strong></td>
<td><strong><%= data.grandTotal %> <%= data.settings.currency %>
</strong>
</td>
</tr>
</table>
¿Cómo saber a qué corresponde cada una de ellas?
Comencemos con la primera celda con datos variables:
<%= data.language.grandTotal %>
Aquí, "data." son los objetos JSON que contienen toda la información disponible (valores), y "language." son los objetos JSON de los nombres disponibles (traducidos automáticamente); finalmente, "grandTotal" es el valor que se quiere incluir.
Cuando la plantilla se procesa para generar el correo final, todas las variantes dentro de "<%= ... %> son reemplazados por valores reales.
En el ejemplo anterior, data.language.grandTotal sería sustituido por la traducción de "Gran total" en el lenguaje del flipbook; data.grandTotal correspondería al monto total de la orden de compra, y data.settings.currency sería la divisa especificada en la configuración de compra.
De esta manera, si el lenguaje del Flipbook es Inglés, la moneda son euros y la compra total son 350, el correo mostraría los datos así:
Grand Total 350.00 EUR
Entrada de muestra (Sample input)
Las opciones disponibles de objetos de datos dependen del tipo de plantilla de correo electrónico y los campos usados en el formulario.
En el editor de plantillas, puedes ver un ejemplo de cómo los objetos de datos están estructurados. Sólo necesitas ir a la pestaña "Sample Input" (Entrada de muestra).
Esta pestaña muestra una representación JSON de todos los objetos de datos, sus objetos anidados y la matriz de elementos que puedes utilizar en los correos electrónicos con algunos datos de muestra. Por ejemplo:
"itemID": "XYZ25",
Aquí está la lista completa en formato JSON:
{
"language": {
"title": "Shopping list",
"item": "Item",
"price": "Price",
"amount": "Amount",
"total": "Total",
"grandTotal": "Grand total",
"description": "Description"
},
"settings": {
"hidePrices": false,
"decimalSeparator": ".",
"currency": "DKK"
},
"catalogUrl": "http://demo.ipapercms.dk/Products/Demo1/",
"items": [
{
"itemID": "XYZ25",
"name": "Club soda",
"price": 79.95,
"amount": 4,
"description": "Effervescent beverage"
}
],
"grandTotal": 319.8,
"sender": {
"name": "data.fields["Sender name"]",
"email": "data.fields["Sender email"]"
},
"recipient": {
"name": "data.fields["Recipient name"]",
"email": "data.fields["Recipient email"]"
},
}
Estructuras dinámicas con ciclos
Es posible crear una estructura dinámica para tu plantilla usando ciclos. Esto es particularmente útil para crear un número variable de filas de la tabla, al incluir una fila por cada artículo del pedido.
Para crear un ciclo, esta es la sintaxis que se tiene que usar:
<% _.each(data.items, function(item) { %>
(... Contenido repetido ...)
<% }); %>
En este caso «data.items» es una colección de elementos en el objeto de datos JSON.
El elemento «item» será accesible dentro del ciclo, y representará el elemento actual. El ciclo se ejecutará tantas veces como elementos tenga la colección que se está repitiendo. Dentro del cuerpo del ciclo, se puede utilizar la sustitución regular de variables en el objeto «item».
El código de abajo representa una tabla HTML completa. Las filas superior e inferior de la tabla son estáticas, pero la fila central se repite con un ciclo para cada elemento de la lista extraída.
<table>
<tr>
<td><strong><%= data.language.item %> ID</strong></td>
<td><strong><%= data.language.description %></strong></td>
<td><strong><%= data.language.price %></strong></td>
<td><strong><%= data.language.amount %></strong></td>
<td><strong><%= data.language.total %></strong></td>
</tr>
<% _.each(data.items, function(item) { %>
<tr>
<td><%= item.itemID %></td>
<td><%= item.name %></td>
<td><%= item.price %></td>
<td><%= item.amount %></td>
<td><%= (item.amount * item.price) %></td>
</tr>
<% }); %>
<tr>
<td></td>
<td></td>
<td></td>
<td><strong><%= data.language.grandTotal %></strong></td>
<td style="border-top: 1px solid black; border-bottom: double"
<strong><%= data.grandTotal %> <%= data.settings.currency %>
</strong>
</td>
</tr>
</table>
Ejemplo completo de una plantilla de correo electrónico
El siguiente código representa un ejemplo de plantilla de correo electrónico que incluye un listado de los productos e incluye "Hola" y "Saludos cordiales".
<html>
<head>
<title><%= data.language.title %></title>
<style>body, td { font-family: Verdana; font-size: 12px; }</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<p>Hola <%=data.fields["Contact name"]%></p>
<p>Estos son los productos que elegiste del catálogo:<a href="<%= data.catalogUrl %>"></a><%= data.catalogUrl %></p>
<p>Este correo electrónico es sólo de referencia y pronto deberías recibir otro correo de confirmación. </p>
<table>
<tr>
<td><strong><%= data.language.item %> ID</strong></td>
<td><strong><%= data.language.description %></strong></td>
<% if (!data.settings.hidePrices) { %>
<td><strong><%= data.language.price %></strong></td>
<% } %>
<td><strong><%= data.language.amount %></strong></td>
<% if (!data.settings.hidePrices) { %>
<td><strong><%= data.language.total %></strong></td>
<% } %>
</tr>
<% _.each(data.items, function(item) { %>
<tr>
<td><%= _.escape(item.itemID) %></td>
<td><%= _.escape(item.name) %></td>
<% if (!data.settings.hidePrices) { %>
<td><%= item.price.toFixed(2).replace('.', data.settings.decimalSeparator) %></td><% } %>
<td><%= item.amount %></td>
<% if (!data.settings.hidePrices) { %>
<td><%= (item.amount * item.price).toFixed(2).replace('.', data.settings.decimalSeparator) %></td><% } %>
</tr>
<% }); %>
<tr>
<td></td>
<td></td>
<td></td>
<td><strong><%= data.language.grandTotal %></strong></td>
<td style="border-top: 1px solid black; border-bottom: double"><strong><%= data.grandTotal %> <%= data.settings.currency %></strong></td>
</tr>
</table>
<p>
</br>
</br>
Saludos cordiales,
</br>
- El equipo de iPaper
</p>
</body>
</html>
⚠️ Considera que si accidentalmente borras parte del código <%= data.grandTotal %>, como en este caso %= data.grandTotal %>, la plantilla no funcionará hasta que todo el código esté completo.
Ahora sí, si tienes un poco de conocimiento de HTML, podrás modificar las plantillas de correo electrónico de iPaper para hacer checkout.
Convierte tu PDF en una experiencia interactiva de compras en línea
Entiende cómo esta y otras tácticas para Flipbooks pueden ayudarte a atraer e inspirar a tus clientes en nuestro Marco de Éxito.