Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Как сделать конструктор продукта в ZeroBlock в Tilda
РОТАНГ
Конструктор кресла

Как сделать конструктор продукта в ZeroBlock в Tilda

1
Создали ZeroBlock
2
Добавили в него объекты и задали им ссылки:
3 shape - #product
3 button - #rotang
3 button - #pillow
3
Создали 27 блоков ST200
4
Добавили код на страницу в блок Другое - Т123
В коде заменили ID блоков ST200
//Создаём список блоков

Блоки расположены по схеме
1-ый 000
2-ой 001
....
18-ый 222
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём конструктор товара в Tilda в ZeroBlock.
Выводим блок по выбранным параметрам товара.
Длительность видео: 24 мин
Фрагмент видео
Библиотека для примера
<style>
/*Время и вид анимации для вкладок*/
  .baseCl{
      transition:all 0.4s ease-in-out;
  }
/*Стиль веделенной вкладки*/  
  .baseClactive{
      box-shadow: 0 0 0px 1px #000;
  } 
/*Стиль при наведении на вкладку*/  
   .baseCl:hover {
    box-shadow: inset 0 0 10px 0px #dedede;
}
  .t-slds__bgimg.t-bgimg.js-product-img {
    border-radius: 40px;
}
</style> 

<script>
   $( document ).ready(function() {
   //ПРисваиваем класс вкладкам   
   $('[href="#product"]').addClass('baseCl model');
   $('[href="#rotang"]').addClass('baseCl rotang');
   $('[href="#pillow"]').addClass('baseCl pillow');
   //Делаем выделенные первые вкладки  
   $('.model').first().addClass('baseClactive');
   $('.rotang').first().addClass('baseClactive');
   $('.pillow').first().addClass('baseClactive');
   var modelN=0, rotangN=0, pillowN=0; 
   
   //Создаём список блоков
   var blkMass = {
       
'000':'#rec166120665',
'001':'#rec166120666',
'002':'#rec166120667',
'010':'#rec166120668',
'011':'#rec166120669',
'012':'#rec166120670',
'020':'#rec166120671',
'021':'#rec166120672',
'022':'#rec166120673',
'100':'#rec166120674',
'101':'#rec166120675',
'102':'#rec166120676',
'110':'#rec166120677',
'111':'#rec166120678',
'112':'#rec166120679',
'120':'#rec166120680',
'121':'#rec166120681',
'122':'#rec166120682',
'200':'#rec166120683',
'201':'#rec166120684',
'202':'#rec166120685',
'210':'#rec166120686',
'211':'#rec166120687',
'212':'#rec166120688',
'220':'#rec166120689',
'221':'#rec166120690',
'222':'#rec166120691'

                   
                 };
                 
   //Добавляем классы ко всем блокам продуктов
   $.each(blkMass, function( key, value ) {$(blkMass[key]).addClass('blkProduct');});
   $('.blkProduct').not('.blkProduct:eq(0)').hide();
   function findProduct(){
     var actionBlk = String(modelN)+String(rotangN)+String(pillowN);$('.blkProduct').hide();
     $(blkMass[actionBlk]).show(); window.dispatchEvent(new Event('resize'));  };
     
   
   //При клике на модель
    $('.model').click(function(e) {e.preventDefault();
    $('.model').removeClass('baseClactive');$(this).addClass('baseClactive'); 
    modelN = $(".model").index(this);findProduct();    });
    //При клике на ротанг
    $('.rotang').click(function(e) {e.preventDefault();
    $('.rotang').removeClass('baseClactive');$(this).addClass('baseClactive');  
    rotangN = $(".rotang").index(this);findProduct();    });
    //При клике на подушку
    $('.pillow').click(function(e) {e.preventDefault();
    $('.pillow').removeClass('baseClactive');$(this).addClass('baseClactive');  
    pillowN = $(".pillow").index(this);findProduct();    });
    })
</script>    


Made on
Tilda