Черепица гибкая Docke Europa Karat
Код: 501706
209
р.
Цвет
Длина, мм
Ширина, мм
Предназначена для покрытия кровли разных степеней сложности в коттеджном и малоэтажном строительстве, как при реконструкции, так и на вновь возводимых зданиях и сооружениях различного назначения в качестве основного кровельного покрытия. Используется на крышах любой конфигурации и сложности. Требуемый уклон ската крыши от 12 до 90 градусов.
Черепица битумная – кровельное изделие в виде плоского листа, изготовленного из пропитанного окисленным битумом стеклохолста с фигурными вырезами по одному краю листа. Верхняя поверхность черепицы покрыта прикатанным к битуму окрашенным базальтовым гранулятом. Нижняя поверхность черепицы покрыта посыпкой из мелкозернистого песка, а также транспортировочными пленками.

Изменяем фото в карточке товара и создаём зависимые параметры в Tilda

Как выполнили данный пример:

1. Создали блок ST200 и заполнили его
2. Добавили 3 параметра и прописали цены
3. Добавили код на страницу

1-ый код смены фотографий
2-ой код изменения цены

Код вставляется в блок Другое►Т123

1

<script>
//Когда изменяют цвет, то меняем фотографию
var blockID = '#rec59296896'
   $(blockID+' .t-product__option-select:eq(0)').change(function() {    
//Добавляем адреса фотографий       
    var piclink = [ 0 , 
       "https://clck.ru/DkVpj" ,
       "https://clck.ru/DkW2Y" ,
       "https://clck.ru/DkWbp" ,
       "https://clck.ru/DkWcf"
                  ];
// Получаем номер элемента в списке       
      var placesl = $(this)[0].selectedIndex+1;      
      //Если выбрали 0 пункт, то показываем рисунок №0 и т.д.
//Включаем первый слайд          
      $(blockID+' div[data-slide-bullet-for="'+placesl+'"]')[0].click();     
//Прописываем первое фото
      $(blockID+' div[data-slide-index="1"] .t-zoomable').attr("data-img-zoom-url",""+piclink[placesl]+"");
      $(blockID+' div[data-slide-index="1"] .t-slds__bgimg').attr("data-original",""+piclink[placesl]+"");
      $(blockID+' div[data-slide-index="1"] .t-slds__bgimg').css('backgroundImage', 'url('+piclink[placesl]+')');
   });
//При клике на миниатюры   
$(blockID+ " .t-slds__thumbsbullet" ).click(function() {
  // Получаем номер миниатюры       
      var placebul = $(this).attr('data-slide-bullet-for');     
      $(blockID+" .t744 .t-product__option-select:eq(0) :nth-child("+placebul+")").prop('selected', true).change();
});   
</script>

2

<script>
//Когда изменяют параметр длины
   $('.t-product__option-select:eq(1)').change(function() {    
// Получаем номер элемента в списке       
      var place = $(this)[0].selectedIndex;      
      //Если выбрали 0 пункт,  то проставляем цены для первого и т.д.
    if (place==0){ 
     //Меняем набор цен для ширины, в зависимости от длины      
$(".t744 .t-product__option-select:eq(2) option:eq(0)").attr("data-product-variant-price","650");
$(".t744 .t-product__option-select:eq(2) option:eq(1)").attr("data-product-variant-price","850");
$(".t744 .t-product__option-select:eq(2) option:eq(2)").attr("data-product-variant-price","1100");
    };
    if (place==1){ 
$(".t744 .t-product__option-select:eq(2) option:eq(0)").attr("data-product-variant-price","1300");
$(".t744 .t-product__option-select:eq(2) option:eq(1)").attr("data-product-variant-price","1600");
$(".t744 .t-product__option-select:eq(2) option:eq(2)").attr("data-product-variant-price","2050");         
    };
    if (place==2){ 
$(".t744 .t-product__option-select:eq(2) option:eq(0)").attr("data-product-variant-price","1780");
$(".t744 .t-product__option-select:eq(2) option:eq(1)").attr("data-product-variant-price","2350");
$(".t744 .t-product__option-select:eq(2) option:eq(2)").attr("data-product-variant-price","2680");
    };
});    
</script>
Made on
Tilda