Как создать калькулятор расчёта стоимости бухгалтерского обслуживания в Tilda
Стоимость услуги:
руб
Стоимость услуги:
руб

Как создать калькулятор расчёта стоимости бухгалтерского обслуживания в Tilda

1
Создали ZeroBlock
2
Добавили в него 3 формы с нужными полями. Задали им необходимые имена:
1-ая Форма
= Вопрос с картинками (Шаг1) | taxtype (со значениями 1, 2 и 3)
= Range Slider (Шаг2) | transactions
= Количество + - (Шаг3) | employee
2-ая Форма
= Вопрос с вариантами (Шаг4) | activity
3-я Форма
= E-mail
= Телефон
= Имя
= Hidden field | sendtaxtype
= Hidden field | sendtransactions
= Hidden field | sendemployee
= Hidden field | sendactivity
= Hidden field | senditogo
3
Создали элемент Text со ссылкой #summ
4
Создали ещё одну форму с полями
Поле | Name | Формула
Калькулятор | taxtypecalc | taxtype
Калькулятор | transactionscalc |transactions
Калькулятор | employeecalc | employee
Калькулятор | activitycalc | activity
5
Добавили код на страницу в блок Другое - Т123
В коде прописали:
- прайс выбора стоимости (фото ниже)
Библиотека для примера
<style> 
.itsumm{pointer-events:none}
</style>

<script>
$( document ).ready(function() {
var only = 1;var together = 0;
//Добавляем класс итого  
$('a[href="#summ"]').addClass('itsumm');
//Создаём прайс цен

var price = {
1: [{1:2500,2:2500,3:3000}],
2: [{1:4600,2:4600,3:5800}],
3: [{1:6500,2:6500,3:8000}],
4: [{1:7500,2:7500,3:9500}],
5: [{1:8500,2:8500,3:10500}],
6: [{1:10500,2:10500,3:11500}],
7: [{1:12000,2:12000,3:13000}],
8: [{1:13800,2:13800,3:15000}],
9: [{1:16000,2:16000,3:17500}],
10:[{1:18000,2:18000,3:20000}]
};

//Рассчитываем цену
function getsumm() {
   if( $('input[name="employee"]').val()<2){
         $('input[name="employee"]').val(1);only=1;together=0;
    }else{ only=0;together=1; };

//Анализируем кол-во операций
var t_s  = $('input[name="transactionscalc"]').val();var t_n=0;
switch (true) {
  case t_s <= 5 :   t_n=1;  break;
  case t_s <= 29 :  t_n=2;  break;
  case t_s <= 49 :  t_n=3;  break;
  case t_s <= 69 :  t_n=4;  break;
  case t_s <= 99 :  t_n=5;  break;
  
  case t_s <= 129 :  t_n=6;  break;
  case t_s <= 169 :  t_n=7;  break;
  case t_s <= 199 :  t_n=8;  break;
  case t_s <= 249 :  t_n=9;  break;
  case t_s <= 300 :  t_n=10;  break;

};

//Получаем
var n_r  = Number.parseInt($('input[name="taxtypecalc"]').val());//налоговый режим
var p_l = price[t_n][0][n_r];//получаем прайс лист
var k_s  = Number.parseInt($('input[name="employeecalc"]').val());//получаем кол-во сотрудников
var v_d  = parseFloat($('input[name="activitycalc"]').val());//вид деятельности

//Измеряем сотрудников
var i_s = 0;

switch (true) {
  case k_s <= 1   :   i_s=500;  break;
  case k_s <= 5   :   i_s=1500;  break;
  case k_s <= 10  :   i_s=4000;  break;
  case k_s <= 20  :   i_s=7000;  break;
  case k_s > 20   :   i_s=7000+300*(k_s-20);  break;
  
};

//Cчитаем значение
//itogcalc = (t_s*p_l*(1+v_d)+i_s).toFixed();
itogcalc = (p_l*(1+v_d)+i_s).toFixed();

function divideNumberByPieces(x, delimiter) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, delimiter || " ");
};

//$('.itsumm').text(itogcalc+' руб.');
 //Анимация числа
 $(function() {
	   var cLnum = 'a.itsumm';
	   var numb_start = +($(cLnum).html()).replace(/[^0-9]/g,"");
	   var numb_end = itogcalc;
	   $({numberValue: numb_start}).animate({numberValue: numb_end}, {
			duration: 700, 
			easing: "swing",
			step: function(val) {$(cLnum).html(divideNumberByPieces(Math.ceil(val))); 
			}
		});
	}); 
};

 //При клике на нашу кнопку
  $('a[href="#sendmyform"]').click(function(e) {e.preventDefault();
  //Передаём наши собранные данные в основную форму  
    $('input[name="sendtaxtype"]').val($('input[name="taxtype"]:checked').val());//налоговый режим
    $('input[name="sendtransactions"]').val($('input[name="transactions"]').next('.t-range__value-txt').html());//количество операций
    $('input[name="sendemployee"]').val($('input[name="employee"]').val());//количество сотрудников
    $('input[name="sendactivity"]').val($('input[name="activity"]').val());//вид деятельности
    
    $('input[name="senditogo"]').val($('.itsumm:first').text()+' руб'); //Поле с итоговой ценой
  //Отправляем данные основной формы
    $('.mainform .t-submit').click();
});

  $(".tn-atom__form").on('DOMSubtreeModified', ".t-calc", function() {getsumm() });
  $(document).on("keydown", ".t-form", function(event) {return event.key != "Enter";});
  $( window ).resize(function() { setTimeout(function(){ getsumm();}, 2000)});
 
}); 
</script>
Made on
Tilda