Как сделать калькулятор шиномонтажа в Tilda

1
Создали блок BF310N с полями:
Тип автомобиля - выпадающий список - с именем type
Количество колёс - выпадающий список - с именем wheels
Диаметр колеса - выпадающий список - с именем diameter
Вид услуги - вопрос с вариантами ответа - с именем service
Вид услуги - вопрос с вариантами ответа(радиокнопки) - с именем service
Доп услуги - вопрос с вариантами ответа(галочки) - с именем option
Скрытое поле - с именем summ
2
Добавили код в блок Т123
Библиотека примера
<script>
$(document).ready(function() {

//ПРАЙС ЛЕГКОВОЙ

//Опции
let optionPrice = {

    "Легковой":{
        
                                    //R12     13     14     15     16      17      18      19     20     21     22     23     24     25     26
        "Комплексный шиномонтаж":   [  999,  999,  999,  1355,  1680,   1920,   2240,   3720,  3960,  4477,  4477,  4477,  4477,  4477,  4477  ],
        
        
        
                                   //R 12     13   14   15   16    17    18    19   20    21    22    23    24    25    26
        "Снятие колес":             [  26,    26,  26,  45,  45,   50,   60,   90,  100,  98,  98,  98,  98,  98,  98  ],
        "Установка колес":          [  26,    26,  26,  45,  45,   50,   60,   90,  100,  98,  98,  98,  98,  98,  98  ],
        "Мойка колёс":              [  50,    50,  50,  50,  50,   50,   50,   50,  50,   50,   50,   50,   50,   50,   50   ],
        "Детейлинг чистка колёс":   [  1230,  1230,1230,1230,1230, 1230, 1230, 1230,1230, 1230, 1230, 1230, 1230, 1230, 1230  ],
        "Демонтаж покрышки":        [  26,    26,  26,  26,  60,   80,   100,  200, 220,  240,  240,  240,  240,  240,  240  ],
        "Монтаж покрышки":          [  40,    40,  40,  60,  70,   90,   98,  200, 220,  240,  240,  240,  240,  240,  240  ],
        "Балансировка колес":       [  126,   126, 126, 170, 200,  210,  226,  350, 350,  370,  370,  370,  370,  370,  370  ],

    },
    
    "Кроссовер":{
        
                                    //R12     13     14     15     16      17      18      19     20     21     22     23     24     25     26
        "Комплексный шиномонтаж":   [  2000,  2000,  2000,  2120,  2160,   2160,   2440,   3870,  3870,  3870,  3870,  3870,  3870,  3870,  3870  ],
        
        
        
                                   //R 12   13   14   15   16    17    18    19   20    21    22    23    24    25    26
        "Снятие колес":             [  50,  50,  50,  50,  50,   50,   70,   125, 125,  125,  125,  125,  125,  125,  125  ],
        "Установка колес":          [  50,  50,  50,  50,  50,   50,   70,   125, 125,  125,  125,  125,  125,  125,  125  ],
        "Мойка колёс":              [  50,  50,  50,  50,  50,   50,   50,   50,  50,   50,   50,   50,   50,   50,   50   ],
        "Детейлинг чистка колёс":   [  1230,  1230,1230,1230,1230, 1230, 1230, 1230,1230, 1230, 1230, 1230, 1230, 1230, 1230  ],
        "Демонтаж покрышки":        [  80,  80,  80,  80,  80,   80,   100,  200, 200,  200,  200,  200,  200,  200,  200  ],
        "Монтаж покрышки":          [  90,  90,  90,  100, 100,  100,  98,  200, 200,  200,  200,  200,  200,  200,  200  ],
        "Балансировка колес":       [  226, 226, 226, 250, 260,  260,  260,  350, 350,  350,  350,  350,  350,  350,  350  ],

    },
    
    "Внедорожник":{
        
                                    //R12     13     14     15     16      17      18      19     20     21     22     23     24     25     26
        "Комплексный шиномонтаж":   [  2000,  2000,  2000,  2120,  2160,   2160,   2440,   3870,  3870,  3870,  3870,  3870,  3870,  3870,  3870  ],
        
        
        
                                   //R 12   13   14   15   16    17    18    19   20    21    22    23    24    25    26
        "Снятие колес":             [  50,  50,  50,  50,  50,   50,   70,   125, 125,  125,  125,  125,  125,  125,  125  ],
        "Установка колес":          [  50,  50,  50,  50,  50,   50,   70,   125, 125,  125,  125,  125,  125,  125,  125  ],
        "Мойка колёс":              [  50,  50,  50,  50,  50,   50,   50,   50,  50,   50,   50,   50,   50,   50,   50   ],
        "Детейлинг чистка колёс":   [  1230,  1230,1230,1230,1230, 1230, 1230, 1230,1230, 1230, 1230, 1230, 1230, 1230, 1230  ],
        "Демонтаж покрышки":        [  80,  80,  80,  80,  80,   80,   100,  200, 200,  200,  200,  200,  200,  200,  200  ],
        "Монтаж покрышки":          [  90,  90,  90,  100, 100,  100,  98,  200, 200,  200,  200,  200,  200,  200,  200  ],
        "Балансировка колес":       [  226, 226, 226, 250, 260,  260,  260,  350, 350,  350,  350,  350,  350,  350,  350  ],

    },
    
    "Микроавтобус":{
        
                                    //R12     13     14     15     16      17      18      19     20     21     22     23     24     25     26
        "Комплексный шиномонтаж":   [  2000,  2000,  2000,  2120,  2160,   2160,   2440,   3870,  3870,  3870,  3870,  3870,  3870,  3870,  3870  ],
        
        
        
                                   //R 12   13   14   15   16    17    18    19   20    21    22    23    24    25    26
        "Снятие колес":             [  50,  50,  50,  50,  50,   50,   70,   125, 125,  125,  125,  125,  125,  125,  125  ],
        "Установка колес":          [  50,  50,  50,  50,  50,   50,   70,   125, 125,  125,  125,  125,  125,  125,  125  ],
        "Мойка колёс":              [  50,  50,  50,  50,  50,   50,   50,   50,  50,   50,   50,   50,   50,   50,   50   ],
        "Детейлинг чистка колёс":   [  1230,  1230,1230,1230,1230, 1230, 1230, 1230,1230, 1230, 1230, 1230, 1230, 1230, 1230  ],
        "Демонтаж покрышки":        [  80,  80,  80,  80,  80,   80,   100,  200, 200,  200,  200,  200,  200,  200,  200  ],
        "Монтаж покрышки":          [  90,  90,  90,  100, 100,  100,  98,  200, 200,  200,  200,  200,  200,  200,  200  ],
        "Балансировка колес":       [  226, 226, 226, 250, 260,  260,  260,  350, 350,  350,  350,  350,  350,  350,  350  ],

    },
    
    "Внедорожник":{
        
                                    //R12     13     14     15     16      17      18      19     20     21     22     23     24     25     26
        "Комплексный шиномонтаж":   [  2000,  2000,  2000,  2120,  2160,   2160,   2440,   3870,  3870,  3870,  3870,  3870,  3870,  3870,  3870  ],
        
        
        
                                   //R 12   13   14   15   16    17    18    19   20    21    22    23    24    25    26
        "Снятие колес":             [  50,  50,  50,  50,  50,   50,   70,   125, 125,  125,  125,  125,  125,  125,  125  ],
        "Установка колес":          [  50,  50,  50,  50,  50,   50,   70,   125, 125,  125,  125,  125,  125,  125,  125  ],
        "Мойка колёс":              [  50,  50,  50,  50,  50,   50,   50,   50,  50,   50,   50,   50,   50,   50,   50   ],
        "Детейлинг чистка колёс":   [  1230,  1230,1230,1230,1230, 1230, 1230, 1230,1230, 1230, 1230, 1230, 1230, 1230, 1230  ],
        "Демонтаж покрышки":        [  80,  80,  80,  80,  80,   80,   100,  200, 200,  200,  200,  200,  200,  200,  200  ],
        "Монтаж покрышки":          [  90,  90,  90,  100, 100,  100,  98,  200, 200,  200,  200,  200,  200,  200,  200  ],
        "Балансировка колес":       [  226, 226, 226, 250, 260,  260,  260,  350, 350,  350,  350,  350,  350,  350,  350  ],

    },
    
    "Коммерческий":{
        
                                    //R12     13     14     15     16      17      18      19     20     21     22     23     24     25     26
        "Комплексный шиномонтаж":   [  2000,  2000,  2000,  2120,  2160,   2160,   2440,   3870,  3870,  3870,  3870,  3870,  3870,  3870,  3870  ],
        
        
        
                                   //R 12   13   14   15   16    17    18    19   20    21    22    23    24    25    26
        "Снятие колес":             [  50,  50,  50,  50,  50,   50,   70,   125, 125,  125,  125,  125,  125,  125,  125  ],
        "Установка колес":          [  50,  50,  50,  50,  50,   50,   70,   125, 125,  125,  125,  125,  125,  125,  125  ],
        "Мойка колёс":              [  50,  50,  50,  50,  50,   50,   50,   50,  50,   50,   50,   50,   50,   50,   50   ],
        "Детейлинг чистка колёс":   [  1230,1230,1230,1230,1230, 1230, 1230, 1230,1230, 1230, 1230, 1230, 1230, 1230, 1230  ],
        "Демонтаж покрышки":        [  80,  80,  80,  80,  80,   80,   100,  200, 200,  200,  200,  200,  200,  200,  200  ],
        "Монтаж покрышки":          [  90,  90,  90,  100, 100,  100,  98,  200, 200,  200,  200,  200,  200,  200,  200  ],
        "Балансировка колес":       [  226, 226, 226, 250, 260,  260,  260,  350, 350,  350,  350,  350,  350,  350,  350  ],

    },
    
    "Грузовой":{
        
                                    //R12     13     14     15     16      17      18      19     20     21     22     23     24     25     26
        "Комплексный шиномонтаж":   [  2000,  2000,  2000,  2120,  2160,   2160,   2440,   3870,  3870,  3870,  3870,  3870,  3870,  3870,  3870  ],
        
        
        
                                   //R 12   13   14   15   16    17    18    19   20    21    22    23    24    25    26
        "Снятие колес":             [  50,  50,  50,  50,  50,   50,   70,   125, 125,  125,  125,  125,  125,  125,  125  ],
        "Установка колес":          [  50,  50,  50,  50,  50,   50,   70,   125, 125,  125,  125,  125,  125,  125,  125  ],
        "Мойка колёс":              [  50,  50,  50,  50,  50,   50,   50,   50,  50,   50,   50,   50,   50,   50,   50   ],
        "Детейлинг чистка колёс":   [  1230,1230,1230,1230,1230, 1230, 1230, 1230,1230, 1230, 1230, 1230, 1230, 1230, 1230  ],
        "Демонтаж покрышки":        [  80,  80,  80,  80,  80,   80,   100,  200, 200,  200,  200,  200,  200,  200,  200  ],
        "Монтаж покрышки":          [  90,  90,  90,  100, 100,  100,  98,  200, 200,  200,  200,  200,  200,  200,  200  ],
        "Балансировка колес":       [  226, 226, 226, 250, 260,  260,  260,  350, 350,  350,  350,  350,  350,  350,  350  ],

    },
    
    
};


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

//Размечаем поля в форме
$('.uc-calc-wheels .t-input-group').each(function(i) {
    $(this).addClass('calc-el_' + (i + 1));
});

//Добавляем спец классы
$('.calc-el_4 label:eq(0)').addClass('complex');
$('.calc-el_4 label:eq(1)').addClass('detailing');

$('.calc-el_5 label:eq(0)').addClass('snyatie');
$('.calc-el_5 label:eq(1)').addClass('ustanovka');
$('.calc-el_5 label:eq(2)').addClass('moika');
$('.calc-el_5 label:eq(3)').addClass('chistka');
$('.calc-el_5 label:eq(4)').addClass('demontag');
$('.calc-el_5 label:eq(5)').addClass('montag');
$('.calc-el_5 label:eq(6)').addClass('balansirovka');


//Считаем и выводим итог
function setPrice(){
    
    let type = $('select[name="type"]').val();
    
    
    
    
    let wheels = +$('select[name="wheels"]').val();
    let diameter = $('select[name="diameter"]').val();
    
    let indexType = $('select[name="type"]').children('option:selected').index();
    let indexDiam = $('select[name="diameter"]').children('option:selected').index();
    
    let indexServ = $('input[name="service"]:checked').index('input[name="service"]');
    
    //Вывод всех цен на данную комбинацию
    //Коплекс
    let complex = optionPrice[type]['Комплексный шиномонтаж'][indexDiam];
    $('.complex').attr('data-price', divide(complex) );
    //Детэйлинг
    let detailing = optionPrice[type]['Комплексный шиномонтаж'][indexDiam] * 2;
    $('.detailing').attr('data-price', divide(detailing) );
    
    
    //Индивидуально
    $('.calc-el_5 .t-checkbox__control').each(function(i) {
        let el = $(this);
        let dataPrice = optionPrice[type][ el.find('input').val() ][indexDiam] * wheels;
        el.attr('data-price', divide(dataPrice) );
    });


    //ВЫВОДИМ ИТОГОВУЮ СУММУ
    // Если Комплексный
    if(indexServ==0){
        $('.calc-el_6 span').attr('data-price', divide(complex));
        $('input[name="summ"]').val(divide(complex)+' руб');
    };
    
    // Если детэйлинг
    if(indexServ==1){
        $('.calc-el_6 span').attr('data-price', divide(detailing));
        $('input[name="summ"]').val(divide(detailing)+' руб');
    };
    
    // Если Индивидуальный расчёт
    let summOption = 0;
    if(indexServ==2){
        
        $('.calc-el_5 .t-checkbox__control').each(function(i) {
            let el = $(this);
            
            if( el.find('input').is(':checked') ){
                summOption += +(el.attr('data-price').replace(/\s+/g, '')   );
            };
        });    
        $('.calc-el_6 span').attr('data-price', divide(summOption));
        $('input[name="summ"]').val(divide(summOption)+' руб');
    };
};

setTimeout(function(){
    setPrice();
}, 1000);


//Формируем блок с фото
let imageBlock = `
    <div class="image-wrp">
        <div class="image-wrp-border">
            
            <img data-img-index="0" class="t-img t-width" src="https://static.tildacdn.com/tild3565-3862-4738-a337-383334303061/image.png">
            <img data-img-index="1" class="t-img t-width" src="https://static.tildacdn.com/tild3238-6265-4332-b734-373233373539/image.png">
            <img data-img-index="2" class="t-img t-width" src="https://static.tildacdn.com/tild6162-6364-4435-a563-343139666263/image.png">
            <img data-img-index="3" class="t-img t-width" src="https://static.tildacdn.com/tild3735-3839-4537-b633-616432393961/image.png">
            <img data-img-index="4" class="t-img t-width" src="https://static.tildacdn.com/tild3239-3234-4134-b964-323637353161/image.png">
            <img data-img-index="5" class="t-img t-width" src="https://static.tildacdn.com/tild6662-3130-4138-b431-613162363333/image.png">
        
        </div>
        <div class="image-text t-text"></div>
    </div>

`;
$('.uc-calc-wheels .t-form__inputsbox').after(imageBlock);

//Показываем первое фото
$('.image-wrp img[data-img-index="0"]').show();

//При изменении типа авто
$('select[name="type"]').change(function(){
    let index = $(this).children('option:selected').index();
    $('.image-wrp img').hide();
    //Показываем нужное фото
    $('.image-wrp img[data-img-index="'+index+'"]').show();
    fillImgText();
});

//Блокируем при старте галочки
//$('.calc-el_5').addClass('block-mode-boxes');
$('.calc-el_5').addClass('block-mode-boxes');

//При изменении типа услуги
function changeServ(){
    let index = $('input[name="service"]:checked').index('input[name="service"]');
    
    //$('.calc-el_4 label').addClass('block-mode');
    $('.calc-el_5').addClass('block-mode-boxes');
    if(index==0){
        $('.calc-el_4 label:eq(0)').removeClass('block-mode');
    };
      
    if(index==1){
        $('.calc-el_4 label:eq(1)').removeClass('block-mode');
    };
    
    if(index==2){
        $('.calc-el_4 label:eq(2)').removeClass('block-mode');
        $('.calc-el_5').removeClass('block-mode-boxes');
        
    };
    
};

//При изменениях в форме
$(document).on('input change' , 'input[name="service"], .calc-el_5 input[type="checkbox"], .uc-calc-wheels select  ' , function(){
    changeServ();
    setPrice();
});


//Смена подписи фото
function fillImgText(){
    let text = $('select[name="type"]').val();
    $('.image-text').text(text);
};
fillImgText();


//Отслеживаем клик по кнопкам в формах 
$('.uc-calc-wheels').delegate(".t-submit", "click", function(event){
    
    let el = $(this);
    let block = el.closest('.t-rec');
    let form = el.closest('form');
    
    let iteration = 0
    let waitSendTimer = setInterval(function(i) {
        iteration++;

        if ( form.hasClass("js-send-form-success") || iteration>=30 ){
            clearInterval(waitSendTimer);
            $('.uc-calc-wheels').addClass('send-form');
            $('.uc-calc-wheels .t696 .t696__form-bottom-text').hide();
            $('.image-wrp').hide();
            
        };
    }, 100);   
 
});    




});    
</script>


