Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Как изменять картинку по клику на миниатюру в форме ZeroBlock в Tilda
Experience New Ride

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

1
Создали ZeroBlock
2
Добавили в него Shape с классом product_img
Вставили в него первую картинку
3
Добавили Form c классом form__main и с полями:
+ Question with image answers с именем model
Задали цены продуктам
+ Question with answers с именем basket
Задали цену
+ Calculations field с формулой model+basket
И именем total
Добавляем в корзину Add result to Cart
Добавили картинку для товара
Также прописали options in the cart
model=Model
basket=Basket
4
Добавили код в блок Другое - Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Выводим отображение миниатюры в большом виде, отправляем продукт в корзину с нужной картинкой
Фрагмент видео
Библиотека для примера
<script>
(function() {
  const CONFIG = {
    form: 'form__main',
    imageInput: 'model',
    targetImage: 'product_img',
    calcName: 'total',
    bgImg: 't-bgimg',
    hiddenImg: 't-calc__hidden__prod_img',
    parent: 't-rec'
    
  };

  window.addEventListener('load', function() {

    const forms = document.querySelectorAll(`.${CONFIG.form}`);
    forms.forEach(function(form) {
      const modelInputs = form.querySelectorAll(`input[name="${CONFIG.imageInput}"]`);

      modelInputs.forEach(function(input) {
        input.addEventListener('change', function(e) {
          if (input._isDispatching) return;

          if (this.checked) {
            const bgImg = this.nextElementSibling;
            if (bgImg && bgImg.classList.contains(CONFIG.bgImg)) {
              const em = bgImg.getAttribute('data-original');
              if (!em) return;

              const hiddenWrapper = form.querySelector(`.t-input-group_fr[data-field-name="${CONFIG.calcName}"]`);
              if (hiddenWrapper) {
                const hiddenInput = hiddenWrapper.querySelector(`input.${CONFIG.hiddenImg}`);
                if (hiddenInput) hiddenInput.value = em;
              }

              input._isDispatching = true;
              input.dispatchEvent(new Event('change', { bubbles: true }));
              input._isDispatching = false;

              const block = form.closest(`.${CONFIG.parent}`);
              if (block) {
                const imgElem = block.querySelector(`div.${CONFIG.targetImage} .tn-atom`);
                if (imgElem) {
                  imgElem.style.backgroundImage = 'url(' + em + ')';
                  imgElem.setAttribute('data-original', em);
                  imgElem.setAttribute('data-img-zoom-url', em);
                }
              }
            }
          }
        });
      });
    });
  });
})();
</script>
Made on
Tilda