Как создать конструктор товара из связки блоков ZeroBlock+ST200 в Tilda
Комплект Экрю
Наволочки
Размер комплекта
Простыня
Комплект Экрю
ART:456-211
10000
р.
Наволочки
Размер комплекта
Простыня

Как создать конструктор товара из связки блоков ZeroBlock+ST200 в Tilda

1
Создали ZeroBlock
2
Создали в Zero элементы управления:
- 2 button задали им ссылку #pillowcase
- 4 button задали ему ссылку #size
- 2 button задали им ссылку #sheet
- 1 text для цены, задали ему ссылку #percost
- 1 button для отправки в корзину, задали ему ссылку #sendtocart
3
Создали блок ST200, добавили в него фото, название, цену и 3 параметра
4
Добавили код на страницу в блок Другое - Т123
В коде прописали прайс для продукта
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём карточку товара в Zero и передаём данные из неё в корзину. Картинку, название, параметры и артикул. Длительность видео: 21 минута
Фрагмент видео
Библиотека для примера
<style>
/*Время и вид анимации для вкладок*/
  .baseCl{ transition:all 0.4s ease-in-out; }
/*Стиль веделенной вкладки*/  
  .baseClactive{
      background-color: #fcb42f !important;
      color: #ffffff !important;
  } 
  div[data-record-type="744"]{ display:none;}
  .t706__product-imgdiv {
    background-repeat: no-repeat;
    background-size: contain !important;
    background-color: #ffffff !important;
}
  a[href="#percost"]{pointer-events:none;}
</style> 

<script>
   $( document ).ready(function() {
   //ПРисваиваем класс вкладкам   
   $('[href="#pillowcase"]').addClass('baseCl pillowcase');
   $('[href="#size"]').addClass('baseCl size');
   $('[href="#sheet"]').addClass('baseCl sheet');
   $('[href="#percost"]').addClass('prTxtelem');
   //Делаем выделенные первые вкладки  
   $('.pillowcase').first().addClass('baseClactive');
   $('.size').first().addClass('baseClactive');
   $('.sheet').first().addClass('baseClactive');
   var pillowcaseN=0, sizeN=0, sheetN=0; 
   
   //Создаём прайс цен
   var priceLst = {'000': 10000,
                   '001': 12000,
                   '010': 9600,
                   '011': 11340,
                   '020': 13600,
                   '021': 15800,
                   '030': 13400,
                   '031': 17440,
                  
                   '100': 14390,
                   '101': 16540,
                   '110': 11734,
                   '111': 14220,
                   '120': 17930,
                   '121': 13666,
                   '130': 18910,
                   '131': 17700
                 };
                 
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")+'")' );
};                       

function divideNumberByPieces(x, delimiter) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, delimiter || " ");
};

function findPrice(){
     var pricePos = String(pillowcaseN)+String(sizeN)+String(sheetN);
     var getPrice = divideNumberByPieces(priceLst[pricePos]);

 $(function() {
	   var numb_start = $('.t744__price-value').attr('data-product-price-def');
	   var numb_end = priceLst[pricePos];
	   $({numberValue: numb_start}).animate({numberValue: numb_end}, {
			duration: 1000, 
			easing: "swing",
			step: function(val) {$('.prTxtelem').text(  divideNumberByPieces(Math.ceil(val))+' р.'); 
			}
		});
	});   
  $('.t744__price-value').html(priceLst[pricePos]).attr('data-product-price-def' , priceLst[pricePos]);
   }; findPrice();
   
   //При клике на наволочку
    $('.pillowcase').click(function(e) {e.preventDefault();
    $('.pillowcase').removeClass('baseClactive');$(this).addClass('baseClactive'); 
    pillowcaseN = $(".pillowcase").index(this);findPrice();    });
    //При клике на размер
    $('.size').click(function(e) {e.preventDefault();
    $('.size').removeClass('baseClactive');$(this).addClass('baseClactive');  
    sizeN = $(".size").index(this);findPrice();    });
    //При клике на простынь
    $('.sheet').click(function(e) {e.preventDefault();
    $('.sheet').removeClass('baseClactive');$(this).addClass('baseClactive');  
    sheetN = $(".sheet").index(this);findPrice();    });
    
  //При клике на нашу кнопку
  $('a[href="#sendtocart"]').click(function(event) { event.preventDefault();
  $('.t744 select:eq(0) option:selected').val($('.pillowcase.baseClactive').text());
  $('.t744 select:eq(1) option:selected').val($('.size.baseClactive').text());
  $('.t744 select:eq(2) option:selected').val($('.sheet.baseClactive').text());
  $('.t744').trigger('displayChanged');
  setTimeout(function() {  $(".t744__btn")[0].click(); }, 100);  return false;
  });       
       
});
</script>    
Click to order
Total: 
Your Name
Payment method
Made on
Tilda