Как создать калькулятор уборки по прайсу в Tilda
Уборка квартир
Стоимость частной домработницы с гарантиями компании от сервиса клининговых услуг "КлинКлин"
Вид уборки
Площадь уборки, м
Выезд авто со спец оборудованием по Москве - 1000руб
Ваше имя
Ваш телефон

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

1
Создали блок BF311N и задали в настройках имя формы - cleanform
2
В форме создали поля:

>> Вид уборки - Выпадающий список - имя переменной type-of-cleaning
Наполнение:
Поддерживающая
Генеральная
После ремонта (без мебели)
Срочная

>> Площадь уборки - вопрос с вариантами ответа - один вариант - имя переменной cleaning-area
Наполнение
до 40
до 60
до 80
до 100
до 130
свыше 130

Вариант по умолчанию - 1

>> Поле для ввода в одну строку - имя переменной - price-result

>> Разбиение по шагам
>> Имя
>> Телефон
3
Добавили код в блок Другое - Т123
В коде указали цены на все позиции по прайсу

let calcPrice = [
/*Поддержка*/ ['1890','2190','2490','3290','3690','28'],
/*Генеральная*/ ['4900','6300','7800','8500','9200','85'],
/*После ремонта*/ ['6300','7100','8300','9700','10800','95'],
/*Поддержка*/ ['5900','7300','8800','9500','10200','104']
];
Библиотека для примера
<script>
$( document ).ready(function() {
let delivery = 1000;
let calcForm = $('input[value="cleanform"]').closest('form');
let result =   $('input[name="price-result"]');

let areaWr = $('input[name="cleaning-area"]').closest('.t-radio__wrapper');
areaWr.addClass('area-wrapper');

areaWr.append('<input type="text" name="more-square" placeholder="150" class="t-input  more-input hide-more" value="" tabindex="-1">');
result.closest('.t-input-group').addClass('result_wrapper');
result.attr('tabindex', '-1').css('pointer-events','none');

let calcPrice = [
    /*Поддержка*/        ['1890','2190','2490','3290','3690','28'], 
    /*Генеральная*/      ['4900','6300','7800','8500','9200','85'],
    /*После ремонта*/    ['6300','7100','8300','9700','10800','95'],
    /*Поддержка*/        ['5900','7300','8800','9500','10200','104']
];

function divideNumberByPieces(x, delimiter) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, delimiter || " ");
};
function printPrice(em){
    result.val( divideNumberByPieces( em+delivery )+' руб.');    
};
printPrice(Number(calcPrice[0][0]));
calcForm.on('change input', 'select, input ', function() {      
    let typeInd = $('select[name="type-of-cleaning"]')[0].selectedIndex;
    let squareInput = $('input:radio[name="cleaning-area"]');
    let squareInd = squareInput.index(squareInput.filter(':checked'));
    let cost = +calcPrice[typeInd][squareInd];
    
    if (squareInd==5){
        $('.more-input').removeClass('hide-more');
        $('.more-input').addClass('js-tilda-rule').attr('data-tilda-req',1);
        let inpSq = +$('.more-input').val();
        if(inpSq) cost = cost*inpSq;
        areaWr.find('label:last input').val(inpSq);
    }else{
        $('.more-input').addClass('hide-more').val('');
        $('.more-input').removeClass('js-tilda-rule').attr('data-tilda-req','');
        areaWr.find('label:last input').val(areaWr.find('label:last').text());
    };
    printPrice(cost);
});

calcForm.on('input', '.more-input', function(){
	this.value = this.value.replace(/[^0-9]/g, '');
});

});
</script>

<style>
.result_wrapper input {
    background-color: transparent !important;
    text-align: right;
    padding: 0;
    color: #fff !important;
    font-size: 45px;
    font-weight: 600;
}
input.t-input.more-input {
    color: #000000;
    background-color: #ffffff;
    border-radius: 7px;
    width: 150px;
    margin-top: 10px;
}
.hide-more{
    display:none;
}
.result_wrapper:before {
    content: "Уборка + Выезд:";
    font-size: 24px;
    color: #ffff;
    font-family: 'Roboto',Arial,sans-serif;
}
.result_wrapper {
    text-align: right;
    box-shadow: 0 -2px 0 0 #fff;
    padding-top: 8px;
}
.t698 .t-input-group_tx {
    text-align: right;
}
.area-wrapper{
    text-align:right;
}
.t698 .t-radio__control {
    background-color: rgba(255, 255, 255, 0);
    border-radius: 3px;
    padding: 4px 15px;
    display: inline-block;
    margin-right: 10px !important;
}
.t698 .t-radio__indicator {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
    border: none;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.t698 .t-radio__indicator:after {
    display: none;
}
.t698 .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);
}
.t698 .t-form__screen .t-form__screen-number-container {
    margin-left: 3px;
    color: #fff;
}
</style>
Made on
Tilda