<style>

.uc-calc-wheels .image-wrp img{
    display: none;
}

.uc-calc-wheels .t696 .t-form__inputsbox {
    max-width: none;
    width: 65%;
    padding-right: 50px;
    box-sizing: border-box;
}    

.uc-calc-wheels label.t-radio__control {
    width: 100%;
}

.uc-calc-wheels label.t-radio__control:after {
    content: attr(data-price)" руб";
    float: right;
    font-weight: 600;
}

.uc-calc-wheels label.t-checkbox__control:after {
    content: attr(data-price)" руб";
    float: right;
    font-weight: 600;
}

.calc-el_6 .t-text span:after {
    content: attr(data-price)" руб";
    float: right;
}

.uc-calc-wheels .t-form {
    display: flex;
    position: relative;
}

.uc-calc-wheels .image-wrp {
    width: 35%;
    display: block !important;
    margin-top: -15px;

}

.uc-calc-wheels .image-wrp img.t-img {
    width: 100%;
}

.uc-calc-wheels .image-wrp-border {
    display: flex;
    align-items: center;
    justify-content: center;
}

.uc-calc-wheels select.t-select {
    height: 45px;
}



.uc-calc-wheels .t696__text-wrapper {
    display: none;
}

.uc-calc-wheels .t696 .t696__content {
    padding-top: 30px;
    padding-bottom:30px;
}

