Todas las colecciones
Editor de plantillas
Filas
Personaliza tus plantillas en el editor de WoowUp
Personaliza tus plantillas en el editor de WoowUp

Te explicamos como personalizar tus plantillas en el editor utilizando código TWIG.

Actualizado hace más de una semana


El editor de WoowUp utiliza un potente motor de templates llamado TWIG, el cual te brinda la capacidad de utilizar programación para modificar los templates según los datos disponibles de tus clientes en WoowUp.

Gracias a esta tecnología puedes mostrar en tus correos electrónicos productos de carritos abandonados, productos navegados y más. En nuestro artículo "Usando condicionales en tus plantillas de WoowUp", te explicamos cómo funciona la lógica para personalizar tus mensajes con diversas acciones.

A continuación, te proporcionamos una variedad de códigos para que puedas llevar a cabo acciones como la personalización de banners, nuevos productos y más vendidos según la categoría navegada, abandonada en el carrito o la última compra, entre otros códigos condicionados. 

Los códigos que a continuación detallamos para que puedas personalizar aún más tus campañas deben ser guardados en el editor para que puedas reutilizarlos.

Configuración general de las filas dinámicas

Lo primero es ingresar en módulo de campañas de WoowUp, puedes buscar una campaña ya activa o iniciar un template nuevo, ir el editor, seleccionas FILAS y Estructuras base.

Seleccionas el modelo de fila que más se adapte lo que necesitas, la arrastras al cuerpo de la campaña y podrás editar el contenido.

En este paso deberás agregar el código que desees utilizar para tus campañas.

Una vez que agregues el código guarda la fila, posteriomente verás el detalle de la fila en el menú de la derecha y debes guardarla para que esté disponible en tu repositor.
Este guardado puede ser en la opción footer, otros, según sea el caso.

Siguiendo estos pasos, podrás guardar y utilizar estos códigos personalizados en tus campañas de WoowUp de manera efectiva.


Última Navegación

Productos más vendidos en la categoría de la ultima navegación

Podrás mostrar una fila de hasta 3 productos más vendidos de la misma categoría de la última navegación.


Antes

<!-- 
{% set products = best_sellers_by_category([customer.browser_session_category().code])[0:3] %}
{% if products|length %}
{% set p1, p2, p3 = products.0, products.1, products.2 %}
-->

Después

<!-- 
{% endif %}
-->

Carrito Abandonado

Banners según categoría de Carrito Abandonado

Puedes condicionar que se muestren distintos banners en base a las categorías del primer producto abandonado en el carrito.

Condiciones:
- Formato, Los banners / imagenes deben estar siempre en formato JPG o PNG
- Nombre de las imágenes, te recomendamos identificar las imágenes con el nombre de la categoría.

- Código de la categoría, puedes encontrarlo ingresando en nuestro módulo de Analytics, reporte de catálogo de categorías, es el que deberás agregar al código.


Ten en cuenta que las imágenes se almacenan en el administrador de archivos del editor, en su propia carpeta. Por conveniencia, las imágenes se nombran según la categoría. Es recomendable tener un banner como caso default.


Antes

<!-- {% set banner = null %} {% set category = customer.abandoned_cart.products().0.category_path %} 
{% if 'codigocat-1' in category %} {% set banner = 'bannertest1.jpg'%}
{% elseif 'codigocat-2' in category %} {% set banner = 'bannertest2.jpg'%} {% elseif 'codigocat-3' in category %} {% set banner = 'bannertest3.jpg'%} {% else %}
{% set banner = 'default.jpg' %}
{% endif %}
-->

Debes reemplazar:
1. Código de la categoría, en este ejemplo te mostramos la sentencia 'codigocat-1' el 1 debe ser reemplazado por el que corresponda según el catálogo de categorías.

2. Nombre del banner, en este ejemplo te mostramos la sentencia 'bannertest1.jpg' el cuál debes reemplazar por el nombre de tu banner y tener en cuenta de cambiar el jpg por png de ser el caso.

Después

<!--
{% endif %}
-->

Para que puedas corroborar que el código es correcto debes buscar en el módulo de segmentos, personas que hayan abandonado carrito con las categorías deseadas.

