hello@monomo.com
Contacts
Чемодан туристический
9800
р.
Цвет
Размер
Купить чемодан
Чемодан изготовлен из жесткого, ударопрочного и долговечного материала, который увеличивает срок эксплуатации и делает ее комфортной. Одежда имеет тот же вид, в котором попадает в чемодан, а хрупкие вещи остаются невредимыми.

Меняем фото товара при выборе цвета или размера в блоке ST200 в Tilda

Как создали данный пример:
1. Создали блок ST200 из категории Магазин
2. Наполнили его контентов (фото приведены ниже)
3. Добавили фото чемоданов:
фиолетовый -S
фиолетовый -M
красный - S
красный - M
4. Добавили код на страницу в блок Другое►Т123
в коде прописали ссылки на фото в том же порядке
https://clck.ru/EAVuU
https://clck.ru/EAVut
https://clck.ru/EAVv5
https://clck.ru/EAVvR



<script>
//Скрываем миниатюры
$(".t744 .t-slds__thumbsbullet-wrapper").hide();
//Добавляем адреса фотографий      
    var piclink = [ 0 , 
                   "https://clck.ru/EAVuU" ,
                   "https://clck.ru/EAVut" ,
                   "https://clck.ru/EAVv5" ,
                   "https://clck.ru/EAVvR"
                  ];
//Объявляем переменный цвета , размера и позиции слайдера
var colorplace = 0;
var sizeplace  = 0;
var slideposition = 0;
//Функция зависимости списков
function changeslide(){
   colorplace = $(".t744 .t-product__option-select:eq(0)")[0].selectedIndex;   
   sizeplace = $(".t744 .t-product__option-select:eq(1)")[0].selectedIndex;
   if (colorplace==0 && sizeplace==0){slideposition = 1};
   if (colorplace==0 && sizeplace==1){slideposition = 2};
   if (colorplace==1 && sizeplace==0){slideposition = 3};
   if (colorplace==1 && sizeplace==1){slideposition = 4};
   
//Включаем нужный слайд          
      $('.t744 [data-slide-bullet-for="'+slideposition+'"]')[0].click();     
//Прописываем первое фото
      $('.t744 [data-slide-index="1"] .t-zoomable').attr("data-img-zoom-url",""+piclink[slideposition]+"");
      $('.t744 [data-slide-index="1"] .t-slds__bgimg').attr("data-original",""+piclink[slideposition]+"");
      $('.t744 [data-slide-index="1"] .t-slds__bgimg').css('backgroundImage', 'url('+piclink[slideposition]+')'); 
};
//Когда изменяют цвет, то меняем фотографию
   $('.t744 .t-product__option-select:eq(0)').change(function() { changeslide();});    
//Когда изменяют размер, то меняем фотографию
   $('.t744 .t-product__option-select:eq(1)').change(function() { changeslide();});    
</script>


<!--КОД ДЛЯ ИКОНОК ЦВЕТА -->
<div class="coloricon">
        <span class="colorviolet"></span>
        <span class="colorred"></span>
</div>

<style>
.coloricon {
    display: block;
    height: 20px;
    margin-top: 15px;
    margin-bottom: 15px;
    cursor:pointer;
} 
.coloricon span {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 5px;
    border-radius: 10px;
}
span.colorviolet {
    background: #5d479b;
}
span.colorred {
    background: #a53e32;
}
/*Стиль для иконки*/
   .hovercolor{
   transition: .3s linear;    
   } 
   .activecolor{
    box-shadow: 0px 0px 0px 4px #fc0 !important;
}
   .hovercolor:hover{
    box-shadow: 0px 0px 2px 4px #b1b1b1;   
   }
   
</style>

<script>
$( document ).ready(function() {
   //Скрыли блок со списком цветов
   $('.t-product__option-variants:eq(0)').hide();
   

   //Добавили блок с иконками
   $('.coloricon').appendTo('.t-product__option:eq(0)');
   
   //Активировали первую иконку
   $('.coloricon span:eq(0)').addClass('activecolor');
   
   //При клике на цвет
$( ".coloricon span:eq(0)" ).click(function() {
     $('.coloricon span').removeClass('activecolor');
     $(this).addClass('activecolor');
     $(".t744 .t-product__option-select:eq(0) :nth-child(1)").prop('selected', true).change();
 
});

  //При клике на цвет
$( ".coloricon span:eq(1)" ).click(function() {
     $('.coloricon span').removeClass('activecolor');
     $(this).addClass('activecolor');
      $(".t744 .t-product__option-select:eq(0) :nth-child(2)").prop('selected', true).change();
  
});
});    
   
</script>
Made on
Tilda