Как создать калькулятор аренды авто в ZeroBlock в Tilda

Volkswagen Polo

от 3 300 руб

Стоимость за сутки

Шаг:

2200

Цена:

УСЛОВИЯ АРЕНДЫ АВТОМОБИЛЯ:

Возраст водителя - от 25 лет
Стаж от 5х лет
Депозит на автомобиль - 10000 руб
Пробег 250 км в сутки

Рассчитать стоимость аренды

Выберите период аренды

по

Суток

Или количество суток

0 руб/сутки

Итого:

0 руб

Дополнительные опции

Детское кресло

Регистратор

Спутниковая навигационная система GPS

Безлимит по километражу

Дополнительная страховка

130 ₽ в сутки

350 ₽ в сутки

550 ₽ в сутки

Curiosity about life in all its aspects, I think, is still the secret of great creative people.

Забронировать

Curiosity about life in all its aspects, I think, is still the secret of great creative people.

Как создать калькулятор аренды авто в ZeroBlock в Tilda

Создали первый Zero с изображением авто и добавили ключевые элементы:

Text - название авто (с классом car-name )
Text - цена аренды 1 дня авто (с классом car-price )
Text - шаг скидки от срока аренды (с классом step)

Создали второй Zero с калькулятором авто и добавили ключевые элементы:

Поле Date c именем datestart и классом этой формы datestart
Поле Date c именем dateend и классом этой формы dateend
Поле One Line input Field с именем days
Создали HTML и вставили в него код №2
Text для суточной цены с классом day-price
Text для итоговой цены с классом summ-price
Button со ссылкой #popup:calc-rent и классом calc-btn
Shape для доп опций 1 switcher1
Shape для доп опций 1 switcher2
Shape для доп опций 1 switcher3
Shape для доп опций 1 switcher4
Shape для доп опций 1 switcher5

Создали блок BF502N с классом uc-calc-form и ссылкой #popup:calc-rent
Добавили в неё скрытые поля с именами

carName
daySumm
daySumm
period
summDays
dopOption

Добавили блок Т123 и вставили в него код 1

Библиотека для примера (код 1)


<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css">



<script>
$( document ).ready(function() {
    
$(function(){
	var handle = $("#custom-handle");
	$("#slider").slider({
	    
	     range: 'min',
		 min: 1,
		 max: 31,
		 value: 1,
	    
	    
	    //Выводим кол-во дней в ползунок
	    
		create: function() {
			handle.text($(this).slider("value"));
		},
		slide: function(event, ui) {

		    
			handle.text( ui.value );
			//Выводим кол-во дней в поле дней
			$('input[name="days"]').val(ui.value);
			
			
			        //********************
        //Меняем календарь
        let start = $('input.t-input[name="datestart"]').val().split('/');
        let end = $('input.t-input[name="dateend"]').val().split('/');
    
        let st = $('input.t-input[name="datestart"]').val();
            if(  st=='' || st=='__/__/____'  ){
            
                let    Data = new Date(),
                TwoDay = new Date();
                TwoDay.setDate(Data.getDate()+1);
            
                let Month = Data.getMonth();
                let Day = Data.getDate();
                let Year = Data.getFullYear();
                
                Month2 = TwoDay.getMonth();
                Day2 = TwoDay.getDate();
                Year2 = TwoDay.getFullYear();
            
                //Добавить 0
                let zMonth = ("0" + (Month+1)).slice(-2);
                let zDate =  ("0" + (Day)).slice(-2);
                
                let zMonth2 = ("0" + (Month2+1)).slice(-2);
                let zDate2 =  ("0" + (Day2)).slice(-2);
                
                
                $('input.t-input[name="datestart"]').val(zDate+'/'+zMonth+'/'+Year);
                $('input.t-input[name="dateend"]').val(zDate2+'/'+zMonth2+'/'+Year2);    
              
            };
        
        
            
            $('.calc-btn').removeClass('block-btn');
        
            let date1 = new Date(start[1]+'/'+start[0]+'/'+start[2]);
            let FwoDay = new Date(date1);
            FwoDay.setDate(date1.getDate()+ui.value);
                
            let Month3 = FwoDay.getMonth();
            let Day3 = FwoDay.getDate();
            let Year3 = FwoDay.getFullYear();
        
            //Добавить 0
            let zMonth3 = ("0" + (Month3+1)).slice(-2);
            let zDate3 =  ("0" + (Day3)).slice(-2);
                
            //Выводим крнечную дату +1
            $('input.t-input[name="dateend"]').val(zDate3+'/'+zMonth3+'/'+Year3);
            //********************
			
			
			
			
			getPrice();
			
		}
	});
});    
    

//Функция разрядности
function divideNumberByPieces(x, delimiter) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, delimiter || " ");
};


