Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
Как создать прайс-калькулятор доходности в 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 () {
        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 = 'Нет варианта';
                };
                
            });    
        });
    
    })();    
}); 
</script>
Made on
Tilda