.uc-calc-wheels .t696__text-wrapper {
    display: none;
}

.uc-calc-wheels .t696 .t696__content {
    padding-top: 30px;
    padding-bottom:30px;
}

.calc-el_1, .calc-el_2, .calc-el_3 {
    width: 30%;
}

.calc-el_7 {
    position: absolute;
    bottom: 100px;
    right: 0;
    width: 35%;
}

.calc-el_4 label.t-radio__control:last-child:after {
    display: none;
}

.calc-el_5 {
    width: 100%;
}


.calc-el_6 {
    width: 100%;
}

.uc-calc-wheels .t-form__inputsbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.uc-calc-wheels .t-input-subtitle {
    height: auto;
}


.uc-calc-wheels label.t-radio__control.t-text {
    font-size: 18px;
    
}

.uc-calc-wheels label.t-checkbox__control.t-text {
    font-size: 18px;
    padding-left: 30px;
    box-sizing: border-box;
}

.uc-calc-wheels label.t-radio__item.t-radio__control.t-text span,
.uc-calc-wheels label.t-checkbox__control.t-text span{
    flex-grow: 1;
}



.uc-calc-wheels .t696 .t-input-group.calc-el_5 {
    box-shadow: 0 1px 0 0 #d6d6d6;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.uc-calc-wheels .t696 .t-input-group.calc-el_4 {
    width: 100%;
    margin-bottom: 5px;
}

