Как создать прайс-калькулятор из блока BF204N в Tilda
Уроки английского, испанского и французского онлайн
Длительность одного урока (минут)
Тариф
Кол-во занятий в месяц
Длительность одного урока (минут)
Кол-во занятий в месяц
Библиотека для примера
<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:7200,2:14520,3:20320},{1:10000,2:17400,3:25400}], //60 мин - Выг-Удоб - добавлена строка
4:[{1:9600,2:17280,3:28785},{1:12000,2:21600,3:30600}] //120 мин - Выг-Удоб
};
//Цена одного урока
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:1000,2:960,3:800},{1:1300,2:1200,3:1000}], //60 мин - Выг-Удоб - добавлена строка
4:[{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 = '#rec351404819';
var formgrID =  '#rec351404820';
var formNoname = '#rec351634438'
$(formgrID+','+formNoname ).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+','+formNoname ).hide();
});
$('a[href="#group"]').click(function(e){e.preventDefault();
    $('a.tn-atom').removeClass('actbtn');
    $(this).addClass('actbtn');
    $(formindID+','+formNoname ).hide();$(formgrID).show();
});
$('a[href="#noname"]').click(function(e){e.preventDefault();
    $('a.tn-atom').removeClass('actbtn');
    $(this).addClass('actbtn');
    $(formindID+','+formgrID ).hide();$(formNoname).show();
});
});  
</script>
Made on
Tilda