Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
Как изменять картинку по клику на миниатюру в форме 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.addEventListener("DOMContentLoaded", function() {

const productImg = '.product_img';
const formClass = '.form__main';
const optionSize = 'input[name="productimage"]';

function changePic(em){ 
    const imgElem = document.querySelector('.product_img .tn-atom');
    imgElem.style.backgroundImage = 'url('+em+')';
    imgElem.setAttribute("data-original", em);
    imgElem.setAttribute("data-img-zoom-url", em);
};

let formInput = document.querySelectorAll(formClass+' input');
formInput.forEach(function (el, index) {
    el.addEventListener('change',function(e) {
        let form = document.querySelector(formClass);
        
        let imgBgimg = form.querySelector(optionSize+':checked').nextElementSibling;

        let img = imgBgimg.getAttribute("data-original");
        
        changePic(img);
        
        let btnForm = form.querySelector('button');
        let btnUrl = btnForm.getAttribute('href');
        
        if(btnUrl){
            setTimeout(function(){
                btnForm.setAttribute('href', btnUrl.split(':::image=')[0]+':::image='+img);
            }, 100)
        };

    });    
});

});  
</script>
Made on
Tilda