Как изменять картинку по клику на миниатюру в форме ZeroBlock в Tilda
Experience New Ride

Как изменять картинку по клику на миниатюру в форме ZeroBlock в Tilda

1
Создали ZeroBlock
2
Добавили в него Shape с классом product_img
Вставили в него первую картинку
3
Добавили Form c классом form__main и с полями:
+ Question with image answers с именем productimage
Задали цены продуктам
+ Question with answers с именем basket
Задали цену
+ Calculations field с формулой productimage+basket
Добавляем в корзину Add result to Cart
Result title on Cart - Model productimage basket
4
Добавили код в блок Другое - Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Выводим отображение миниатюры в большом виде, отправляем продукт в корзину с нужной картинкой.
Длительность видео: 25 минут
Фрагмент видео
Библиотека для примера

<script>
$( document ).ready(function() {
let productImg = '.product_img';
let formClass = '.form__main';
let optionSize = 'input[name="productimage"]';
function changePic(em){ $('.product_img .tn-atom').css('background-image', 'url('+em+')').attr({'data-original': em, 'data-img-zoom-url': em})};
$(formClass).on('change', 'input' , function(){
    let img = $(formClass).find(optionSize+':checked').next('.t-bgimg').attr('data-original');changePic(img);
    let btnForm = $(formClass).find('button');
    let btnUrl = $(btnForm).attr('href');
    if(btnUrl){setTimeout(function(){$(btnForm).attr('href', btnUrl.split(':::image=')[0]+':::image='+img)}, 100)};
});
$( window ).resize(function() {
   setTimeout(function(){ let img = $(optionSize+':checked').next('.t-bgimg').attr('data-original');changePic(img);}, 1000);});
});    
</script>
Made on
Tilda