Чтобы переключать изображения вариантов нужно привязаться к событию смены модификации.
Модификация содержит id привязанного изображения (image_id).
По image_id нужно искать картинку варианта в массиве изображений товара.
Далее искать изображение в галерее товара и переключаться на него
Но в common.v2 в событии update_variant:insales:product возвращается объект со свойством first_image, в котором уже определено изображение варианта!
// для 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);
}
});