Как создать прайс-калькулятор из блока BF204N в Tilda
Уроки английского, испанского и французского онлайн
Индивидуальные
Групповые
Длительность одного урока (минут)
Тариф
Кол-во занятий в месяц
Длительность одного урока (минут)
Кол-во занятий в месяц

Как создать прайс-калькулятор из блока BF204N в Tilda

1
Создали ZeroBlock и добавили в него заголовок, картинку и 2 кнопки (Индивидуальные и Групповые)
Кнопкам задали ссылки #individ и #group
2
Создали первую форму BF204N и добавили в неё поля с именами:
> Длительность - вопрос с вариантами ответа - time (вариант 1 активен)
> Тариф - вопрос с вариантами ответа - tarif(вариант 1 активен)
> Кол-во занятий - вопрос с вариантами ответа - lesson(вариант 1 активен)
> Цена 1 урока- поле для ввода 1 стока - itogindone
> Цена общая - поле для ввода 1 стока - itogind
> Поле Имя
> Поле Телефон
3
Создали вторую форму BF204N и добавили в неё поля с именами:
> Длительность - вопрос с вариантами ответа - timegr (вариант 1 активен)
> Кол-во занятий - вопрос с вариантами ответа - lessongr (вариант 1 активен)
> Стоимость - поле для ввода 1 стока - itoggr
> Поле Имя
> Поле Телефон
4
Задали формам в настройках имена individual и group
5
Добавили на страницу блок для фона Т674
6
Добавили первый и второй код в блок Т123
Вот втором коде указали ID от наших форм
//ПЕРЕКЛЮЧЕНИЕ ФОРМ
var formindID = '#rec191524209';
var formgrID = '#rec191680005';

Во втором коде прописали цены для обеих форм

//ИНДИВИДУАЛЬНАЯ ФОРМА
var priceind =
{ 1:[{1:4800,2:8640,3:12240},{1:6400,2:11520,3:16320}], //45 мин - Выг-Удоб 2:[{1:6400,2:11520,3:16320},{1:8000,2:14400,3:20400}], //60 мин - Выг-Удоб 3:[{1:9600,2:17280,3:28785},{1:12000,2:21600,3:30600}] //90 мин - Выг-Удоб };

//ГРУППОВАЯ ФОРМА
var pricegrp =
{ 1:[{1:4800,2:8640,3:12240}], //60 мин - Выг-Удоб 2:[{1:7200,2:12960,3:18360}], //90 мин - Выг-Удоб };
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Получить полное видео
Посмотреть все видео
Создаём прайс-калькулятор из формBF204N.
Делаем переключение калькуляторов через ZeroBlock.
Длительность видео 23 минуты
Фрагмент видео
Посмотреть видео в личном кабинете ►
Библиотека для примера

<style>
  .t674__body_with-bg:after {
    z-index: -2;
}
  body.t-body.t674__body_with-bg:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: #136899;
    height: 100vh;
    width: 100vw;
    opacity: 0.9;
}

  .t678 input.t-input.js-tilda-rule  , .t678 .t-input-phonemask__wrap {
    background-color: rgba(255, 255, 255, 0.2);
}
  .t678 .t-form__submit {
    display: block;
    text-align: left;
}
   .t678 .t-radio__control {
    background-color: rgba(255, 255, 255, 0);
    border-radius: 30px;
    padding: 4px 15px;
    display: inline-block;
    margin-right: 10px !important;
}
   .t678 .t-radio__indicator {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
    border: none;
    border-radius: 30px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

    .t678 .t-radio__indicator:after {
    display: none;
}

    .t678 .t-radio__control .t-radio:checked ~ .t-radio__indicator {
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 1);
}

   .actbtn{
    color: #000000 !important;
    background-color: #ffffff !important;
}
   input[name^="itog"] {
    background: transparent !important;
    border: none !important;
    font-size: 18px;
    font-weight: 300;
    padding-left: 0px;
    height: 30px;
    pointer-events: none;
}

</style>


<script>
$( document ).ready(function() {
    
//ИНДИВИДУАЛЬНАЯ ФОРМА
//Цена общая
var priceind = {
1:[{1:4800,2:8640,3:12240},{1:6400,2:11520,3:16320}],   //45 мин - Выг-Удоб
2:[{1:6400,2:11520,3:16320},{1:8000,2:14400,3:20400}],  //60 мин - Выг-Удоб
3:[{1:9600,2:17280,3:28785},{1:12000,2:21600,3:30600}]  //90 мин - Выг-Удоб
};
//Цена одного урока
var priceindone = {
1:[{1:600,2:540,3:510},{1:800,2:720,3:680}],   //45 мин - Выг-Удоб
2:[{1:800,2:720,3:680},{1:1000,2:900,3:850}],  //60 мин - Выг-Удоб
3:[{1:1200,2:1080,3:1020},{1:1500,2:1350,3:1275}]  //90 мин - Выг-Удоб
};

function getPrice(){ 
 //Получаем значение из полей 
 var time = $('input[name="time"]:checked').parent('.t-radio__control').index();
 var tarif = $('input[name="tarif"]:checked').parent('.t-radio__control').index();
 var lesson = $('input[name="lesson"]:checked').parent('.t-radio__control').index();
 //Получаем цену из прайса 
  var pticeIone = priceindone[time+1][tarif][lesson+1];
  var pticeIt = priceind[time+1][tarif][lesson+1];
 //Выводим цену
 $('input[name="itogindone"]').val('Цена урока: '+pticeIone+' руб');
 $('input[name="itogind"]').val('Цена общая: '+pticeIt+' руб');
};
  

//ГРУППОВАЯ ФОРМА    
var pricegrp = {
1:[{1:4800,2:8640,3:12240}],   //60 мин - Выг-Удоб
2:[{1:7200,2:12960,3:18360}],  //90 мин - Выг-Удоб
};

function getPricegr(){ 
 //Получаем значение из полей 
 var timegr = $('input[name="timegr"]:checked').parent('.t-radio__control').index();
 var lessongr =$('input[name="lessongr"]:checked').parent('.t-radio__control').index();
 //Получаем цену из прайса 
 var pticeGr = pricegrp[timegr+1][0][lessongr+1];
 //Выводим цену
 $('input[name="itoggr"]').val('Cтоимость: '+pticeGr+' руб.');
};

//Проверяем итог
setTimeout(function(){getPrice();getPricegr();}, 1000);
$(document).on(".t678 input",function(){ getPrice();getPricegr();});
    
//ПЕРЕКЛЮЧЕНИЕ ФОРМ
var formindID = '#rec191524209';
var formgrID =  '#rec191680005';
$(formgrID).hide();
$('a[href="#individ"]').addClass('actbtn')
$('a[href="#individ"]').click(function(e){e.preventDefault();
    $('a.tn-atom').removeClass('actbtn');
    $(this).addClass('actbtn');
    $(formindID).show();$(formgrID).hide();
});
$('a[href="#group"]').click(function(e){e.preventDefault();
    $('a.tn-atom').removeClass('actbtn');
    $(this).addClass('actbtn');
    $(formindID).hide();$(formgrID).show();
});
});  
</script>
Made on
Tilda