Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
Как сделать калькулятор в Zero с прайс листом из CL46 в Tilda
Мебельный щит из лиственницы
Вид:
Толщина, мм:
Ширина, мм:
Длина, мм:
Влажность:
8-12%
Всегда в наличии
руб
*Цена указана за 1 шт.
*Сумма товара высчитывается поштучно

Как сделать калькулятор в Zero с прайс листом из CL46 в Tilda

1
Создали ZeroBlock
2
Добавили нём:
2 Button (Цельноламельный и Сращенный) со ссылками #calc-type
2 Button (18 и 40) со ссылками #calc-depth
2 Button (300 и 600) со ссылками #calc-width
3 Button (2000 , 3000 и 4000) со ссылками #calc-length
Элемент Text (c подписью 1058) и ссылкой #summ
Элемент формы Quantity (plus/minus buttons) с именем quant
3
Создали таблицу CL46 и наполнили её контентом
4
Вставили код в блок Другое - Т123

Передача данных из калькулятора в корзину выполнена по примеру
https://mo-ti.ru/zerocalcard
Рост числа в Zero выполнен по примеру
https://mo-ti.ru/numslowgrow
Библиотека для примера

<style> 
    a[href="#summ"]{
        pointer-events:none;
    }
    .activebutt{
    background-color: #72b73b !important;
    color: #fff !important;
    }
    .needrows {
    background-color: #d4fbb5 !important;
}  
</style>

<script>
$( document ).ready(function() {
   var only = 1;var together = 0;
//Добавляем класс нашим активным первым кнопкам  
  $('a[href$="-type"]:first').addClass('activebutt');
  $('a[href$="-depth"]:first').addClass('activebutt');
  $('a[href$="-width"]:first').addClass('activebutt');
  $('a[href$="-length"]:first').addClass('activebutt');

//Рассчитываем цену
function getsumm() {
   if( $('input[name="quant"]').val()<2){
         $('input[name="quant"]').val(1);only=1;together=0;
    }else{ only=0;together=1; };
//Собираем дынные из кнопок
 var type =    $('a[href$="-type"].activebutt').html();
 var depth =   $('a[href$="-depth"].activebutt').html();
 var width =   $('a[href$="-width"].activebutt').html();
 var length =  $('a[href$="-length"].activebutt').html();
 var size = depth+'х'+width+'х'+length;
//Ищем цену в таблице
 $('.t431__tbody tr').removeClass('selectrows needrows');
 $(".t431__td:contains("+size+")").parent().addClass('selectrows');
 $(".selectrows .t431__td:contains('"+type+"')").parent().addClass('needrows');
 var price =  Number.parseInt($('.needrows td:last').html());
 var col= $('input[name="quant"]').val();
 //Анимация числа
 $(function() {
	   var cLnum = 'a[href="#summ"]';
	   var numb_start = $(cLnum).html();
	   var numb_end = price*col;
	   $({numberValue: numb_start}).animate({numberValue: numb_end}, {
			duration: 1500, 
			easing: "swing",
			step: function(val) {$(cLnum).html(Math.ceil(val)); 
			}
		});
	});   
};

//При нажатии кнопки, меняем активное состояние  
  $('a[href^="#calc"]').click(function(e) {e.preventDefault();
      if(!$(this).hasClass("activebutt")) {
       var linkbtn = "a[href="+$(this).attr('href')+"]";
       $(linkbtn).removeClass('activebutt');$(this).addClass('activebutt');
      };getsumm();
  });
  
  $(document).on('click','.t396  .t-inputquantity__btn-plus , .t396 .t-inputquantity__btn-minus',function () { getsumm(); });
  $(document).on('focusout','input[name="quant"]',function () { getsumm(); });
  $(document).on('keydown','input[name="quant"]',function (event) {
      if(event.keyCode == 13) { event.preventDefault(); return false; getsumm(); }});
  $( window ).resize(function() { setTimeout(function(){ getsumm();}, 700)
  });
}); 
</script>
Мебельный щит из лиственницы
1058
р.
Размер:
Вид:
Кол-во:
Made on
Tilda