Как создать карточку товара с калькулятором в ZeroBlock в Tilda
 
Аккумуляторный строительный шуруповёрт
Аккумуляторный строительный шуруповёрт
41300
р.
Комплектация
Количество
Срок дополнительной гарантии, лет

Как создать карточку товара с калькулятором в ZeroBlock в Tilda

1
Создали карточку с калькулятором в ZeroBlock
2
Добавили на страницу связующий блок ST200
3
Добавили блок с корзиной ST100 на страницу
4
Добавили коды в блок Другое - Т123
1- код для смены фото
2- получение расчётов калькулятора
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём калькулятор товара в ZeroBlock и передаём данные в корзину.
Длительность видео: 34 мин
Фрагмент видео
Библиотека для примера

<script>
$( document ).ready(function() {
var urlprodimg=0;
//Примваиваем классы нашим элементам  
$('[href = "#prodimg"]').addClass('prodimg');
$('.prodimg').not('.prodimg:first').hide();
//Функция скрытия изображения и деактивации иконок 
function activecolor(){     $('.prodimg').hide();};
 //Когда изменяют цвет композиции
    $('.tn-elem').on('change', 'select[name="complect"]', function() {       
      // Получаем номер элемента в списке       
      var place = $(this)[0].selectedIndex; activecolor();
      //Показываем нужное фото
      $('.prodimg:eq('+place+')').show();
      //Отправляем нужное фото в ST200
      urlprodimg =  $('.prodimg:eq('+place+') img').attr('src');
      $('.t744 .t-slds__bgimg').css('background-image', 'url('+urlprodimg+')').attr('data-original', urlprodimg);
   });    
});    
</script>

<style>
/*Скрываем ST200*/
   div[data-record-type="744"]{ display:none;}
    .t706__product-imgdiv {
    background-repeat: no-repeat;
    background-size: contain !important;
    background-color: #ffffff !important;
}
</style>
 
<script>
$( document ).ready(function() {
var notLazyblock = '.t744 .t-slds__bgimg';
for(let i = 0; i < $(notLazyblock).length; i++){
$(notLazyblock).addClass('loaded plus');
$(notLazyblock+':eq('+i+')').css('background-image', 'url("'+$(notLazyblock+':eq('+i+')').data("original")+'")' );
};      
//При клике на нашу кнопку
$('a[href="#sendtocart"]').click(function(event) {
  event.preventDefault();

//***********************
  //Получаем комплектацию
    var complect = $('select[name="complect"]').val();
  //Получаем кол-во 
    var colvo = $('input[name="colvo"]').val();    
  //Получаем срок Гарантии   
    var garantee = $('input[name="garantee"]').next('.t-range__value-txt').html();
 //Получаем Дополнительный сервис 
    var dopserv = $('input[name="dopservice"]').val(); 
  //Получаем значение Способа доставки
    var delivery= $('input[name="deliveryvar"]:checked').val();
  //Полчаем сумму калькулятора
    var itogo = $('input[name="summazakaza"]').next('.t-calc__wrapper').children('.t-calc').html();


//***********************
  

//ПРисваиваем значения из калькулятора для блока ST200
  $('.t744__price-value').html(itogo);//Цена товара
  //Параметры
  $('.t744 select:eq(0) option:selected').val(complect);//Комплектация
  $('.t744 select:eq(1) option:selected').val(colvo);//Количество
  $('.t744 select:eq(2) option:selected').val(garantee);//Гарантия
  $('.t744 select:eq(3) option:selected').val(dopserv);//Доп сервис
  $('.t744 select:eq(4) option:selected').val(delivery);//Доставка
  
//Отправляем заказ
 let fullinput=true;
 let mainBlk = $(this).closest('.t-rec');
    $('.t-input-group').removeClass('js-error-control-box');
    mainBlk.find('.js-tilda-rule[data-tilda-req="1"]').each(function() {
        if($(this).val()==''){$(this).closest('form').find('.t-submit').click(); fullinput=false; return false;};
    }); 
    if(fullinput){
    mainBlk.find('input[type="radio"][data-tilda-req="1"].js-tilda-rule').closest('.t-input-block').each(function() {
    if(!$(this).find('input[type="radio"]').is(':checked')){$(this).closest('form').find('.t-submit').click();fullinput=false; return false;  
    };});};
    if(fullinput){
    mainBlk.find('input[type="checkbox"][data-tilda-req="1"].js-tilda-rule').each(function() {
    if (!$(this).is(':checked')){ $(this).closest('form').find('.t-submit').click(); fullinput=false; return false;};
    });};
    
    if(fullinput){
        setTimeout(function() {  $(".t744__btn")[0].click(); }, 100);
    };
  return false;
});

 $(document).on("keydown", ".t-form", function(event) {return event.key != "Enter";});
});
</script>
Дополнительный сервис
Доставка
Made on
Tilda