<script>
document.addEventListener("DOMContentLoaded", function() {
(function () {
// ПРАЙС ЛЕГКОВОЙ
// Опции
const 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],
},
};
function divide(x, delimiter) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, delimiter || " ");
}
// Вспомогательные функции для работы с DOM
function getElement(selector) {
const element = document.querySelector(selector);
if (!element) {
console.warn(`Элемент не найден: ${selector}`);
}
return element;
}
function getElements(selector) {
const elements = document.querySelectorAll(selector);
if (elements.length === 0) {
console.warn(`Элементы не найдены: ${selector}`);
}
return elements;
}
// Размечаем поля в форме
const inputGroups = getElements('.uc-calc-wheels .t-input-group');
if (inputGroups.length > 0) {
inputGroups.forEach((group, i) => {
group.classList.add('calc-el_' + (i + 1));
});
}
// Добавляем спец классы
const calcEl4 = getElement('.calc-el_4');
if (calcEl4) {
const labels4 = calcEl4.querySelectorAll('label');
if (labels4[0]) labels4[0].classList.add('complex');
if (labels4[1]) labels4[1].classList.add('detailing');
}
const calcEl5 = getElement('.calc-el_5');
if (calcEl5) {
const labels5 = calcEl5.querySelectorAll('label');
const classNames = ['snyatie', 'ustanovka', 'moika', 'chistka', 'demontag', 'montag', 'balansirovka'];
labels5.forEach((label, i) => {
if (classNames[i]) {
label.classList.add(classNames[i]);
}
});
}
// Считаем и выводим итог
function setPrice() {
const typeSelect = getElement('select[name="type"]');
const wheelsSelect = getElement('select[name="wheels"]');
const diameterSelect = getElement('select[name="diameter"]');
const serviceInputs = getElements('input[name="service"]');
if (!typeSelect || !wheelsSelect || !diameterSelect || serviceInputs.length === 0) {
console.warn('Не все необходимые элементы формы найдены');
return;
}
const type = typeSelect.value;
const wheels = parseInt(wheelsSelect.value) || 0;
const diameter = diameterSelect.value;
const indexType = typeSelect.selectedIndex;
const indexDiam = diameterSelect.selectedIndex;
let checkedService = null;
let indexServ = -1;
serviceInputs.forEach((input, i) => {
if (input.checked) {
checkedService = input;
indexServ = i;
}
});
// Вывод всех цен на данную комбинацию
// Комплекс
const complex = optionPrice[type]?.['Комплексный шиномонтаж']?.[indexDiam] || 0;
const complexElement = getElement('.complex');
if (complexElement) complexElement.setAttribute('data-price', divide(complex));
// Детэйлинг
const detailing = complex * 2;
const detailingElement = getElement('.detailing');
if (detailingElement) detailingElement.setAttribute('data-price', divide(detailing));
// Индивидуально
const checkboxControls = getElements('.calc-el_5 .t-checkbox__control');
checkboxControls.forEach((control, i) => {
const input = control.querySelector('input');
if (input && optionPrice[type] && optionPrice[type][input.value]) {
const dataPrice = optionPrice[type][input.value][indexDiam] * wheels;
control.setAttribute('data-price', divide(dataPrice));
}
});
// ВЫВОДИМ ИТОГОВУЮ СУММУ
const resultSpan = getElement('.calc-el_6 span');
const summInput = getElement('input[name="summ"]');
// Если Комплексный
if (indexServ === 0) {
if (resultSpan) resultSpan.setAttribute('data-price', divide(complex));
if (summInput) summInput.value = divide(complex) + ' руб';
}
// Если детэйлинг
if (indexServ === 1) {
if (resultSpan) resultSpan.setAttribute('data-price', divide(detailing));
if (summInput) summInput.value = divide(detailing) + ' руб';
}
// Если Индивидуальный расчёт
let summOption = 0;
if (indexServ === 2) {
checkboxControls.forEach(control => {
const input = control.querySelector('input');
if (input && input.checked) {
const price = control.getAttribute('data-price');
if (price) {
summOption += parseInt(price.replace(/\s+/g, '')) || 0;
}
}
});
if (resultSpan) resultSpan.setAttribute('data-price', divide(summOption));
if (summInput) summInput.value = divide(summOption) + ' руб';
}
}
setTimeout(function() {
setPrice();
}, 1000);
// Формируем блок с фото
const formInputsBox = getElement('.uc-calc-wheels .t-form__inputsbox');
if (formInputsBox) {
const imageBlock = document.createElement('div');
imageBlock.className = 'image-wrp';
imageBlock.innerHTML = `
<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" style="display: none;">
<img data-img-index="1" class="t-img t-width" src="https://static.tildacdn.com/tild3238-6265-4332-b734-373233373539/image.png" style="display: none;">
<img data-img-index="2" class="t-img t-width" src="https://static.tildacdn.com/tild6162-6364-4435-a563-343139666263/image.png" style="display: none;">
<img data-img-index="3" class="t-img t-width" src="https://static.tildacdn.com/tild3735-3839-4537-b633-616432393961/image.png" style="display: none;">
<img data-img-index="4" class="t-img t-width" src="https://static.tildacdn.com/tild3239-3234-4134-b964-323637353161/image.png" style="display: none;">
<img data-img-index="5" class="t-img t-width" src="https://static.tildacdn.com/tild6662-3130-4138-b431-613162363333/image.png" style="display: none;">
</div>
<div class="image-text t-text"></div>
`;
formInputsBox.parentNode.insertBefore(imageBlock, formInputsBox.nextSibling);
// Показываем первое фото
const firstImage = getElement('.image-wrp img[data-img-index="0"]');
if (firstImage) firstImage.style.display = 'block';
}
// При изменении типа авто
const typeSelect = getElement('select[name="type"]');
if (typeSelect) {
typeSelect.addEventListener('change', function() {
const index = this.selectedIndex;
const images = getElements('.image-wrp img');
images.forEach(img => {
img.style.display = 'none';
});
const targetImage = getElement('.image-wrp img[data-img-index="' + index + '"]');
if (targetImage) targetImage.style.display = 'block';
fillImgText();
});
}
// Блокируем при старте галочки
if (calcEl5) {
calcEl5.classList.add('block-mode-boxes');
}
// При изменении типа услуги
function changeServ() {
const serviceInputs = getElements('input[name="service"]');
const calcEl4Labels = getElements('.calc-el_4 label');
if (serviceInputs.length === 0 || calcEl4Labels.length === 0) return;
let checkedIndex = -1;
serviceInputs.forEach((input, i) => {
if (input.checked) {
checkedIndex = i;
}
});
// Блокируем все
calcEl4Labels.forEach(label => {
label.classList.add('block-mode');
});
if (calcEl5) {
calcEl5.classList.add('block-mode-boxes');
}
// Разблокируем нужные
if (checkedIndex === 0 && calcEl4Labels[0]) {
calcEl4Labels[0].classList.remove('block-mode');
}
if (checkedIndex === 1 && calcEl4Labels[1]) {
calcEl4Labels[1].classList.remove('block-mode');
}
if (checkedIndex === 2 && calcEl4Labels[2]) {
calcEl4Labels[2].classList.remove('block-mode');
if (calcEl5) calcEl5.classList.remove('block-mode-boxes');
}
}
// При изменениях в форме
function handleFormChanges() {
changeServ();
setPrice();
}
const formElements = getElements('input[name="service"], .calc-el_5 input[type="checkbox"], .uc-calc-wheels select');
formElements.forEach(element => {
element.addEventListener('change', handleFormChanges);
if (element.type === 'checkbox' || element.tagName === 'SELECT') {
element.addEventListener('input', handleFormChanges);
}
});
// Смена подписи фото
function fillImgText() {
const typeSelect = getElement('select[name="type"]');
const imageText = getElement('.image-text');
if (typeSelect && imageText) {
imageText.textContent = typeSelect.value;
}
}
fillImgText();
// Отслеживаем клик по кнопкам в формах
const calcWheels = getElement('.uc-calc-wheels');
if (calcWheels) {
calcWheels.addEventListener('click', function(event) {
if (event.target.classList.contains('t-submit') || event.target.closest('.t-submit')) {
const submitButton = event.target.classList.contains('t-submit') ? event.target : event.target.closest('.t-submit');
const block = submitButton.closest('.t-rec');
const form = submitButton.closest('form');
if (!form) return;
let iteration = 0;
const waitSendTimer = setInterval(function() {
iteration++;
if (form.classList.contains("js-send-form-success") || iteration >= 30) {
clearInterval(waitSendTimer);
calcWheels.classList.add('send-form');
const formBottomText = calcWheels.querySelector('.t696 .t696__form-bottom-text');
if (formBottomText) formBottomText.style.display = 'none';
const imageWrp = calcWheels.querySelector('.image-wrp');
if (imageWrp) imageWrp.style.display = 'none';
}
}, 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>