Сейчас узнаем, какой подарок выпадет именно Вам

Крутите колесо

Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом

100

#2470a1

Техническое обслуживание
автомобилей NISSAN

В специализированном центре на Радищева 15

Рассчитать стоимость

РАССЧИТАЙТЕ СТОИМОСТЬ ТО

Вашего NISSAN в 3 клика

Показать полную смету

ЗАПИСАТЬСЯ НА ОБСЛУЖИВАНИЕ

We work with love

Quality

We are the leading firm by delivering quality and value to our clients. We like what we do.

Experience

All our professionals have more than 5 years of legal experiences. They use their knowledge in work.

Presents

We like to make people happy. We ask our clients about their birthday and prepare cool presents.

Support

Our managers are always ready to answer your questions. You can call us at the weekends and at night.

Flexibility

This method lets us to get success in problems of all levels.

Efficiency

We take care about our clients time. Just call us — and we will help you with all the questions.

Создаём сметный калькулятор с подгрузкой данных из других страниц в Tilda

Этот сметный калькулятор содержит в себе 3 выпадающих списка для выбора Модели/Комплектации/Пробега. Опираясь на сделанный выбор он выводит смету, которую подгружает с другой страницы. Тем самым мы не перегружаем основную страницу пассивным контентом.

Как выполнили данный пример:
1. Создали 2-е страницы
- Основная mo-tilda.ru/loadcalc
- Для содержимого калькулятора mo-tilda.ru/loadcalcontent
****ОСНОВНАЯ СТРАНИЦА*****
2. На основной страницы создали блок BF203N и добавили в нём 3 выпадающих списка. Каждому списку задали системное имя соответственно:
modelauto
modification
probeg

3. Заполнили список с моделями авто
Модель авто*
Murano (c 2015)
Patfinder (c 2013)
Sentra (c 2014)

4. Заполнили список с модификациями авто
Модификация авто*

5. Заполнили список пробега авто
Пробег или время*
15000 или 1 год
30000 или 2 года
45000 или 3 года

6. Добавили на страницу блок Другое►Т123 и вставили в него блок:
<div id="loadcarpic"></div>

7. Добавили на страницу блок Текстовый блок►ТХ05, создали в нём надпись "Показать полную смету" и задали ей ссылку #showfull

8. Добавили на страницу блок Другое►Т123 и вставили в него блоки:
<div id="loadtable"></div>
<div id="loadprice"></div>

9. Добавили на страницу блок Форма и кнопка► BF102.
Оставили одну кнопку и прописали ей ссылку для вызова popUp окна
#popup:myform

10. Добавили на страницу блок Другое►Т123 с основным кодом калькулятора под номером 1
В этом коде прописали модификации авто:

var murano = ['3.5л., бензин, 249 л.с., АКПП'];
var pathfinder = ['2.5л., дизель, 190 л.с., АКПП', '2.5л., дизель, 190 л.с., МКПП', '3.0л., дизель, 231 л.с., АКПП'];
var sentra = ['1.6л., бензин, 117 л.с., МКПП', '1.6л., бензин, 117 л.с., CVT'];

Прописали нужные адреса блоков фотографий автомобилей из другой страницы:

//Если выбрали Murano if (modelplace == 1) { selectcar = murano; showmdf(); $('#loadcarpic').load('https://mo-tilda.ru/loadcalcontent #rec65847993');replacecar();};

//Если выбрали Pathfinder if (modelplace == 2) { selectcar = pathfinder; showmdf();$('#loadcarpic').load('https://mo-tilda.ru/loadcalcontent #rec65848025');replacecar(); };

//Если выбрали Sentra if (modelplace == 3) { selectcar = sentra; showmdf(); $('#loadcarpic').load('https://mo-tilda.ru/loadcalcontent #rec65848028');replacecar();}; });

Прописали нужные адреса блоков смет для соответствующих комбинаций вкладок:

//MURANO
//15000
//Если выбран первый авто, его первая комплектация и пробег- первый в списке, то
if (modelplace == 1 && modiflplace == 1 && probegplace == 1 ){
$('#loadtable').load('https://mo-tilda.ru/loadcalcontent #rec65786403');
$('#loadprice').load('https://mo-tilda.ru/loadcalcontent #rec65886679'); $('#loadprice').slideDown(); };

