Как сделать калькулятор ремонта гаджетов в Tilda
MobiDik
Ремонт телефонов, iPhone, планшетов и iPad в Ижевске

Ориентировочную стоимость ремонта Вашего телефона Вы сможете узнать воспользовавшись калькулятором.
+
Калькулятор стоимости ремонта

Как сделать калькулятор ремонта гаджетов в Tilda

1
Создали форму BF203N
2
Создали в ней 3 поля с выпадающими списками
3
Первому задали имя brand и заполнили
*** выберите производителя ***
Apple
Samsung
HTC
4
Второму задали имя device и заполнили
*** выберите модель ***
5
Второму задали имя problem и заполнили
*** выберите тип услуги ***
6
Добавили блок BF302
7
Добавили блок BF502N и создали в нём поле
Поле для ввода в несколько строк с именем deviceform
8
Добавили код на страницу в блок Другое - Т123
В коде заполнили модели устройств, услуги и цены
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём калькулятор ремонта гаджетов на базе штатной формы Tilda.
Длительность видео: 20 мин
Фрагмент видео
Библиотека для примера

<style>
/*Скрываем лишнюю кнопку*/
 .t690 .t-submit {display:none; } 
 .t690 .t-form__inputsbox {width: 100%;}
 /*Стиль блокировки списка*/
 .selecblk{ opacity: 0.6; pointer-events: none;}
