Как создать прайс-калькулятор доходности в Tilda
Удалённая работа для репетитора
Оцени свой уровень дохода при разной занятости
Общий доход:
20 000 р.
Калькулятор доходности репетитора

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

1
Создали ZeroBlock и добавили в него 4 формы
  1. Кол-во рабочих дней - поле Question with answers с именем workday
  2. Уровень владения СЕFR - поле Question with answers с именем cefr
  3. Показать доход - поле Question with answers с именем term
  4. Оборудование в аренду - поле Question with answers (multiple) с именем equipment
2
Создали элемент Text для цены и написали 20 000 р.
Задали ему класс pricetext
3
Вставили код в блок Другое - Т123
В коде прописали наш прайс для всех комбинаций
1110:20000,
1111:22000,
1120:80000,
Библиотека примера
<script>
$( document ).ready(function() {
    
let pricelist = {
    1110:20000,
    1111:22000,
    1120:80000,
    1121:88000,
    1130:960000,
    1131:1056000,
    
    1210:26000,
    1211:30000,
    1220:104000,
    1221:120000,
    1230:1248000,
    1231:1440000,
    
    1310:31000,
    1311:35000,
    1320:124000,
    1321:140000,
    1330:1488000,
    1331:1680000,
    
    2110:34000,
    2111:37000,
    2120:136000,
    2121:148000,
    2130:1632000,
    2131:1776000,
    
    2210:39000,
    2211:44000,
    2220:156000,
    2221:176000,
    2230:1872000,
    2231:2112000,
    
    2310:43000,
    2311:46000,
    2320:172000,
    2321:184000,
    2330:2064000,
    2331:2208000,
    
    3110:46000,
    3111:49000,
    3120:184000,
    3121:196000,
    3130:2208000,
    3131:2352000,
    
    3210:49000,
    3211:52300,
    3220:196000,
    3221:209200,
    3230:2352000,
    3231:2510400,
    
    3310:55000,
    3311:57000,
    3320:220000,
    3321:228000,
    3330:2640000,
    3331:2736000
};
    
let workday = 'input[name="workday"]';
let cefr = 'input[name="cefr"]';
let term = 'input[name="term"]';
let equipment = 'input[name="equipment"]';

let startPrice = pricelist[1110];

function divideNumberByPieces(x, delimiter) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, delimiter || " ");
};
$('.pricetext .tn-atom').text(divideNumberByPieces(Math.ceil(startPrice))+' р.');

let calcBlk = '#'+$(workday).closest('.t-rec').attr('id');
$(calcBlk).on('change', 'input' , function() {       
   let equipmentPos=0;
   if($(equipment).val()) equipmentPos=1;
   
   let currentPrice = String($(workday).index($(workday+":checked"))+1)+
                      String($(cefr).index($(cefr+":checked"))+1)+
                      String($(term).index($(term+":checked"))+1)+
                      String(equipmentPos);
                     
    if (pricelist[currentPrice]) {
        $(function() {
	    let numb_start = startPrice;
	    let numb_end =pricelist[currentPrice];
	        $({numberValue: numb_start}).animate({numberValue: numb_end}, {
			duration: 1000, 
			easing: "swing",
			step: function(val) {$('.pricetext .tn-atom').text(  divideNumberByPieces(Math.ceil(val))+' р.'); 
			}
		    });
	    });
	    startPrice = pricelist[currentPrice];
    }else{
        $('.pricetext .tn-atom').text('Нет варианта')
    };
   });    
});    
</script>
Made on
Tilda