Productos relacionados

En este tutorial, vamos a agregar los productos relacionados que se muestran al pie de la página de detalles del producto.

Los productos relacionados se muestran usando un slider que en mobile muestra una imágen por slide y en desktop 4.

Esta funcionalidad relaciona a los productos que se encuentran en la misma categoría.

HTML

1. Vamos a crear un nuevo snipplet con el nombre product-related.tpl dentro de la carpeta snipplets/product . El código para este es el siguiente:

{# /*============================================================================
  #Product Related Grid
==============================================================================*/

#Properties

#Related Slider

#}

{% set related_products_ids = product.metafields.related_products.related_products_ids %}
{% if related_products_ids %}
    {% set related_products = related_products_ids | get_products %}
    {% set show = (related_products | length > 0) %}
{% endif %}
{% if not show %}
    {% set related_products = category.products | shuffle | take(8) %}
    {% set show = (related_products | length > 1) %}
{% endif %}


<section id="related-products" class="section-products-related">
    {% if show %}
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <h3>{{ "Productos Relacionados" | translate }}</h3>
                </div>
                <div class="col-12">
                    <div class="js-swiper-related swiper-container">
                        <div class="swiper-wrapper">
                            {% for related in related_products %}
                                {% if product.id != related.id %}
                                    {% include 'snipplets/grid/item.tpl' with {'product': related, 'slide_item': true} %}
                                {% endif %}
                            {% endfor %}
                        </div>
                        {% if related_products | length < 4 %}
                        <div class="d-sm-none">
                        {% endif %}
                            <div class="js-swiper-related-pagination swiper-pagination"></div>
                            <div class="js-swiper-related-prev swiper-button-prev">{% include "snipplets/svg/chevron-left.tpl" with {svg_custom_class: "icon-inline icon-w-8 icon-2x svg-icon-text"} %}</div>
                            <div class="js-swiper-related-next swiper-button-next">{% include "snipplets/svg/chevron-right.tpl" with {svg_custom_class: "icon-inline icon-w-8 icon-2x svg-icon-text"} %}</div>
                        {% if related_products | length < 4 %}
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
</section>

Podemos observar que estamos incluyendo el snipplet item.tpl de la carpeta snipplets/grid (basado en el theme Base), puede que en tu caso necesites incluir el snipplet single_product.tpl. Lo importante es usar el mismo snipplet que usamos para el item en los listados de productos, como los que están en los templates category.tpl o search.tpl.

2. Dentro de item.tpl o single_product.tpl vamos a agregar en el div donde tenemos las clases para las columnas de Bootstrap el condicional {% if slide_item %}swiper-slide{% endif %}. Debajo está un ejemplo de como aplicarlo:

<div class="{% if slide_item %}swiper-slide{% else %}col-12 col-sm-4{% endif %} item item-product">
... 
</div> 

3. Incluimos el snipplet de productos relacionados en el template product.tpl debajo de todo, de la siguiente forma:

{% include 'snipplets/product/product-related.tpl' %}

4. Por último para la parte de HTML, necesitamos agregar una carpeta SVG dentro de la carpeta snipplets. Acá vamos sumar los SVGs que usamos para los iconos en el carrito.

chevron-left.tpl

<svg class="{{ svg_custom_class }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path d="M231.293 473.899l19.799-19.799c4.686-4.686 4.686-12.284 0-16.971L70.393 256 251.092 74.87c4.686-4.686 4.686-12.284 0-16.971L231.293 38.1c-4.686-4.686-12.284-4.686-16.971 0L4.908 247.515c-4.686 4.686-4.686 12.284 0 16.971L214.322 473.9c4.687 4.686 12.285 4.686 16.971-.001z"/></svg>

chevron-right.tpl

<svg class="{{ svg_custom_class }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path d="M24.707 38.101L4.908 57.899c-4.686 4.686-4.686 12.284 0 16.971L185.607 256 4.908 437.13c-4.686 4.686-4.686 12.284 0 16.971L24.707 473.9c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L41.678 38.101c-4.687-4.687-12.285-4.687-16.971 0z"/></svg>

CSS

Requisito:

Tener agregados en tu diseño las clases helpers. Podés seguir este este pequeño tutorial para hacerlo (simplemente es copiar y pegar algunas clases, no toma más de 1 minuto).

Como en este ejemplo usamos un slider con Swiper, necesitamos agregar el plugin. Para ver cómo hacerlo podés leer este corto artículo y luego continuar con este tutorial.

Si preferís mostrar los productos en una grilla clásica sin slider o ya tenés Swiper incluido, podés evitar este paso.

JS

Necesitamos aplicar las funciones en el archivo store.js.tpl (o donde tengas tus funciones de JS) con el siguiente código:

{% if template == 'product' %}

    {# /* // Product Related */ #}

        {% set related_products_ids = product.metafields.related_products.related_products_ids %}
        {% if related_products_ids %}
            {% set related_products = related_products_ids | get_products %}
            {% set show = (related_products | length > 0) %}
        {% endif %}
        {% if not show %}
            {% set related_products = category.products | shuffle | take(8) %}
            {% set show = (related_products | length > 1) %}
        {% endif %}

        {% set columns = settings.grid_columns %}
        createSwiper('.js-swiper-related', {
            lazy: true,
            {% if related_products | length > 4 %}
            loop: true,
            {% endif %}
            spaceBetween: 30,
            slidesPerView: 2,
            pagination: {
                el: '.js-swiper-related-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.js-swiper-related-next',
                prevEl: '.js-swiper-related-prev',
            },
            breakpoints: {
                767: {
                    slidesPerView: 4,
                }
            }
        });

{% endif %}

Listo, ya tenés en tu diseño la funcionalidad aplicada ¡Excelente!