11. Добавили на страницу блок Другое►Т123 со стилями для подгружаемых данных: фото и сметные таблицы. Код под номером 2

12. Добавили на страницу блок Другое►Т123 со стилями для нашей основной формы-калькулятора. Код под номером 3

****ДОПОЛНИТЕЛЬНАЯ СТРАНИЦА С КОНТЕНТОМ*****

Создали блоки:
1. Для фото автомобиля Изображение ►IM01
2. Для сметной таблицы Тарифы►PL310
3. Для итоговых цен Преимущества►FR403

Пример страницы можно увидеть по адресу
https://mo-tilda.ru/loadcalcontent

<style>
/*Скрываем лишнюю кнопку*/
  .t690 .t-submit {
      display:none;
  }  
/*Стиль блокировки списка*/
 .selecblk{
      opacity: 0.6;
      pointer-events: none;
 }
 /*Скрываем на старте ненужные блоки*/
 #loadtable , [data-record-type="37"] , [data-record-type="208"]{
     display:none;
 }
 
/*Стиль для поля Select - Вызов*/
.startselect {
   box-shadow: inset 11px 0px 0px 0px #ff8800;
}
/*Стиль для поля Select - Завершено*/
.endselect {
  box-shadow: inset 0px 6px 16px 0px #afafaf;
}
/*Стиль для поля Select - Анимация*/
.t-select {
     transition:all 0.5s cubic-bezier(0, 0, 0.8, 1.0);
}

 
</style>