//Считаем прайс
function getPrice(){
    
    //Получаем данные
    let price = +$('.car-price .tn-atom').text().replace(/[^+\d]/g, '');//Цена за сутки
    let step = +$('.step .tn-atom').text().replace(/[^+\d]/g, '');//Шаг
    
    let days = +$('input[name="days"]').val();//Дни
    
    
    //Опции
    let opt1 = 0, opt2 = 0, opt3 = 0, opt4 = 0, opt5 = 0;
    
    //Формируем цену опций
    if($('.switcher1').hasClass('switcheron')) opt1=130;
    if($('.switcher2').hasClass('switcheron')) opt2=130;
    if($('.switcher3').hasClass('switcheron')) opt3=130;
    if($('.switcher4').hasClass('switcheron')) opt4=350;
    if($('.switcher5').hasClass('switcheron')) opt5=550;
    
    //Проверка на лимит 2500 руб для опций Детское кресло, Регистратор , Спутниковая навигационная система GPS
    opt1 = opt1*days;
    opt2 = opt2*days;
    opt3 = opt3*days;
    opt4 = opt4*days;
    opt5 = opt5*days;
    
    
    if( opt1>2500  ) opt1 = 2500;
    if( opt2>2500  ) opt2 = 2500;
    if( opt3>2500  ) opt3 = 2500;
    
    
    
    let summOpt = opt1+opt2+opt3+opt4+opt5;
    

    // Итоги
    let stPrice = price - step*(days-1);
    let itog = stPrice * days + summOpt;
    
    
    //Выводим итоги в блок
    $('.day-price .tn-atom').html( divideNumberByPieces(stPrice)+' руб/сутки' );
    $('.summ-price .tn-atom').html(divideNumberByPieces(itog)+' руб' );
    
    //Сохраняем в LS
    localStorage.setItem('startDate', $('input.t-input[name="datestart"]').val() ); //старт
    localStorage.setItem('finishDate', $('input.t-input[name="dateend"]').val() ); //окончание
    localStorage.setItem('countDays', $('input[name="days"]').val() ); //дни
    
    
    
};