.uc-calc-wheels .t696 .t696__form-bottom-text {
    width: 35%;
    float: right;
    font-size: 10px;
    margin-top: -40px;
    position: relative;
    z-index: 99;

}

.uc-calc-wheels .t696 .t-form__submit {
    position: absolute;
    bottom: 40px;
    right: 0;
    width: 35%;
    height: auto;
}

.uc-calc-wheels button.t-submit {
    width: 100%;
}

.uc-calc-wheels .t-form__errorbox-middle {
    display: none;
}

.uc-calc-wheels .image-text {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
}

.block-mode{
    opacity: 0.4;
}

.block-mode-boxes{
    opacity: 0.4;
    pointer-events: none;
}

#allrecords .t-select:focus-visible {
    outline-color: transparent;
}

.js-send-form-success .t-form__inputsbox.t696__inputsbox_hidden {
    display: none;
}

.js-successbox.t-form__successbox {
    flex-grow: 1;
}

.uc-calc-wheels.send-form .t696 .t696__content {
    padding-bottom: 10px !important;
}




@media screen and (max-width:1200px){

.uc-calc-wheels select.t-select{
    font-size: 14px;
    height:40px;
}
.calc-el_1, .calc-el_2, .calc-el_3 {
    width: 33%;
}

.uc-calc-wheels .t696 .t-input-subtitle {
    padding-bottom: 5px;
}

.uc-calc-wheels .t696 .t-input-group {
    margin-bottom: 10px;
}    

.uc-calc-wheels label.t-radio__control.t-text {
    font-size: 16px;
}

.uc-calc-wheels label.t-checkbox__control.t-text {
    font-size: 16px;
}    
    
}

