Imagen por variante

Esta funcionalidad permite relacionar una imagen dependiendo de la variante de producto.

Ejemplo: tengo una remera con una variante en azul y rojo, y quiero mostrar las fotos de ambos modelos. 

Este tutorial se basa en el uso del plugin Swiper por lo que recomendamos tenerlo implementado para la imagen del detalle de producto antes de avanzar. En este link se encuentra el tutorial que incluye la implementación de Swiper para la imagen del producto y también el cambio de imagen por variante.

1. En store.js.tpl registrar una función que se ejecute cada vez que un cambio en una variante sea detectado, utilizando un código Javascript como el siguiente:

LS.registerOnChangeVariant(function(variant){
    var liImage = jQueryNuvem('.js-swiper-product').find("[data-image='"+variant.image+"']");
    var selectedPosition = liImage.data('imagePosition');
    var slideToGo = parseInt(selectedPosition);
    productSwiper.slideTo(slideToGo);
    jQueryNuvem(".js-product-slide-img").removeClass("js-active-variant");
    liImage.find(".js-product-slide-img").addClass("js-active-variant");
});

2. Luego, en templates/product.tpl agregar lo siguiente para conectarlo con la imagen que se encuentra seleccionada. Especialmente las clases "js-product-slide-img" , "js-swiper-product" y el atributo data-image="{{image.id}}"

{% if product.images_count > 0 %}
    <div class="js-swiper-product nube-slider-product swiper-container" style="visibility:hidden; height:0;">
        {% include 'snipplets/labels.tpl' with {'product_detail': true} %}
        <div class="swiper-wrapper">
            {% for image in product.images %}
             <div class="swiper-slide js-product-slide slider-slide" data-image="{{image.id}}" data-image-position="{{loop.index0}}">
                 <a href="{{ image | product_image_url('huge') }}" data-fancybox="product-gallery" class="d-block p-relative" style="padding-bottom: {{ image.dimensions['height'] / image.dimensions['width'] * 100}}%;">
                     <img src="{{ 'images/empty-placeholder.png' | static_url }}" data-srcset='{{  image | product_image_url('large') }} 480w, {{  image | product_image_url('huge') }} 640w' data-sizes="auto" class="js-product-slide-img product-slider-image img-absolute img-absolute-centered lazyautosizes lazyload" {% if image.alt %}alt="{{image.alt}}"{% endif %}/>
                     <img src="{{ image | product_image_url('tiny') }}" class="js-product-slide-img product-slider-image img-absolute img-absolute-centered blur-up" {% if image.alt %}alt="{{image.alt}}"{% endif %} />
                </a>
             </div>
            {% endfor %}
            {% include 'snipplets/product/product-video.tpl' %}
        </div>
        <div class="js-swiper-product-pagination swiper-pagination swiper-pagination-white"></div>
        {% if has_multiple_slides %}
            <div class="js-swiper-product-prev swiper-button-prev d-none d-md-block">{% 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-product-next swiper-button-next d-none d-md-block">{% include "snipplets/svg/chevron-right.tpl" with {svg_custom_class: "icon-inline icon-w-8 icon-2x svg-icon-text"} %}</div>
        {% endif %}
    </div>
{% endif %}