Как сделать калькулятор шиномонтажа в Tilda
Цены на шиномонтаж
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности
Как сделать калькулятор шиномонтажа в 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%;
padding-top: 30px;
display: block !important;
}
.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;
}
.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>