@media screen and (max-width: 960px){
.uc-calc-wheels .t-form {
    display: flex;
    flex-direction:column;
}
.uc-calc-wheels .t696 .t-form__inputsbox {
    max-width: none;
    width: 100%;
    padding:0;
}

.calc-el_7 {
    position: absolute;
    bottom: 100px;
    right: 0;
    width: 50%;
}
.uc-calc-wheels .t696 .t-form__submit {
    position: absolute;
    bottom: 30px;
    right: 0;
    width: 50%;
    height: auto;
}

.uc-calc-wheels .t696 .t696__form-bottom-text {
    width: 50%;
    float: right;
    font-size: 10px;
    margin-top: -25px;
}
.uc-calc-wheels .t696 .t696__content {
    padding-bottom: 40px;
}    

.uc-calc-wheels .image-wrp img.t-img {
    width: 140%;
}

.uc-calc-wheels .image-wrp {
    padding-top: 75px;
}

    
}

@media screen and (max-width: 640px){
.calc-el_1, .calc-el_2, .calc-el_3 {
    width: 100%;
}

.uc-calc-wheels label.t-checkbox__control.t-text {
    padding-left: 0px;
}

.calc-el_7 {
    position: absolute;
    bottom: -100px;
    right: 0;
    width: 100%;
}
.uc-calc-wheels .t696 .t-form__submit {
    position: absolute;
    bottom: -185px;
    right: 0;
    width: 100%;
    height: auto;
}

.uc-calc-wheels .t696 .t696__form-bottom-text {
    width: 100%;
    float: right;
    font-size: 10px;
    margin-top: 170px;
}
.uc-calc-wheels .t696 .t696__content {
    padding-bottom: 220px;
}  

.uc-calc-wheels .image-wrp {
    width: 100%;
}    
.uc-calc-wheels .image-wrp img.t-img {
    width: 90%;
}
    
}

@media screen and (max-width: 480px){


.uc-calc-wheels label.t-radio__control.t-text {
    font-size: 14px;
}
.uc-calc-wheels label.t-checkbox__control.t-text {
    font-size: 14px;
}

.calc-el_6 .t-text div{
    font-size:16px !important;
}

.uc-calc-wheels .t696 .t696__content {
    padding: 10px 5px 45px;
    padding-bottom: 230px;
}

}

</style>