Аккумуляторный строительный шуруповёрт
Аккумуляторный строительный шуруповёрт
41300
р.
Комплектация
Количество
Срок дополнительной гарантии, лет
Click to order
Cart
Total: 
Payment method

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

1. Создали карточку с калькулятором в ZeroBlock
2. Добавили на страницу связующий блок ST200
3. Добавили блок с корзиной ST100 на страницу
4. Добавили коды в блок Другое - Т123
1- код для смены фото
2- получение расчётов калькулятора
СПИСОК ВСЕХ ВИДЕО
Видеоинструкция данного примера
Видеоинструкция данного примера доступна в архиве
mo-tilda Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём ZeroBLock
2. Создаём в нём калькулятор
3. Создаём зависимость между фото и выпадающим списком
4. Добавляем дополнительные параметры для блока ST200
5. Ограничиваем выбор нулевого товара

Создаём калькулятор товара в ZeroBlock и передаём данные в корзину.
Длительность видео: 54 мин
Подписка к видеоинструкции на платной основе
Фрагмент видео

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

2
<style>
/*Скрываем ST200*/
   div[data-record-type="744"]{ display:none;}
</style>
<script>
  $( document ).ready(function() {
//ПРи клике на нашу кнопку
  $('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);//Доставка
  
//Отправляем заказ
  setTimeout(function() {  $(".t744__btn")[0].click(); }, 100);
  return false;
});
});
</script>
Дополнительный сервис
Доставка
Made on
Tilda