Ir al contenido principal
Todas las coleccionesEditor de plantillasFilas
Personaliza tus filas dinámicas
Personaliza tus filas dinámicas

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 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 / 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 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

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

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}}.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?