Mostrando productos relacionados

El visitante de tu página está revisando el detalle de un producto que le interesó.

Sería buena idea mostrarle además productos relacionados (no confundir con similares) al que está revisando para así incentivar la permanencia en la tienda y eventualmente generar una o varias ventas.

¿Cómo hacer esto?. A continuación te contamos.

Qué es un producto relacionado

Para Bootic un producto relacionado tienen etiquetas en común pero además son de distinto Tipo de Producto. Veamos un ejemplo:

  • Producto 1: Set Contenedores
  • Marca: Joseph Joseph
  • Tipo de producto: Contenedor
  • Etiquetas: hermético, portatil, utensilio

  • Producto 2: Good grips
  • Marca: Oxo
  • Tipo de producto: Mandolina
  • Etiquetas: cortar, ergonomico, utensilio

Ambos productos son de tipos de producto diferentes, pero tienen una etiqueta en común: «utensilio», en consecuencia son Producto relacionados.

Una o más:

Los productos relacionados pueden compartir una o más etiquetas.

Cómo muestro productos relacionados

Esta es una funcionalidad que ya viene programada en todas nuestras plantillas, pero si estás desarrollando una nueva plantilla propia tuya desde cero debes agregar lo siguiente a tu código product.html:

<!-- product.html -->
{% if product.has_related_products %}
<div id="related-products">
  <h2>{{ "titles.related_products" | t }}</h2>
  <ul class="products clearfix">
  {% loop product.related_products in 'product_item' limit:3 %}
  </ul>
</div><!-- /related-products -->
{% endif %}

Orden de aparición

El orden de aparición de los productos relacionados es de forma descendente por la cantidad de etiquetas que tengan en común.

Ejemplo

A continuación te mostramos una página detalle de un producto, con sus similares y relacionados.

Detalle de producto - con
    relacionados y similares
Figura 1: Detalle de un producto. Contiene además Relacionados y Similares

Sugiere productos relacionados en el carro de compra

El siguiente trozo de código sugerirá productos relacionados justo después que el comprador agrega un producto al carro (Figura 2). Un excelente momento para incentivar otra compra. Esta es una funcionalidad que ya viene programada en todas nuestras plantillas, pero si estás desarrollando una nueva plantilla propia tuya desde cero debes agregar lo siguiente a tu código.

<!-- cart.html -->
{% if related_products_to_just_added %}
<section class="product-list">
  <h2>{{ 'orders.messages.you_might_be_interested' | t }}</h2>
  <ul class="products row">
    {% loop related_products_to_just_added in 'product_item' limit:3 %}
  </ul>
</section>
{% endif %}
Figura 2: Productos relacionados en el Carro de compra

¿Sigues con dudas?

No hay problema. Estamos acá para ayudarte (o en el botoncito de abajo a la derecha).

Escríbenos