//Вычисляем разницу между датами
function btweenDate(){
    
    let start = $('input.t-input[name="datestart"]').val().split('/');
    let end = $('input.t-input[name="dateend"]').val().split('/');
    

    let st = $('input.t-input[name="datestart"]').val();
    if(  st=='' || st=='__/__/____'  ){
    
        let    Data = new Date(),
        TwoDay = new Date();
        TwoDay.setDate(Data.getDate()+1);
    
        let Month = Data.getMonth();
        let Day = Data.getDate();
        let Year = Data.getFullYear();
        
        Month2 = TwoDay.getMonth();
        Day2 = TwoDay.getDate();
        Year2 = TwoDay.getFullYear();
    
        //Добавить 0
        let zMonth = ("0" + (Month+1)).slice(-2);
        let zDate =  ("0" + (Day)).slice(-2);
        
        let zMonth2 = ("0" + (Month2+1)).slice(-2);
        let zDate2 =  ("0" + (Day2)).slice(-2);
        
        
        $('input.t-input[name="datestart"]').val(zDate+'/'+zMonth+'/'+Year);
        $('input.t-input[name="dateend"]').val(zDate2+'/'+zMonth2+'/'+Year2);    
      
    };
        
        
        
        $('.calc-btn').removeClass('block-btn');
    
        let date1 = new Date(start[1]+'/'+start[0]+'/'+start[2]);
        let date2 = new Date(end[1]+'/'+end[0]+'/'+end[2]);
    
        let milli_secs = date2.getTime() - date1.getTime();
        let days = milli_secs / (1000 * 3600 * 24);        
        
    
        //Если дней меньше 1
        if(days<1){
            
            days = 1;
            let FwoDay = new Date(date1);
            FwoDay.setDate(date1.getDate()+1);
            
            let Month3 = FwoDay.getMonth();
            let Day3 = FwoDay.getDate();
            let Year3 = FwoDay.getFullYear();
    
            //Добавить 0
            let zMonth3 = ("0" + (Month3+1)).slice(-2);
            let zDate3 =  ("0" + (Day3)).slice(-2);
            
            //Выводим крнечную дату +1
            $('input.t-input[name="dateend"]').val(zDate3+'/'+zMonth3+'/'+Year3);
     
        };
        
        //Если дней больше 31
        if(days>31){
            
            days = 31;
            let FwoDay2 = new Date(date1);
            FwoDay2.setDate(date1.getDate()+31);
            
            let Month4 = FwoDay2.getMonth();
            let Day4 = FwoDay2.getDate();
            let Year4 = FwoDay2.getFullYear();
    
            //Добавить 0
            let zMonth4 = ("0" + (Month4+1)).slice(-2);
            let zDate4 =  ("0" + (Day4)).slice(-2);
            
            //Выводим крнечную дату +1
            $('input.t-input[name="dateend"]').val(zDate4+'/'+zMonth4+'/'+Year4);
     
        };
        
        
    
        $('input[name="days"]').val(days);
        $('input[name="days"]')[0].dispatchEvent(new Event('input', { bubbles: true }));
    

};


//При потере фокуса в поле даты
$('.uc-calc-car').on('blur input click', '.t-datepicker, .t_datepicker__day-cell', function(){
    setTimeout(function(){
        btweenDate();
    }, 500);
});


//При вводе в поле дней
$('.uc-calc-car').on('input', 'input[name="days"]', function(){
    
    let days = +$(this).val();
    
    if(days<=1){
        $(this).val(1);
        days=1;
    };
    
    if(days>=31){
        $(this).val(31);
        days=31;
    };
    
    $("#slider").slider("value", days);
    $('#custom-handle').text(days);
    
        //********************
        //Меняем календарь
        let start = $('input.t-input[name="datestart"]').val().split('/');
        let end = $('input.t-input[name="dateend"]').val().split('/');
    
        let st = $('input.t-input[name="datestart"]').val();
            if(  st=='' || st=='__/__/____'  ){
            
                let    Data = new Date(),
                TwoDay = new Date();
                TwoDay.setDate(Data.getDate()+1);
            
                let Month = Data.getMonth();
                let Day = Data.getDate();
                let Year = Data.getFullYear();
                
                Month2 = TwoDay.getMonth();
                Day2 = TwoDay.getDate();
                Year2 = TwoDay.getFullYear();
            
                //Добавить 0
                let zMonth = ("0" + (Month+1)).slice(-2);
                let zDate =  ("0" + (Day)).slice(-2);
                
                let zMonth2 = ("0" + (Month2+1)).slice(-2);
                let zDate2 =  ("0" + (Day2)).slice(-2);
                
                
                $('input.t-input[name="datestart"]').val(zDate+'/'+zMonth+'/'+Year);
                $('input.t-input[name="dateend"]').val(zDate2+'/'+zMonth2+'/'+Year2);    
              
            };
        
        
            
            $('.calc-btn').removeClass('block-btn');
        
            let date1 = new Date(start[1]+'/'+start[0]+'/'+start[2]);
            let FwoDay = new Date(date1);
            FwoDay.setDate(date1.getDate()+days);
                
            let Month3 = FwoDay.getMonth();
            let Day3 = FwoDay.getDate();
            let Year3 = FwoDay.getFullYear();
        
            //Добавить 0
            let zMonth3 = ("0" + (Month3+1)).slice(-2);
            let zDate3 =  ("0" + (Day3)).slice(-2);
                
            //Выводим крнечную дату +1
            $('input.t-input[name="dateend"]').val(zDate3+'/'+zMonth3+'/'+Year3);
            //********************
        


    getPrice();
});


