Как сделать сложный калькулятор в ZeroBlock в Tilda
Калькулятор уборки в ZeroBlock
Рассчитываем стоимость уборки в калькуляторе, который создали в ZeroBlock. Пример приведён ниже
Стоимость уборки:
Заказать уборку
Шаг 5: Ваши контактные данные
* Данный расчет является предварительным, детальную стоимость уточняйте у менеджеров компании
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Получить полное видео
Посмотреть все видео
Делаем сложный калькулятор в ZeroBlock со свободным позиционированием элементов.
Длительность видео 33 мин.
Фрагмент видео
Посмотреть видео в личном кабинете ►

Как сделать сложный калькулятор в ZeroBlock в Tilda

1
Создали ZeroBlock
2
Добавили в него 7 элементов Form и один элемент Button
3
Имя переменных для калькуляторов задали:
typeplace - тип помещения
typeclean - тип уборки
ploshad - площадь
dopuslugifirst - Доп услуги левый список
dopuslugisecond - Доп слуги правый список
itogo - Калькулятор с итоговой ценой
4
Формулу для калькулятора использовали такую:
typeplace+typeclean+(ploshad*20)+dopuslugifirst+dopuslugisecond
5
За основную форму приняли форму с полями ввода данных.
В этой форме создали скрытые поля для получения данных из других форм.
Задали имена этим полям
sendtypeplace //Тип помещения
sendtypeclean //Тип уборки
sendploshad //Площадь уборки
senddop1 //ДопУслуги первый список
senddop2 //ДопУслуги второй список
senditogo //Поле с итоговой ценой, калькулятор
6
Для созданного элемента Button задали ссылку #sendmyform
7
Добавили скрипт на страницу
Скрипт вставляется в блок ДРУГОЕ►Т123
В коде заменили [data-elem-id="1562169314349"] - от основной формы
Библиотека для примера
<script>
    $( document ).ready(function() {
  //При клике на нашу кнопку
  $('a[href="#sendmyform"]').click(function(e) {e.preventDefault();
  //Получаем значения из полей     
    let typeplace= $('input[name="typeplace"]:checked').val();//Тип помещения
    let typeclean= $('input[name="typeclean"]:checked').val();//Тип уборки
    let ploshad = $('input[name="ploshad"]').next('.t-range__value-txt').html();//Площадь уборки
    let dopuslugifirst = $('input[name="dopuslugifirst"]').val();//ДопУслуги первый список
    let dopuslugisecond = $('input[name="dopuslugisecond"]').val();//ДопУслуги второй список
    let itogo = $('input[name="itogo"]').next('.t-calc__wrapper').children('.t-calc').html();//Поле с итоговой ценой, калькулятор   
    
  //Передаём наши собранные данные в основную форму  
    $('input[name="sendtypeplace"]').val(typeplace);//Тип помещения
    $('input[name="sendtypeclean"]').val(typeclean);//Тип уборки
    $('input[name="sendploshad"]').val(ploshad);//Площадь уборки
    $('input[name="senddop1"]').val(dopuslugifirst);//ДопУслуги первый список
    $('input[name="senddop2"]').val(dopuslugisecond);//ДопУслуги второй список
    $('input[name="senditogo"]').val(itogo);//Поле с итоговой ценой, калькулятор   
  
  
var fullinput=true;   
$(this).closest('.t396__artboard').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){
$(this).closest('.t396__artboard').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;  
}else{ $('.t-input-group').removeClass('js-error-control-box')};
});
};
if(fullinput){
$(this).closest('.t396__artboard').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){
//ОТправляем данные основной формы
$('div[data-elem-id="1562169314349"] .t-submit').click();
}; 
})
$(document).on("keydown", ".t-form", function(event) {return event.key != "Enter";});;
});
</script>
Made on
Tilda