Productos más nuevos según categoría de Carrito abandonado

Podrás mostrar una fila de hasta 3 nuevos productos de la misma categoría del primer producto abandonado en el carrito.

Antes

<!-- 
{% set new_products = new_products_by_category(customer.abandoned_cart.products().0.category_code)[0:3] %}
{% if new_products | length %} {% set p1, p2, p3 = new_products.0, new_products.1, new_products.2 %}
-->

Después

<!--
{% endif %}
-->

Best Sellers según categoría de Carrito abandonado

Podrás mostrar una fila de hasta 3 productos más vendidos, esta función admite un listado por lo que toma los primeros 3 productos y se pasan como parámetro.

Antes

<!-- 
{% set best_sellers =
best_sellers_by_category([customer.abandoned_cart.products().0.category_code, customer.abandoned_cart.products().1.category_code, customer.abandoned_cart.products().2.category_code])[0:3] %}
{% if best_sellers|length %}
{% set p1, p2, p3 = best_sellers.0, best_sellers.1, best_sellers.2 %}
-->

Después

<!--
{% endif %}
-->

Última Compra

Productos más nuevos de la categoría de la última compra

Podrás mostrar una fila de hasta 3 productos más nuevos agregados a la categoría en base a la última compra.

Antes

<!-- 
{% set newproducts = new_products_by_category(customer.last_purchase().items().0.product().category_code)[0:3] %}
{% if newproducts|length %}
{% set p1, p2, p3 = newproducts.0, newproducts.1, newproducts.2 %} -->

Después 
<!--
{% endif %}
-->

Para que puedas corroborar que el código fue agregado correctamente debes verificar la configuración de Navegación Web, chequear que en ¿Seguir productos y categorias por separados? esté configurado como NO, tal y como lo recomienda WoowUp en el artículo Navegación web: ¿Cómo configurarla?

Best Seller de la categoria de la ultima compra

Podrás mostrar una fila de hasta 3 producto más vendidos en base a la última compra, esta función admite un listado por lo que toma los primeros 3 productos y se pasan como parámetro.

Antes

<!-- 
{% set best_sellers = best_sellers_by_category([customer.last_purchase_products().0.category_code, customer.last_purchase_products().1.category_code, customer.last_purchase_products().2.category_code])[0:3] %}
{% if best_sellers|length %}
{% set p1, p2, p3 = best_sellers.0, best_sellers.1, best_sellers.2 %} -->

Después

<!-- 
{% endif %}
-->

Footer condicionado

Footer leads los primeros 30 días sin compra

La función muestra el footer si el contacto es un lead y su fecha de creación es inferior a los 30 días, en caso contrario lo oculta.

Para esto se deben seguir los siguientes pasos:

1. Agregar la condición de la fila la consulta de la cantidad de días que quieras limitar y condicionar que no tenga compras.

Antes

<!--
{% set customerCreatetime=customer.createtime|date("Y-m-d") %}
{% set thirtyDaysAgo= 'now'|date_modify("-30 day")|date("Y-m-d") %}
{% set isALead = (customer.last_purchase.date is null) %}
{% if customerCreatetime|date("Y-m-d")>thirtyDaysAgo|date("Y-m-d") and isALead %}
-->


Después

<!-- 
{%endif%}
-->

2. Agregar en el body el siguiente código para que pueda ejecutar la condición de la fila.

{{customerCreatetime|date("Y-m-d")}} >  {{thirtyDaysAgo|date("Y-m-d")}}

Banner / Imágenes rotativas por día (Editable para semana o mes)

Las imágenes se almacenan en el administrador de archivos del editor, en su propia carpeta. Las imágenes deben estar nombradas con el día en el cual deben renderizar y el nombre debe ser en inglés, por ejemplo para la imagen a usar el día lunes, el nombre debe ser monday.png

Antes

{% set date = now | date("l") %}
{% set formated_date = date_format(date, "m/d/Y") %}
{% set today = date_format(date, "l") %}

directorio-imagenes/{{today}}.png

Después

<!-- 
-->


Es importante mantener exactamente el mismo formato en los códigos, en caso de que tengas alguna inquietud puedes contactar a nuestro equipo de soporte.


¿Ha quedado contestada tu pregunta?