/*Стиль для поля Select - Вызов*/
 .startselect {box-shadow: inset 11px 0px 0px 0px #2d8e88;}
/*Стиль для поля Select - Завершено*/
 .endselect { box-shadow: inset 0px 6px 16px 0px #afafaf;opacity: 0.5;}
/*Стиль для поля Select - Анимация*/
 .t-select {transition:all 0.5s cubic-bezier(0, 0, 0.8, 1.0);height:40px !important;}
 
 textarea[name="deviceform"] {
    color: #888888 !important;
    border: 0px !important;
    pointer-events: none;
    box-shadow: 0px 0px 10px 4px #ececec;
    background: #ffffff;
    resize: none;
}
</style>

<script>
$( document ).ready(function() {
var selectbrand = [];
var selectdevice = [];
var sostav = 0;
var sostavuslug = 0;
var brandplace = 0;
var deviceplace = 0;
var serviceplace = 0;

//Заполняем модели устройств    
var articles = [
        /*Apple*/    ['iPhone 4','iPhone 4s','iPhone 5'],
        /*Samsung*/  ['A300','A310','A320'],
        /*HTC*/      ['8X','Butterfly 2 X920E','Desire 10 Lifestyle']    
];//articles

var price = {
  "iPhone 4": [
    {"service":"Замена дисплейного модуля (оригинал)","summ":3200},
    {"service":"Замена дисплейного модуля","summ":1400},
    {"service":"Замена стекла или сенсора","summ":2300},
  ],
  
  "iPhone 4s": [
    {"service":"Замена дисплейного модуля (оригинал)","summ":3188},
    {"service":"Замена дисплейного модуля","summ":1740},
    {"service":"Замена стекла или сенсора","summ":2360},
  ],
  
  "iPhone 5": [
    {"service":"Замена дисплейного модуля (оригинал)","summ":4200},
    {"service":"Замена дисплейного модуля","summ":2400},
    {"service":"Замена стекла или сенсора","summ":2390},
  ],
  
   "A300": [
    {"service":"Замена дисплейного модуля","summ":1500},
    {"service":"Замена стекла или сенсора","summ":2660},
  ],
  
   "A310": [
    {"service":"Замена дисплейного модуля","summ":1410},
    {"service":"Замена стекла или сенсора","summ":2560},
  ],
  
   "A320": [
    {"service":"Замена дисплейного модуля","summ":2340},
    {"service":"Замена стекла или сенсора","summ":2670},
  ],
  
    "8X": [
    {"service":"Замена дисплейного модуля","summ":1450},
    {"service":"Замена стекла или сенсора","summ":2667},
  ],
  
   "Butterfly 2 X920E": [
    {"service":"Замена дисплейного модуля","summ":1332},
    {"service":"Замена стекла или сенсора","summ":2980},
  ],
  
   "Desire 10 Lifestyle": [
    {"service":"Замена дисплейного модуля","summ":2120},
    {"service":"Замена стекла или сенсора","summ":2340},
  ]
};//price

//Очистка полей
function cleartext(){$('.t580__title , .t580__descr').hide(400);};cleartext();
function blockbtn(){ $('.t580__btn').addClass('selecblk')};blockbtn();


//Блокируем список Девайса и Услуги
function blocklist(){
      $('select[name="device"]').parent(".t-select__wrapper ").addClass("selecblk");
      $('select[name="problem"]').parent(".t-select__wrapper ").addClass("selecblk");
};blocklist();
//Задаем списку моделей авто нужный цвет
 $('select[name="brand"]').addClass("startselect");

//Функция вывода девайсов
function showdevice(){sostav = selectbrand.length;
      //Добавляем поле девайс первую строку
      $('select[name="device"]').append($('<option value="stop">*** выберите модель ***</option>')); 
      for (var i = 0; i < sostav ; i++) {
      $('select[name="device"]').append($('<option value="'+selectbrand[i]+'">'+selectbrand[i]+'</option>'));
};};

//Функция вывода услуг
function showservice(){sostavuslug = price[selectdevice].length;
      //Добавляем поле услуга первую строку
      $('select[name="problem"]').append($('<option value="stop">*** выберите тип услуги ***</option>')); 
      for (var i = 0; i < sostavuslug ; i++) {
      $('select[name="problem"]').append($('<option value="'+price[selectdevice][i]["service"]+'">'+price[selectdevice][i]["service"]+'</option>'));
     };};

//Когда изменяют брэнд
   $('select[name="brand"]').change(function() {blocklist();blockbtn();
//Очищаем список девайсов
   $('select[name="device"]').empty();cleartext();
//Активируем первый пункт услуг
 $("select[name='problem'] option:first").prop('selected', true);
// Получаем номер элемента в списке моделей     
 brandplace = $(this)[0].selectedIndex; 
//Если это позиция 0, то
 if (brandplace == 0) {
       //Прописываем первый пункт в списке
       $('select[name="device"]').append($('<option value="stop">*** выберите модель ***</option>'));
       //Задаем спискам стили цветовые
       $('select[name="brand"]').removeClass("endselect").addClass("startselect");
       $('select[name="device"]').removeClass("startselect");
       $('select[name="problem"]').removeClass("startselect");
 }else{//Если не 0-ая позиция, то
     //Разблокируем список моделей
      $('select[name="device"]').parent(".t-select__wrapper ").removeClass("selecblk");
      //Задаем спискам стили цветовые
       $('select[name="brand"]').removeClass("startselect").addClass("endselect");
       $('select[name="device"]').removeClass("endselect").addClass("startselect");
       $('select[name="problem"]').removeClass("startselect");
       selectbrand = articles[brandplace-1]; showdevice();};}); 

//Когда изменяют девайс
 $('select[name="device"]').change(function() {  blockbtn();
   $('select[name="problem"]').empty();cleartext();
   //Активируем первый пункт поля проблем
   $("select[name='problem'] option:first").prop('selected', true);
   deviceplace = $(this)[0].selectedIndex;  
   if (deviceplace == 0){//Если выбран элемент номер 0, то
      //Добавляем поле услуга первую строку
      $('select[name="problem"]').append($('<option value="stop">*** выберите тип услуги ***</option>'));   
      //Блокируем поле проблем  
      $('select[name="problem"]').parent(".t-select__wrapper ").addClass("selecblk");
      //Задаем спискам стили цветовые
      $('select[name="device"]').removeClass("endselect").addClass("startselect");
      $('select[name="problem"]').removeClass("startselect");
   }else{//Разблокируем поле проблем 
      $('select[name="problem"]').parent(".t-select__wrapper ").removeClass("selecblk");  
      //Задаем спискам стили цветовые
      $('select[name="device"]').removeClass("startselect").addClass("endselect");;
      $('select[name="problem"]').addClass("startselect");
      selectdevice = selectbrand[deviceplace-1] ; 
      showservice(); }; });

//Когда изменяют услугу
 $('select[name="problem"]').change(function() {  
    serviceplace = $(this)[0].selectedIndex;
     if (serviceplace == 0){//Если выбран элемент номер 0, то 
     $('.t580__title , .t580__descr').hide(400);blockbtn();
     }else{ $('.t580__btn').removeClass('selecblk')
      $('.t580__title').html($('select[name="brand"]').val()+' '+$('select[name="device"]').val());
      $('.t580__descr').html($('select[name="problem"]').val()+' = '+price[selectdevice][serviceplace-1]["summ"]+' руб.' );
      $('.t580__title , .t580__descr').show(400);
     
      var deviceformtxt = $('.t580__title').text()+'\n'+$('.t580__descr').text();
      $('textarea[name="deviceform"]').val(deviceformtxt);     
     };
 });
})
</script>
Made on
Tilda