<script>
$( document ).ready(function() {
    
   
    
//Создаём массивы для модификаций под каждую марку авто   
var selectcar = [];
var sostav = 0;
var modelplace = 0;
var modiflplace = 0;
var probegplace = 0;

var murano =     ['3.5л., бензин, 249 л.с., АКПП'];    
var pathfinder = ['2.5л., дизель, 190 л.с., АКПП',
                  '2.5л., дизель, 190 л.с., МКПП',
                  '3.0л., дизель, 231 л.с., АКПП'];    
var sentra =     ['1.6л., бензин, 117 л.с., МКПП',
                  '1.6л., бензин, 117 л.с., CVT'];     
         
         
//Задаем списку моделей авто нужный цвет
 $('[name="modelauto"]').addClass("startselect");

                  
//Блокируем список Модификация и Пробег 
function blocklist(){
      $('[name="modification"]').parent(".t-select__wrapper ").addClass("selecblk");
      $('[name="probeg"]').parent(".t-select__wrapper ").addClass("selecblk");
};
blocklist();

//Функция очистки прайса
function clearprice(){
    //Скрываем таблицы с ценами
     $('#loadtable, #loadprice').slideUp();
     $('[data-record-type="37"] , [data-record-type="208"]').slideUp();
};

//Функция вывода модификаций авто
function showmdf(){
      //Кол-во элементов в списке
      sostav = selectcar.length;
      //Добавляем поле в список со словом Модификация*
       $('[name="modification"]').append($('<option value="Модификация*">Модификация*</option>')); 
      //Цикл для наполнения списка
      for (var i = 0; i < sostav ; i++) {
      $('[name="modification"]').append($('<option value="'+selectcar[i]+'">'+selectcar[i]+'</option>'));
};};

//Функция смены фото авто
function replacecar(){
     $('#loadcarpic').fadeOut(0);
     $('#loadcarpic').fadeIn(1500);
};

//Когда изменяют модель авто, то 
   $('[name="modelauto"]').change(function() {    
 //Блокируем список Модификация и Пробег 
   blocklist();
 //Очищаем прайсы
clearprice();  
//Очищаем список модификаций
   $('[name="modification"]').empty();
//Активируем первый пункт поля пробег
 $("select[name='probeg'] option:first").prop('selected', true);
// Получаем номер элемента в списке моделей     
 modelplace = $(this)[0].selectedIndex;      
//Если это позиция 0, то
 if (modelplace == 0) {
       //Прописываем первый пункт в списке
       $('[name="modification"]').append($('<option value="Модификация*">Модификация*</option>'));
       //Очищаем блок с фото авто 
       $('#loadcarpic').empty();
       //Задаем спискам стили цветовые
       $('[name="modelauto"]').removeClass("endselect").addClass("startselect");
       $('[name="probeg"]').removeClass("startselect");
       $('[name="modification"]').removeClass("startselect");
       
//Если не 0-ая позиция, то
 }else{
     //Разблокируем список Модификация
      $('[name="modification"]').parent(".t-select__wrapper ").removeClass("selecblk");
      //Задаем спискам стили цветовые
       $('[name="modelauto"]').removeClass("startselect").addClass("endselect");
       $('[name="modification"]').removeClass("endselect").addClass("startselect");
       $('[name="probeg"]').removeClass("startselect");
 };
 
//Если выбрали Murano 
 if (modelplace == 1) { selectcar = murano; showmdf();  $('#loadcarpic').load('https://mo-tilda.ru/loadcalcontent #rec65847993');replacecar();};
//Если выбрали Pathfinder
 if (modelplace == 2) { selectcar = pathfinder; showmdf();$('#loadcarpic').load('https://mo-tilda.ru/loadcalcontent #rec65848025');replacecar(); };
//Если выбрали Sentra 
 if (modelplace == 3) { selectcar = sentra; showmdf(); $('#loadcarpic').load('https://mo-tilda.ru/loadcalcontent #rec65848028');replacecar();};
}); 


//При клике на кнопку Показать полный прайс, показываем блок с таблицей
   $('[href = "#showfull"]').click(function (){
    //Меняем текст на кнопке
    var hBlock = $('#loadtable');
    $(this).text(hBlock.is(':visible') ? 'Показать полную смету' : 'Скрыть полную смету');
    hBlock.slideToggle(600);
});
          
          
//Когда изменяют модификацию авто, то 
 $('[name="modification"]').change(function() {    
//Активируем первый пункт поля пробег
 $("select[name='probeg'] option:first").prop('selected', true);
//Очищаем прайсы
clearprice();
// Получаем номер элемента в списке       
modiflplace = $(this)[0].selectedIndex;  
//Если выбран элемент номер 0, то
   if (modiflplace == 0){
     //Блокируем поле пробега  
     $('[name="probeg"]').parent(".t-select__wrapper ").addClass("selecblk");
     
     //Задаем спискам стили цветовые
     $('[name="modification"]').removeClass("endselect").addClass("startselect");
     $('[name="probeg"]').removeClass("startselect");
     
     
     //Если элемент не 0 , то  
   }else{
      //Разблокируем поле пробега 
      $('[name="probeg"]').parent(".t-select__wrapper ").removeClass("selecblk");  
       //Задаем спискам стили цветовые
     $('[name="modification"]').removeClass("startselect").addClass("endselect");;
     $('[name="probeg"]').addClass("startselect");
   };
});


//Когда изменяют Пробег авто, то 
 $('[name="probeg"]').change(function() {    
probegplace = $(this)[0].selectedIndex;  
//Если выбран элемент номер 0, то
   if (probegplace == 0){
     //Очищаем прайсы
     clearprice();    
   
      
     //Если элемент не 0 , то  
   }else{
       
      //Показываем фразу Показать полный прайс и кнопку Записаться на обслуживание 
     $('#loadtable , #loadprice').slideUp(400);
     $('#loadprice').slideDown(500);
      $('[href = "#showfull"]').text('Показать полную смету');
     
     
     setTimeout(function() {
     $('[data-record-type="37"] , [data-record-type="208"]').slideDown();
     }, 1000);
     
   };
   
   //Выясняем какая модель, модификация и пробег. Показываем нужную таблицу
   
   //MURANO
   //15000
    if (modelplace == 1 && modiflplace == 1 && probegplace == 1 ){
    $('#loadtable').load('https://mo-tilda.ru/loadcalcontent #rec65786403'); 
    $('#loadprice').load('https://mo-tilda.ru/loadcalcontent #rec65886679'); $('#loadprice').slideDown();  };   
    //30000 
    if (modelplace == 1 && modiflplace == 1 && probegplace == 2 ){
    $('#loadtable').load('https://mo-tilda.ru/loadcalcontent #rec65922731'); 
    $('#loadprice').load('https://mo-tilda.ru/loadcalcontent #rec65922741'); $('#loadprice').slideDown();  };   
    //45000
    if (modelplace == 1 && modiflplace == 1 && probegplace == 3 ){
    $('#loadtable').load('https://mo-tilda.ru/loadcalcontent #rec65924267'); 
    $('#loadprice').load('https://mo-tilda.ru/loadcalcontent #rec65924295'); $('#loadprice').slideDown();  };   
   
   //PATHFINDER
   //Модификация 1 15000
    if (modelplace == 2 && modiflplace == 1 && probegplace == 1 ){
    $('#loadtable').load('https://mo-tilda.ru/loadcalcontent #rec66001213'); 
    $('#loadprice').load('https://mo-tilda.ru/loadcalcontent #rec66001217'); $('#loadprice').slideDown();  };  
    //Модификация 1 30000
    if (modelplace == 2 && modiflplace == 1 && probegplace == 2 ){
    $('#loadtable').load('https://mo-tilda.ru/loadcalcontent #rec66001558'); 
    $('#loadprice').load('https://mo-tilda.ru/loadcalcontent #rec66001708'); $('#loadprice').slideDown();  };  
   //Модификация 1 45000
    if (modelplace == 2 && modiflplace == 1 && probegplace == 3 ){
    $('#loadtable').load('https://mo-tilda.ru/loadcalcontent #rec66001789'); 
    $('#loadprice').load('https://mo-tilda.ru/loadcalcontent #rec66001796'); $('#loadprice').slideDown();  };  
   //Модификация 2 15000
    if (modelplace == 2 && modiflplace == 2 && probegplace == 1 ){
    $('#loadtable').load('https://mo-tilda.ru/loadcalcontent #rec66002172'); 
    $('#loadprice').load('https://mo-tilda.ru/loadcalcontent #rec66002173'); $('#loadprice').slideDown();  };  
   //Модификация 2 30000
    if (modelplace == 2 && modiflplace == 2 && probegplace == 2 ){
    $('#loadtable').load('https://mo-tilda.ru/loadcalcontent #rec66002174'); 
    $('#loadprice').load('https://mo-tilda.ru/loadcalcontent #rec66002175'); $('#loadprice').slideDown();  };  
    //Модификация 2 45000
    if (modelplace == 2 && modiflplace == 2 && probegplace == 3 ){
    $('#loadtable').load('https://mo-tilda.ru/loadcalcontent #rec66002176'); 
    $('#loadprice').load('https://mo-tilda.ru/loadcalcontent #rec66002177'); $('#loadprice').slideDown();  };  
     //Модификация 3 15000
    if (modelplace == 2 && modiflplace == 3 && probegplace == 1 ){
    $('#loadtable').load('https://mo-tilda.ru/loadcalcontent #rec66002910'); 
    $('#loadprice').load('https://mo-tilda.ru/loadcalcontent #rec66002911'); $('#loadprice').slideDown();  };  
      //Модификация 3 30000
    if (modelplace == 2 && modiflplace == 3 && probegplace == 2 ){
    $('#loadtable').load('https://mo-tilda.ru/loadcalcontent #rec66002912'); 
    $('#loadprice').load('https://mo-tilda.ru/loadcalcontent #rec66002914'); $('#loadprice').slideDown();  };  
      //Модификация 3 45000
    if (modelplace == 2 && modiflplace == 3 && probegplace == 3 ){
    $('#loadtable').load('https://mo-tilda.ru/loadcalcontent #rec66002915'); 
    $('#loadprice').load('https://mo-tilda.ru/loadcalcontent #rec66002916'); $('#loadprice').slideDown();  };  

    //SENTRA
    //Модификация 1 15000
     if (modelplace == 3 && modiflplace == 1 && probegplace == 1 ){
    $('#loadtable').load('https://mo-tilda.ru/loadcalcontent #rec66003264'); 
    $('#loadprice').load('https://mo-tilda.ru/loadcalcontent #rec66003265'); $('#loadprice').slideDown();  };  
     //Модификация 1 30000
     if (modelplace == 3 && modiflplace == 1 && probegplace == 2 ){
    $('#loadtable').load('https://mo-tilda.ru/loadcalcontent #rec66003266'); 
    $('#loadprice').load('https://mo-tilda.ru/loadcalcontent #rec66003267'); $('#loadprice').slideDown();  };  
     //Модификация 1 45000
     if (modelplace == 3 && modiflplace == 1 && probegplace == 3 ){
    $('#loadtable').load('https://mo-tilda.ru/loadcalcontent #rec66003268'); 
    $('#loadprice').load('https://mo-tilda.ru/loadcalcontent #rec66003269'); $('#loadprice').slideDown();  };  
     //Модификация 2 15000
     if (modelplace == 3 && modiflplace == 2 && probegplace == 1 ){
    $('#loadtable').load('https://mo-tilda.ru/loadcalcontent #rec66003592'); 
    $('#loadprice').load('https://mo-tilda.ru/loadcalcontent #rec66003593'); $('#loadprice').slideDown();  };  
    //Модификация 2 30000
     if (modelplace == 3 && modiflplace == 2 && probegplace == 2 ){
    $('#loadtable').load('https://mo-tilda.ru/loadcalcontent #rec66003595'); 
    $('#loadprice').load('https://mo-tilda.ru/loadcalcontent #rec66003596'); $('#loadprice').slideDown();  };  
     //Модификация 2 45000
     if (modelplace == 3 && modiflplace == 2 && probegplace == 3 ){
    $('#loadtable').load('https://mo-tilda.ru/loadcalcontent #rec66003597'); 
    $('#loadprice').load('https://mo-tilda.ru/loadcalcontent #rec66003598'); $('#loadprice').slideDown();  };  
         
   
 });

});
   
