Привязка фотографий к фильтру «размер» в ST205
Модификатор, который создает зависимость фотографий от размера в блоке карточки товара ST205
jQuery
Код скопирован!
Скопировать код
Для корректной работы блоков подключите библиотеку jQuery:
Инструкция с подключением кода
Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
  1. Копируем в него код
Шаг 2
Настраиваем код
  1. На строках 58, 62, 66, 70 в 'кавычках' пишем названия размеров, как они указаны в настройках вашего каталога
  2. Заменяем размеры в формуле
  3. На 20-24 строках также заменяем название размеров и указываем количество фотографий, которые должны отображаться для каждого размера
Шаг 3
Для блока ST205
  1. Задаем класс uc-single-prod
Шаг 1
Добавляем блок T123 на все страницы с товаром
Шаблон страницы
Код скопирован!
67849823
Нажми, чтобы скопировать номер
<style>
/*Делаем фильтр для фотографий из табов с размером*/
.t-slds__arrow_container {
display: none
}
.sky{
position: absolute!important;
left:-5000px;
}
.js-product .t-product__option-variants_buttons .t-product__option-item_simple {
border-radius: 10px
}
</style>
<script>
$(function(){
var count = 0;

// Количество миниатюр для каждого размера
var XS = 5;
var S = 4;
var M = 6;
var L = 4;

// Присваиваем data-filter каждому слайду
var prodTimer = setInterval(function(){
var prodSlides = $('.t-slds .t-slds__thumbsbullet');
if(prodSlides.length > 1) {
clearInterval(prodTimer);
console.log('Gal init ready!');
prodSlides.each(function(){
$(this).attr('data-filter', count);
count++;
});
}
// Инициализация - показываем миниатюры для первого значения ('XS')
showThumbnails(0, XS);
}, 500);

// Функция для показа миниатюр на основе выбранного диапазона
function showThumbnails(start, end) {
var prodSlides = $('.t-slds .t-slds__thumbsbullet');
prodSlides.addClass('sky'); // Скрываем все миниатюры
prodSlides.each(function(){
var filterValue = parseInt($(this).attr('data-filter'), 10);
if(filterValue >= start && filterValue < end) {
$(this).removeClass('sky'); // Показываем только нужные
}
});
}

// Обработка смены радиокнопок для выбора размера
$(document).on('change', '.uc-single-prod [name="Размер"]', function(){
var val = $('.uc-single-prod [name="Размер"]:checked').val();
console.log(val);

switch (val) {
case 'XS':
showThumbnails(0, XS);
$('.uc-single-prod .t-slds .t-slds__thumbsbullet').not('.sky').first().click()
break;
case 'S':
showThumbnails(XS, XS + S);
$('.uc-single-prod .t-slds .t-slds__thumbsbullet').not('.sky').first().click()
break;
case 'M':
showThumbnails(XS + S, XS + S + M);
$('.uc-single-prod .t-slds .t-slds__thumbsbullet').not('.sky').first().click()
break;
case 'L':
showThumbnails(XS + S + M, XS + S + M + L);
$('.uc-single-prod .t-slds .t-slds__thumbsbullet').not('.sky').first().click()
break;
default:
$('.uc-single-prod .t-slds .t-slds__thumbsbullet').show(); // Показываем все, если выбран неизвестный размер на всякий случай
}
});

});

</script>
Текст скопирован в буфер обмена!
Текст скопирован в буфер обмена!
Вам также может быть интересно:
Pro подписка
Pro подписка
Модификации
Модификации
Модификации
Pro подписка
Подпишитесь на наши обновления в телеграм