//При загрузке страницы
setTimeout(function(){
    
    
    $('input.t-input[name="days"]').attr('type','number').val(1);//переводим поле дней в цифровое
    $('input.t-input[name="datestart"]').attr('autocomplete','off'); //отключаем датам автозаполнение
    $('input.t-input[name="dateend"]').attr('autocomplete','off');  //отключаем датам автозаполнение
    
    
    //Если в хранилище есть даты, то выгружаем их, иначе ставим текущие
    if ( localStorage.getItem('countDays') == null) {
        //Выставляем дату
        let    Data = new Date(),
             TwoDay = new Date();
        TwoDay.setDate(Data.getDate()+1);
        
        let Month = Data.getMonth();
        let Day = Data.getDate();
        let Year = Data.getFullYear();
        
        Month2 = TwoDay.getMonth();
        Day2 = TwoDay.getDate();
        Year2 = TwoDay.getFullYear();
    
        //Добавить 0
        let zMonth = ("0" + (Month+1)).slice(-2);
        let zDate =  ("0" + (Day)).slice(-2);
        
        let zMonth2 = ("0" + (Month2+1)).slice(-2);
        let zDate2 =  ("0" + (Day2)).slice(-2);
        
        
        $('input.t-input[name="datestart"]').val(zDate+'/'+zMonth+'/'+Year);
        $('input.t-input[name="dateend"]').val(zDate2+'/'+zMonth2+'/'+Year2);

    }else{
        
        //Заполняем поля из LS
        $('input.t-input[name="datestart"]').val( localStorage.getItem('startDate') );
        $('input.t-input[name="dateend"]').val( localStorage.getItem('finishDate') );    
        $('input.t-input[name="days"]').val( localStorage.getItem('countDays') );    
        
    };
        
    

    getPrice();
    btweenDate();
    
}, 2500);

//Переключение опций
$('div[class*="switcher"]').click(function(){
   $(this).toggleClass('switcheron');
   getPrice();
});