</script>

<style>
/*Ширина фото авто*/
.t107__width {
    width: 400px;
}

/*Подчёркивание ссылки Показать полную смету*/
[href = '#showfull'] {
    border-bottom: 2px dotted;
}

/*Стили для таблицы*/
/*Шапка цвет фона и текста левая*/
.t812__col:nth-child(odd) .t812__col-header{
    background: #1c252e;
    color: #ffffff;
}
/*Шапка цвет фона и текста правая*/
.t812__col:nth-child(even) .t812__col-header{
    background: #c3092f;
    color: #ffffff;
}
/*Высота и нижний отступ в шапке*/
.t812__col-header {
    line-height: 1.7;
    margin-bottom: 0px !important;
}
/*Внешние отступы у пунктов в таблице убираем*/
.t812__pricelist-item + .t812__pricelist-item {
    margin-top: 0 !important;
}
/*Внутренние отступы у пунктов таблицы добавляем*/
.t812__pricelist-item {
    padding: 10px;
}
/*Построчный раскрас в таблице*/
.t812__pricelist-item:nth-child(odd){
    background: #E2E5E8;
}
/*Построчный раскрас в таблице*/
.t812__pricelist-item:nth-child(even){
    background: #f7f7f7;
}
/*Отступ сверху у описания*/
.t812__pricelist-item__row_2 {
    padding-top: 0 !important; 
}
/*Отступ снизу  у заголовка*/
.t812__pricelist-item__row_1 {
    padding-bottom: 0px !important; 
}  

