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 campañas productos específicos de los eventos de carrito abandonado, navegaciones, y ventas.
👉 En nuestro artículo Añade condicionales en tus plantillas, te explicamos cómo funciona la lógica para personalizar tus mensajes.
Configuración general de las filas dinámicas
Ingresa en módulo de campañas de WoowUp (puedes buscar una campaña ya activa o iniciar un template nuevo), y desde su editor, selecciona Filas > Estructuras base:
Selecciona el modelo de fila que más se adapte a lo que necesitas, y arrástralo al cuerpo de la campaña:
Dentro de Propiedades de la fila > Contenido dinámico > Condición deberás hacer click en "Añadir condición":
Allí deberás agregar el código que desees utilizar para tus campañas:
Recuerda guardar los cambios!
👉 Aquí puedes ver cómo guardar y reutilizar tus propias filas customizadas dentro del editor: ¿Cómo guardar filas customizables?
Filas customizables
Aquí te compartimos los códigos que debes añadir para mostrar diferentes opciones de productos según necesites:
Última Navegación
Productos más vendidos en la categoría de la ultima navegación
Se 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 %}
-->
Mostrar productos visitados de una categoría específica
Dentro del listado de productos visitados en la última navegación solo se mostrarán aquellos recomendables pertenecientes a la categoría que se indique en el código:
Antes
<!--
{% set included_categories = ["A"] %}
{% for p in customer.browser_session().all %}
{% if p.category_code in included_categories %}
-->Después
<!--
{% endif %} {% endfor %}
-->Ocultar productos visitados de una categoría específica
Dentro del listado de productos visitados se mostrarán todos los productos recomendables del evento de última navegación excluyendo a aquellos pertenecientes a la categoría que se indique en el código.
Antes
<!--
{% set excluded_categories = ["A"] %}
{% for p in customer.browser_session().all %}
{% if p.category_code not in excluded_categories %}
-->Después
<!--
{% endif %} {% endfor %}
-->
❗Para probar estas filas debes buscar en tu base a los contactos que hayan navegado por última vez productos de distintas categorías, entre ellas la que has indicado en el código.
Aclaraciones
Puedes consultar el código de tus categorías dentro del Catálogo de categorías.
El código de la categoría debe indicarse donde figura
["A"](así por ejemplo:["40"]).Puedes incluir/excluir más de una categoría, para ello deberás colocar sus códigos de este modo:
["A", "B", "C"], (así por ejemplo:["40", "50", "60"]).
Carrito Abandonado
Banners según categoría de Carrito Abandonado
Se mostrarán distintos banners en base a las categorías del primer producto abandonado en el carrito.
Condiciones
- Formato: Los banners / imágenes 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 dentro del Catálogo de categorías.
👉 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 %}
-->
Después
<!-- -->
Configurar la imagen del banner
Debes activar el switch de imagen dinámica dentro de las opciones del contenido de imagen y añadir la siguiente url dinámica:
Luego agregar en el bloque la url de una imagen que funcionará como placeholder, la misma deberá tener un tamaño similar a la que se pretende mostrar en el banner, por ejemplo:
Aclaraciones
Donde figura
'codigocat-1'deberás colocar el código de la categoría que corresponda según el catálogo de categorías (lo mismo con las sentencias siguientes,'codigocat-2','codigocat-3', etc).Donde figura
'bannertest1.jpg'deberás colocar el nombre de archivo, junto con su extensión, sea jpg o png (lo mismo con las sentencias siguientes,'bannertest2.jpg','bannertest3.jpg', etc).
❗Para probar esta fila debes buscar en tu base a los contactos que hayan abandonado su último carrito con las categorías deseadas.
Productos más nuevos según categoría de Carrito abandonado
Se 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
Se 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
Se 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 %}
-->
❗Debes verificar la configuración de Navegación Web, y chequear que en ¿Seguir productos y categorías por separados? esté configurado como NO, tal como lo recomendamos aquí
Best Seller de la categoria de la ultima compra
Se mostrará una fila de hasta 3 productos 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
Se mostrará 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.
Pasos
Agregar a 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%}
-->*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}}.pngDespués
<!--
-->
Número de cuotas
Si deseas incluir el número de cuotas en tus campañas puedes usar el método calculate_installments. Este método te permitirá calcular la cantidad de cuotas en las que quieras dividir el precio.
Para hacerlo, es necesario que incluyas un campo de texto e incluyas el campo ${{p.calculate_installments(X)}} en donde "X" es el número de cuotas.
Veamos un ejemplo aplicado a 3 cuotas:
Hemos incluido en el campo e texto lo siguiente: 3 cuotas de: ${{p.calculate_installments(3)}}. En donde hay un texto inicial "3 cuotas de" que indica al usuario qué es el monto que está viendo y por último, el código ${{p.calculate_installments(3)}} en donde indicamos que el precio del producto se divida en 3 cuotas.
El resultado es el siguiente:
En los casos en donde hay múltiples productos en una fila, solo se debe agregar p1, p2, p3, etc. Tal como te mostramos en el siguiente ejemplo:
¿Cómo limitar la cantidad de productos que aparecen en una fila dinámica?
Cuando una fila dinámica es de cantidad variable de productos, por ejemplo los productos abandonados en el carrito, productos vistos en la web, replenishment o última compra, si deseas, puedes limitar la cantidad de productos que quieres que le aparezca al cliente.
Esto lo haces agregando al código el fragmento [0:N] luego de la función (las funciones son los fragmentos de codigo TWIG que terminan con paréntesis cerrados ()), donde N es la cantidad máxima de productos a mostrar en la lista.
Por ejemplo, si quisieras limitar a 3 productos el listado de productos de la última compra del cliente, deberías agregar [0:3] luego de la función y quedaría así:
Fila original (muestra todos los productos de la última compra)
Fila modificada (muestra solo 3 productos de la última compra)
Y listo! Esto mismo puedes replicarlo en el resto de filas si así lo deseas.
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.