//При вызове формы из калькулятора
$('.calc-btn').click(function(){
    
    $('.form-result').remove();
    
    //Получаем все данные из полей и текста
    let carName = $('.car-name .tn-atom').text().trim();//Название авто
    let dayPrice = $('.day-price .tn-atom').text().trim();//Стоимость в сутки
    let summPrice = $('.summ-price .tn-atom').text().trim();//Итоговая цена
    
    let d1 = $('input.t-input[name="datestart"]').val();// дата страта
    let d2 = $('input.t-input[name="dateend"]').val(); // дата окончания
    let col = $('input.t-input[name="days"]').val(); // кол-во дней
    
    //Опции
    let opt1 = '', opt2 = '', opt3 = '', opt4 = '', opt5 = '';
    
    if($('.switcher1').hasClass('switcheron')) opt1= $('.opt-name-1 .tn-atom').text();
    if($('.switcher2').hasClass('switcheron')) opt2= $('.opt-name-2 .tn-atom').text();
    if($('.switcher3').hasClass('switcheron')) opt3= $('.opt-name-3 .tn-atom').text();
    if($('.switcher4').hasClass('switcheron')) opt4= $('.opt-name-4 .tn-atom').text();
    if($('.switcher5').hasClass('switcheron')) opt5= $('.opt-name-5 .tn-atom').text();
    
    let commonOption = '';
    if(opt1!='') commonOption += opt1+'; ';
    if(opt2!='') commonOption += opt2+'; ';
    if(opt3!='') commonOption += opt3+'; ';
    if(opt4!='') commonOption += opt4+'; ';
    if(opt5!='') commonOption += opt5+'; ';
    
    if(commonOption=='') commonOption = 'Нет';
    
    
    
    let fillText = `
        <div class="form-result t-text">
            <div class="form-result-name-txt">Автомобиль: </div><div class="form-result-name">${carName}</div>
            <div class="form-result-price-txt">Стоимость в сутки: </div><div class="form-result-price">${dayPrice}</div>
            <div class="form-result-summPrice-txt">Итого: </div><div class="form-result-summPrice">${summPrice}</div>
            
            <div class="form-result-d1-txt">Даты аренды: </div><div class="form-result-d1">${d1} - ${d2}</div>
            <div class="form-result-col-txt">Кол-во дней аренды: </div><div class="form-result-col">${col}</div>
            
            <div class="form-result-option-txt">Выбранные опции: </div><div class="form-option-col">${commonOption}</div>
            
            
            
            
        </div>
    
    `;
    
    
    $('.uc-calc-form .t702__text-wrapper').append(fillText);
    
    $('input[name="carName"]').val(carName);
    $('input[name="daySumm"]').val(dayPrice);
    $('input[name="finalSumm"]').val(summPrice);
    $('input[name="period"]').val(d1+' - '+d2);
    $('input[name="summDays"]').val(col);
    $('input[name="dopOption"]').val(commonOption);
    
     
});




//Запрет ввода букв в дни
$('.uc-calc-car').on('input', 'input', function(){
    this.value = this.value.replace(/[^0-9]/g, '');
});

//Запрет Enter в форме
$(document).on("keydown", ".t-form", function(event) {return event.key != "Enter";});

});
</script>



<style>
#custom-handle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    top: 46%;
    margin-top: -20px;
    text-align: center;
    line-height: 24px;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active,a.ui-button:active,.ui-button:active,.ui-button.ui-state-active:hover {
    border: 1px solid #c5c5c5;
    background: #f6f6f6;
    font-weight: normal;
    color: #454545;
}

.ui-icon-background,.ui-state-active .ui-icon-background {
    border: none;
    background: none;
}
.ui-slider-range.ui-corner-all.ui-widget-header.ui-slider-range-min {
    background:#d1d1d1;
    border-radius: 8px;
}

div#slider {
    border-radius: 8px;
    border: none;
}

</style>


<style>
.uc-calc-car div[class*="switcher"] .tn-atom {
    position: relative;
    cursor:pointer;
}
.uc-calc-car div[class*="switcher"] .tn-atom:before {
    content: "";
    background-color: #fff;
    position: absolute;
    height: 16px;
    width:16px;
    top: -2px;
    border-radius:100%;
    left:0;
    transition:all 0.3s ease-in-out;
}
.uc-calc-car .switcheron  .tn-atom:before {
    left:50% !important;
    
}
.uc-calc-car .switcheron .tn-atom:before {
    background-color: #01AB31 !important;
}


svg.t-datepicker__icon {
    /*display: none;*/
}

input.t-input[name="days"] {
    padding: 0 10px;
}

.block-btn{
    opacity: 0.3;
    pointer-events: none;
}

.t396__elem.step, .t396__elem.step-txt,
.t396__elem.price-txt , .t396__elem.car-price{
    display: none;
}


.form-result.t-text {display: grid;grid-template-columns: 1fr 2fr;text-align: left;padding: 20px 0 10px;font-size: 13px;}

.form-result div:nth-child(odd) {
    font-weight: 500;
}

.form-result.t-text div {
    box-shadow: 0 0 0 1px #dbdbdb;
    padding: 4px;
    margin-top: 1px;
    margin-right: 1px;
    padding-left: 8px;
}


</style>

Библиотека для примера (код 2)


<div id="slider" class="t-text">
	<div id="custom-handle" class="ui-slider-handle "></div>
</div>