Выбор изображения по варианту


◄ Назад к списку

Выбор изображения по варианту

Чтобы переключать изображения вариантов нужно привязаться к событию смены модификации.

Модификация содержит id привязанного изображения (image_id).

По image_id нужно искать картинку варианта в массиве изображений товара.

Далее искать изображение в галерее товара и переключаться на него

Но в common.v2 в событии update_variant:insales:product возвращается объект со свойством first_image, в котором уже определено изображение варианта!

 

js
        
          

// для swiper
EventBus.subscribe('update_variant:insales:product', function (data) {
​​​​​​​  if (variant.action.quantityState.change) {
    return;
  }
  // определяем что смена варианта произошла у основного товара
  var $productForm = $('#product-order[data-product-id="'+data.product_id+'"]');
  // если нужна смена изображений для вариантов без фото нужно убрать проверку на data.image_id
  if ($productForm.length && data.image_id) {
    var sliderClass = '.js-product-gallery'; // селектор слайдера
    var slideClass = '.swiper-slide';
    var imageSize = 'original_url'; // Важно указать правильный размер original_url, large_url, medium_url
    var imagePath = slideClass + ' [src="'+data.first_image[imageSize]+'"]';
    var index = $(imagePath).parents(slideClass + ':first').index();
    if ($(sliderClass)[0].swiper) {
      $(sliderClass)[0].swiper.slideTo(index);
    }
  }
});

// для owl
EventBus.subscribe('update_variant:insales:product', function (data) {
  if (variant.action.quantityState.change) {
    return;
  }
  // определяем что смена варианта произошла у основного товара
  var $productForm = $('#product-order[data-product-id="'+data.product_id+'"]');
  // если нужна смена изображений для вариантов без фото нужно убрать проверку на data.image_id
  if ($productForm.length && data.image_id) {
    var sliderClass = '.js-slider-product';
    var slideClass = '.owl-item';
    var imageSize = 'original_url'; // original_url, large_url, medium_url
    var imagePath = slideClass + ' [src="'+data.first_image[imageSize]+'"]';
    var index = $(imagePath).parents(slideClass + ':first').index();
    $(sliderClass).trigger('to.owl.carousel', index);
  }
});

Полезные видео