Desarrollar tus plantillas mediante código HTML te provee una versatilidad y personalización inigualables, a costa de tener que definir exactamente qué es lo que se quiere visualizar y sortear las dificultades que trae consigo aprender a usar la herramienta. Al finalizar este artículo contarás con toda la información necesaria para usar la información de tu base de datos en los correos que reciban los clientes.
Para comenzar a trabajar con HTML en el Template de Campaña dirígete a la pestaña Importar HTML (1.), aquí puedes pegar el código con el que vayas a trabajar o empezar con un lienzo en blanco. Una vez tomada la decisión aprieta el botón importar (2.) para acceder a la interfaz con las herramientas.
Las filas utilizadas en el editor drag & drop se tratan de tablas normales de HTML (<td> esto es una tabla </td>) con sus respectivas filas (<tr> esto es una fila </tr>), lo que las hace dinámicas es que utilizan la información disponible en WoowUp invocada a través de comentarios HTML (<!-- esto es un comentario -->).
La lógica a implementar será guardar la información en una variable dentro de un comentario y luego utilizar los atributos de dicha variable fuera del mismo con los Campos Dinámicos accesibles desde el botón en la esquina derecha.
Veamos algunos casos concretos.
Carrito abandonado
Si quieres mostrar en el correo los productos que abandonó en el ecommerce, su nombre, imagen, cantidad abandonada y precio podríamos utilizar la siguiente tabla:
<td>
<table align="center">
<tbody align="center">
<tr>
<td>
<img src="" style="width: 150px;" />
<h2 style="font-weight: bold; font-size: 18pt;"></h2>
</td>
</tr>
<tr>
<td>
<h3>Cantidad: </h3>
</td>
</tr>
<tr>
<td>
<h3>Precio: $</h3>
</td>
</tr>
</tbody>
</table>
</td>
Que se verían de la siguiente manera:
A primera vista no parece muy interesante, ya que nos faltan los datos con los que cuenta WoowUp, es decir la imagen del producto, el nombre, etc. Para poblar la tabla vamos a definir que queremos repetir esta misma estructura para cada producto —que llamaremos p— que esté en el carrito abandonado por el cliente.
<!--{% for p in customer.abandoned_cart.products() %} -->
Luego dentro de la tabla llamaremos las propiedades que necesitamos del producto: p.image_url para la dirección donde está alojada la imagen, p.name para el nombre, p.quantity para la cantidad y p.total_price para el precio de todos los productos elegidos.
<!--{% for p in customer.abandoned_cart.products() %} -->
<td>
<table align="center">
<tbody align="center">
<tr>
<td>
<img src="{{p.image_url}}" style="width: 150px;" />
<h2 style="font-weight: bold;font-size: 18pt;">{{p.name}}</h2>
</td>
</tr>
<tr>
<td>
<h3>Cantidad: {{p.quantity}} </h3>
</td>
</tr>
<tr>
<td>
<h3>Precio: ${{p.total_price}} </h3>
</td>
</tr>
</tbody>
</table>
</td>
<!--{% endfor %}-->
Notar que para llamar los campos dinámicos los encerramos entre llaves dobles {{}}, además delimitamos lo que abarca nuestro código for usando endfor.
Recomendación dinámica de productos
En el caso que quieras mostrar ciertos productos en concreto contamos con varias filas para hacerlo: por SKU, basado en navegación web, última compra, etc. En este ejemplo utilizaremos la recomendación por SKU, suponiendo que vamos a ofrecer una serie de productos que sabemos están en oferta.
Partimos de una tabla simple que tenga el nombre del producto separado de la imagen del producto por una línea, y luego el precio de lista tachado seguido del precio de oferta enaltecido. También vamos a recibir al cliente invocando su nombre con el campo dinámico {{customer.name}} para hacer un correo personalizado.
<table align="center" border="1" cellpadding="2" cellspacing="3" style="width: 600px;">
<caption>¡<strong>Tenemos unas increíbles ofertas para tí {{customer.name}}</strong>!</caption>
<thead>
<tr>
<th scope="col">
<hr /><img src="" style="width: 150px;" /></th>
<th scope="col">
<hr /><img src="" style="width: 150px;" /></th>
</tr>
</thead>
<tbody>
<tr>
<td>Precio de lista: <s>$</s>
<h3>¡Precio de oferta! $</h3>
</td>
<td>Precio de lista: <s>$</s>
<h3>¡Precio de oferta! $</h3>
</td>
</tr>
</tbody>
</table>
Si bien la tabla no parece quitarte el aliento aún, vamos a ver que al poblarlo con los datos de la plataforma, tendrá un acabado excepcional.
Vamos a declarar 2 variables p1 y p2, que representen cada producto, para luego invocar el nombre del producto con {{p1.base_name}}, el precio con {{p2.price}}, etc. Esto se logra insertando un comentario HTML en el que definimos p1 y p2 como los productos que se identifican con los 2 SKUs que necesitamos:
<!-- {% set p1, p2 = product_by_sku('1685388'), product_by_sku('1686814') %} -->
<!-- {% set p1, p2 = product_by_sku('1685388'), product_by_sku('1686814') %} -->
<table align="center" border="1" cellpadding="2" cellspacing="3" style="width: 600px;">
<caption>¡<strong>Tenemos unas increíbles ofertas para tí {{customer.name}}</strong>!</caption>
<thead>
<tr>
<th scope="col"> {{p1.base_name}}
<hr /><img src="{{p1.image_url}}" style="width: 150px;" /></th>
<th scope="col"> {{p2.base_name}}
<hr /><img src="{{p2.image_url}}" style="width: 150px;" /></th>
</tr>
</thead>
<tbody>
<tr>
<td>Precio de lista: <s>$ {{p1.price}}</s>
<h3>¡Precio de oferta! $ {{p1.offer_price}}</h3>
</td>
<td>Precio de lista: <s>$ {{p2.price}}</s>
<h3>¡Precio de oferta! $ {{p2.offer_price}}</h3>
</td>
</tr>
</tbody>
</table>
¡Voilà! La tabla está completa con datos personalizados, dinámicos y automatizados.
Puedes reutilizar la tabla creada para otras campañas o modificarla completamente.
