Как сделать калькулятор транспортировки авто по прайсу в Tilda
Узнать примерную стоимость перевозки авто
Перевозка водителем

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

1
Создали форму в ZeroBlock и задали имена ключевым полям
*Дистанция | range slider - name| distance
*Способ | dropdown - name | deliverytype
Заполнение:
Водителем = 319
Прицепом = 359
Трейлером = 399
* Стоимость | calculator
Формула | deliverytype
2
Создали Shape с картинкой и добавили ему класс typeimage
3
Создали Text с картинкой и добавили ему класс typetext
4
Добавили оба кода на страницу в блок Другое - Т123
Во втором коде указали ID блока
$('#rec255835269').addClass('cardeliv');

Прописали ссылки на картинки и цены по прайсу
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Получить полное видео
Посмотреть все видео
Создаём калькулятор по транспортировке авто по прайсу с условиями.
Длительность видео: 29 минут
Фрагмент видео
Посмотреть видео в личном кабинете ►
Библиотека для примера

<style>
.cardeliv .tn-atom__form  .t-form__inputsbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-radius: 15px;
    border: 2px solid #fff;
    padding: 25px;
    background-color: rgba(255, 255, 255, 0.1);
}    

.cardeliv .tn-atom__form  .t-input-subtitle , .tn-atom__form   .t-input-title { height: auto}
.cardeliv .tn-atom__form  .t-input-group {flex-basis: 48%}
.cardeliv .tn-atom__form .t-input-group.t-input-group_rg {flex-basis: 100%}
.cardeliv .tn-atom__form .t-input-group.t-input-group_sb {flex-basis: 30%}
.cardeliv .tn-atom__form .t-input-group.t-input-group_fr {
    display: flex;
    align-items: center;
    margin-bottom: 0 !important;
    margin-top: 20px;
}
.cardeliv .tn-atom__form .t-input-group.t-input-group_fr .t-input-subtitle {
    padding-bottom: 0 !important;
}
.cardeliv .tn-form__submit {
    margin-top: 20px;
}
.typeimage {
    filter: grayscale(1);
    border-radius: 15px;
    overflow: hidden;
}
.cardeliv .typebacktext{
    border-radius: 0 0 15px 15px;
    overflow: hidden;
}
.cardeliv .t-form .t-submit {
    transition:all 0.2s;
}
.cardeliv .t-form .t-submit:hover {
    background-color: #e2e2e2 !important;
}

.tn-atom option {
    color: #000 !important;
}

@media screen and (max-width:640px){
.cardeliv .tn-atom__form .t-input-group.t-input-group_sb {flex-basis: 48%} 
.cardeliv .tn-atom__form .t-input-group.t-input-group_fr {
    margin-top: 0;
}
.cardeliv .tn-atom__form .t-input-group_fr .t-input-subtitle {
    width: 50%;
    margin-left: 15px;
}
.cardeliv .tn-form__submit {
    flex-grow: 1;
}
}

@media screen and (max-width:480px){
.cardeliv .tn-atom__form  .t-form__inputsbox {
    display: block;
}
</style>


<script>
$( document ).ready(function() {
//ID блока с формой   
$('#rec255835269').addClass('cardeliv');
//Подписи для картинки и ссылки к картинкам
let imageList = [
    ['Перевозка водителем' , 'https://static.tildacdn.com/tild3339-3332-4833-a164-656363386564/918020273_0157556532.jpg'],
    ['Перевозка на прицепе' , 'https://static.tildacdn.com/tild3365-3239-4763-b933-623832366135/_57.JPG'],
    ['Перевозка на трейлере' , 'https://static.tildacdn.com/tild6562-3830-4138-b134-663539363563/Car-Trailer5.jpg']
    ];
    
//Прайс на 3 типа перевозки    
let priceDelivery = {
0:  [50, [89,249,299]],
1:  [100,[129,249,299]],
2:  [150,[159,299,359]],
3:  [200,[179,299,359]],
4:  [250,[199,299,359]],
5:  [300,[219,299,359]],
6:  [350,[249,359,399]],
7:  [400,[269,359,399]],
8:  [450,[289,359,399]],
9:  [500,[319,359,399]],
10: [550,[329,359,399]],
11: [600,[349,359,399]],
12: [650,[369,359,399]],
13: [700,[389,359,399]],
14: [750,[409,359,399]],
15: [800,[429,399,449]],
16: [850,[449,399,449]],
17: [900,[469,399,449]],
18: [950,[489,399,449]]

};
function changeImg(el){
    $('.typeimage .tn-atom').css('background-image' , 'url("'+imageList[el][1]+'")');
    $('.typetext .tn-atom').text(imageList[el][0]);
    
};
//При изменении способа доставки 
   $(".tn-atom__form").on('change', 'select[name="deliverytype"]', function() {       
      changeImg($(this)[0].selectedIndex);
   }); 
$( window ).resize(function() {changeImg(0)});   
   
//При изменении дистанции
   $(".tn-atom__form").on('change', 'input[name="distance"]', function() {       
      let distanceVal = +$(this).val();
      let priceLine;
      $.each(priceDelivery, function(index, value){
       if(distanceVal >= priceDelivery[index][0]){
       }else{
            priceLine = priceDelivery[index-1];
            return false;
       };
      });
      
      if(priceLine){
        $('select[name="deliverytype"] option').each(function( index ) {
            $(this).attr('data-calc-value', priceLine[1][index]);
            $('select[name="deliverytype"]' ).change(); 
      });
      };
      
   });   
});    
</script>
Made on
Tilda