Si eliges crear tus propias plantillas de HTML con software externo a WoowUp y quieres que tus plantillas tengan contendido dinámico cuando las importes es necesario insertar código adicional. Este código es del motor de templates TWIG, el cual te permite el uso de lógica intercalada con tu código HTML y CSS.
¿Qué código debes insertar el código en tu plantilla?
Para agregar un recomendador o fila dinámica necesitas 2 tipos de elementos: las tags de inicio/fin y los campos dinámicos.
Las tags de inicio/fin te permiten delimitar sobre que sección de tu plantilla operará la lógica y el tipo de lógica que vas a usar entre sus limites.
Por ejemplo para mostrar 3 productos recomendados automáticamente necesitas las siguientes tags:
//Tag de inicio
<!-- {% set rproducts = recommended_products()[0:3] %} {% if rproducts|length %} {% set p1, p2, p3 = rproducts.0, rproducts.1, rproducts.2 %} -->
//Tag de fin
<!-- {% endif %} -->
Entre estas tags debe estar incluida la estructura de HTML donde vas a mostrar los 3 productos recomendados, como ejemplo voy usar una simple tabla en HTML.
<!-- {% set rproducts = recommended_products()[0:3] %} {% if rproducts|length %} {% set p1, p2, p3 = rproducts.0, rproducts.1, rproducts.2 %} -->
<table>
<thead>
<tr>
<th>Imagen de producto 1</th>
<th>Imagen de producto 2</th>
<th>Imagen de producto 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Nombre de producto 1 - Precio de producto 1</td>
<td>Nombre de producto 2 - Precio de producto 2</td>
<td>Nombre de producto 3 - Precio de producto 3</td>
</tr>
</tbody>
</table>
<!-- {% endif %} -->
Los campos dinámicos son variables que contienen datos de los productos, dependiendo del tipo de fila dinámica existen algunos campos que solo pueden ser utilizando dentro de ciertas filas, de resto la mayoría son compatibles entre ellas.
En este caso nos interesa mostrar en la tabla el nombre, el precio y la imagen de cada producto.
Los campos dinámicos que necesitamos son:
{{p.name}}
{{p.price}}
{{p.image_url}}
Ahora los debemos reemplazar en las etiquetas donde queramos que se muestren estos datos y es importante que coloquemos el número de producto a cada campo, en este caso hemos usado un recomendador con 3 productos, por lo que cada producto está identificado con p1, p2 y p3 respectivamente.
<!-- {% set rproducts = recommended_products()[0:3] %} {% if rproducts|length %} {% set p1, p2, p3 = rproducts.0, rproducts.1, rproducts.2 %} -->
<table>
<thead>
<tr>
<th><img height="400" src="{{p1.image_url}}" width="400" /></th>
<th><img height="400" src="{{p2.image_url}}" width="400" /></th>
<th><img height="400" src="{{p3.image_url}}" width="400" /></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>{{p1.name}}</strong><br />
<span>{{p1.price}}</span></td>
<td><strong>{{p2.name}}</strong><br />
<span>${{p2.price}}</span></td>
<td><strong>{{p3.name}}</strong><br />
<span>${{p3.price}}</span></td>
</tr>
</tbody>
</table>
<!-- {% endif %} -->
En el caso de las imágenes el campo dinámico {{p.image_url}} debe ser insertado dentro del parámetro "src" de la etiqueta <img>. Lo mismo debemos respetar cuando queremos insertar la URL de un producto en una etiqueta <a>, con la excepción de que se inserta en el parámetro "href". El el resto de los campos dinámicos puede ser insertado en cualquier etiqueta que soporte texto.
Ahora si importamos este código en una campaña de WoowUp podemos probar que la lógica se encarga de colocar los datos de los productos en los espacios que determinamos en la tabla:
Filas dinámicas con iteradores
En el ejemplo que usamos antes ya sabíamos con antelación cuántos productos iban a mostrarse y teníamos una estructura acorde a este número, pero existen filas donde no es posible saber cuantos productos se van a mostrar porque dependen del cliente. Por ejemplo, en las plantillas de carrito abandonado cada cliente puede tener diferentes cantidades de productos en él.
Para estos escenarios existen las filas con iteradores. Un iterador es una estructura de código que se encarga de acceder a la información de cada producto de un listado, es decir cada uno de los productos abandonados en un carrito de un cliente. El iterador también tiene otra función, va a repetir la estructura de HTML tantas veces como productos existan en el carrito del cliente.
Veámoslo nuevamente con un ejemplo de código, este es una estructura de tabla que solo tiene una fila y 2 columnas:
<table>
<tbody>
<tr>
<td>Imagen del producto</td>
<td>Nombre de producto 2 - Precio de producto 2</td>
</tr>
</tbody>
</table>
Primero insertamos las tags de inicio y de fin:
<!--{% for p in customer.abandoned_cart.products() %} -->
<table>
<tbody>
<tr>
<td>Imagen del producto</td>
<td>Nombre de producto - Precio de producto</td>
</tr>
</tbody>
</table>
<!-- {% endfor %} -->
Ahora colocamos los campos dinámicos con la imagen del producto, el nombre y el precio:
<!--{% for p in customer.abandoned_cart.products() %} -->
<table>
<tbody>
<tr>
<td><img height="200" src="{{p.image_url}}" width="200" /></td>
<td><strong>{{p.name}}</strong><span>${{p.raw_unit_price}}</span></td>
</tr>
</tbody>
</table>
<!-- {% endfor %} -->
Al probar el código vemos que el la estructura se repitió 2 veces porque era la cantidad de items incluidos en el carrito abandonado del cliente y para cada uno de ellos se colocó automáticamente la información del producto:
Si deseas conocer más sobre los recomendadores de productos en WoowUp puedes continuar leyendo este articulo que los describe con detalle.