/*Тень для карточек*/
.t501__col.t-col.t-col_4.t-item {
    box-shadow: 0px 0px 50px -2px #dadada;
}
   
</style>

<style>
/*Ширина блока с формой*/
.t690 .t-form__inputsbox {
    width: 100%;
}
/*Отступ справа у последнего роля ввода*/
.t690 .t-input-group_sb:nth-child(3) .t-input-block {
    padding-right: 0px !important;
}
/*Высота поля SELECT*/
.t690 .t-select {
    height: 45px;
}

/*Рамка для Заголовка калькулятора*/
.t690 .t-section__container {
    border-left: 3px solid #f1f1f1;
    border-right: 3px solid #f1f1f1;
    border-top: 3px solid #f1f1f1;
    padding-top: 20px;
    background: #fbfbfb;
}
/*Калькулятор - отступ от заголовка*/
.t690 .t-section__topwrapper {
    margin-bottom: 10px !important;
}
.t690 .t-section__title {
    margin-bottom: 10px !important;
}


/*Калькулятор - отсту от формы*/
.t690 .t-container:nth-child(2n) {
    border-bottom: 5px solid #f1f1f1;
    border-left: 3px solid #f1f1f1;
    border-right: 3px solid #f1f1f1;
    padding-bottom: 30px;
    padding-top: 20px;
    background: #fbfbfb;
}
    
    
</style>