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

Как сделать сложный калькулятор в 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);//Поле с итоговой ценой, калькулятор   
  //ОТправляем данные основной формы
    $('div[data-elem-id="1562169314349"] .t-submit').click();
});
});
</script>
Made on
Tilda