Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Как создать прайс-калькулятор доходности в 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.addEventListener("DOMContentLoaded", function() {
    (function () {
        
        setTimeout(function() {
        
            const 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
            };
            
            
                
            const workday = 'input[name="workday"]';
            const cefr = 'input[name="cefr"]';
            const term = 'input[name="term"]';
            const equipment = 'input[name="equipment"]';
            
            let startPrice = pricelist[1110];
    
            function divideNumberByPieces(x, delimiter) {
              return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, delimiter || " ");
            };
            
            const priceText = document.querySelector('.pricetext .tn-atom');
            priceText.innerText = divideNumberByPieces(Math.ceil(startPrice))+' р.';
            
            const calcBlk = priceText.closest('.t-rec');
            
            const inputs = calcBlk.querySelectorAll("input");
            
          
            
    
            inputs.forEach(function (el, index) {
                el.addEventListener('change',function(e) {
                    let equipmentPos=0;
    
                    if(  document.querySelector(equipment).value!='' ) equipmentPos=1; 
                    
                    let workdaysIndex = 0;
                    const workdays = document.querySelectorAll(workday);
                    workdays.forEach(function (el, index) {
                        if(el.checked) workdaysIndex = index;
                    });
                    
                    let cefrIndex = 0;
                    const cefrs = document.querySelectorAll(cefr);
                    cefrs.forEach(function (el, index) {
                        if(el.checked) cefrIndex = index;
                    });
                    
                    let termIndex = 0;
                    const terms = document.querySelectorAll(term);
                    terms.forEach(function (el, index) {
                        if(el.checked) termIndex = index;
                    });
                    
                    let currentPrice =  String(workdaysIndex+1)+
                                        String(cefrIndex+1)+
                                        String(termIndex+1)+
                                        String(equipmentPos);
                    
                    if (pricelist[currentPrice]) {
                        priceText.innerText = divideNumberByPieces(pricelist[currentPrice])+' р.';
                    }else{
                        priceText.innerText = 'Нет варианта';
                    };
                    
                });    
            });
    
        }, 1000);
    })();    
}); 
</script>
Made on
Tilda