Как создать конструктор товара из связки блоков ZeroBlock+ST200 в Tilda
Комплект Экрю
Наволочки
Размер комплекта
Простыня
50х70
70х70
Полуторный
Евро
Кинг
Семейный
На резинке
Свободная
Добавить в корзину
10 000 р.
11 000 р.
Комплект Экрю
ART:456-211
10000
р.
Наволочки
Размер комплекта
Простыня
BUY NOW

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

1
Создали ZeroBlock
2
Создали в Zero элементы управления:
- 2 button задали им ссылку #pillowcase
- 4 button задали ему ссылку #size
- 2 button задали им ссылку #sheet
- 1 text для цены, задали ему ссылку #percost
- 1 button для отправки в корзину, задали ему ссылку #sendtocart
  • если нужна старая цена, то добавили 1 text для цены, задали ему ссылку #oldpercost
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;}
.dis-btn{
    pointer-events: none;
    filter: grayscale(1);
}  
</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': 0,
                   '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")+'")' );
};                       

let btnCaption = $('a[href="#sendtocart"]').text();

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]);
     
     if(priceLst[pricePos]==0){
        $('a[href="#sendtocart"]').addClass('dis-btn').text('Нет в наличии');
     }else{
        $('a[href="#sendtocart"]').removeClass('dis-btn').text(btnCaption); 
     };
     

 $(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>
Библиотека для примера
Со старой ценой

<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;}
  .oldprTxtelem {
    text-decoration: line-through !important;
}
.dis-btn{
    pointer-events: none;
    filter: grayscale(1);
}
</style> 

<script>
   $( document ).ready(function() {
   //ПРисваиваем класс вкладкам   
   $('[href="#pillowcase"]').addClass('baseCl pillowcase');
   $('[href="#size"]').addClass('baseCl size');
   $('[href="#sheet"]').addClass('baseCl sheet');
   $('[href="#percost"]').addClass('prTxtelem');
   $('[href="#oldpercost"]').addClass('oldprTxtelem');
   //Делаем выделенные первые вкладки  
   $('.pillowcase').first().addClass('baseClactive');
   $('.size').first().addClass('baseClactive');
   $('.sheet').first().addClass('baseClactive');
   var pillowcaseN=0, sizeN=0, sheetN=0; 
   
   //Создаём прайс цен
   var priceLst = {'000': [10000,11230],
                   '001': [12000,12780],
                   '010': [0,0],
                   '011': [11340,11990],
                   '020': [13600,14230],
                   '021': [15800,16140],
                   '030': [13400,14170],
                   '031': [17440,18130],
                  
                   '100': [14390,16340],
                   '101': [16540,17330],
                   '110': [11734,12440],
                   '111': [14220,14890],
                   '120': [17930,18750],
                   '121': [13666,14542],
                   '130': [18910,19900],
                   '131': [17700,18560]
                 };
                 
let startOldPrice =  priceLst['000'][1];
let btnCaption = $('a[href="#sendtocart"]').text();

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);
     
     let linePr = priceLst[pricePos][0];
     let linePrOld = priceLst[pricePos][1];
     
     if(linePr==0){
        $('a[href="#sendtocart"]').addClass('dis-btn').text('Нет в наличии');
     }else{
        $('a[href="#sendtocart"]').removeClass('dis-btn').text(btnCaption); 
     };

     var getPrice = divideNumberByPieces(linePr);
     var getPriceOld = divideNumberByPieces(linePrOld);

 $(function() {
	   var numb_start = $('.t744__price-value').attr('data-product-price-def');
	   var numb_end = linePr;
	   $({numberValue: numb_start}).animate({numberValue: numb_end}, {
			duration: 1000, 
			easing: "swing",
			step: function(val) {$('.prTxtelem').text(  divideNumberByPieces(Math.ceil(val))+' р.'); 
			}
		});
	});   
	
  $(function() {
	   var numb_start2 = startOldPrice;
	   var numb_end2 = linePrOld;
	   startOldPrice = linePrOld;
	   $({numberValue: numb_start2}).animate({numberValue: numb_end2}, {
			duration: 1000, 
			easing: "swing",
			step: function(val) {$('.oldprTxtelem').text(  divideNumberByPieces(Math.ceil(val))+' р.'); 
			}
		});
	});       	
 
 
 
  $('.t744__price-value').html(linePr).attr('data-product-price-def' , linePr);
   }; 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>
Made on
Tilda