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

Оформить доступ с промокодом
100
Как сделать калькулятор с изменяемыми ценами в Tilda
Расчёт чана
Выберете параметры и узнайте стоимость комплекта
Выберите вид и толщину стали
Стоимость комплекта : 0 руб.
Подъём
Треноги
Стоимость комплекта : 0 руб.
Обогрев
Комфорт
Кол-во спинок
Стоимость комплекта : 0 руб.
Монтаж
Список комплекта:
Стоимость комплекта : 0 руб.
Стоимость монтажа: 0 руб.
Итоговая цена: 0 руб.
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности

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

1
Создали форму BF310N
2
Заполнили её (скрин приведён ниже)
3
Добавили код в блок Другое - Т123
В коде прописали нужные значения и данные для изменения контента
Пример требует базовых знаний html, css, jquery

Основная формула
typesteel+krishka+typelestnica+typetrenoga+typepech+typedimohod+2000*qseats
Библиотека для примера

<style>
@media screen  (mах-width: 640px){
.t-img-select__control {
     width: calc(25% - 10px);
}
}
.t-img-select__container {
}
.t-img-select__indicator {
    border-radius: 30px;
}
.t-input-group.t-input-group_fr {
    text-align: right;
    box-shadow: 0px -1px 0px 0px #bdbdbd;
    padding: 5px 10px;
}
.t696__text-wrapper {
    margin-bottom: 30px;
}
.t696__content {
    padding: 35px 30px 45px;
}
.t-input-group_fr .t-input-title, .t-input-group_fr .t-name {
    font-weight: 400;
}
.t-input-group.t-input-group_tx {
    background-color: #f7f7f7;
    padding: 10px;
}
</style>

<script>
$( document ).ready(function() {
function montaj(){
  var itogo = $('input[name="calchan4"]').next('.t-calc__wrapper').children('.t-calc').html();
  $('input[name="typemontag"]:eq(0)').attr('data-calc-value' , Math.round(itogo*0.1).toFixed());  
};montaj();
function spincheck(){
   var spincol = $('input[name="qseats"]').val();
   if (spincol>0){
    $('input[name="typedimohod"]').parent('.t-input-block').find('input[type="checkbox"]:eq(2)').prop("checked", true);
    }else{$('input[name="typedimohod"]').parent('.t-input-block').find('input[type="checkbox"]:eq(2)').prop("checked", false);}
};
//Контроль спинок
  $('input[name="typedimohod"]').parent('.t-input-block').find('input[type="checkbox"]:eq(2)').change(function() {
     if ($(this).is(':checked')){$('input[name="qseats"]').val(1);
} else { $('input[name="qseats"]').val(0);}});   

$('select').change(function() {montaj()});
$('.t-inputquantity__btn').click(function(){montaj();spincheck();});

//Итоговый список
function finishlist(){
 //Получаем значение Тип объекта
     var typechan = $('input[name="typechan"]:checked').val();  
     var typesteel = $('select[name="typesteel"]').val();  
     var krishka = $('input[name="krishka"]:checked').val();  
     var typelestnica = $('input[name="typelestnica"]:checked').val();
     var typetrenoga = $('input[name="typetrenoga"]:checked').val();
     var typepech = $('input[name="typepech"]:checked').val();
     var typedimohod = $('input[name="typedimohod"]').val();
     var qseats = $('input[name="qseats"]').val();
     var typemontag = $('input[name="typemontag"]:checked').val();
     if (typedimohod==''){ typedimohod='Без комфорта';};
     $('.t-input-group_tx .t-text').html('Список комплекта:<br> 1. '+typechan+' - '+typesteel+'<br>2. '+krishka+'<br>3 .'+typelestnica+'<br>4 .'+typetrenoga+'<br>5. '+typepech+'<br>6. '+typedimohod+'<br>Кол-во спинок: '+qseats+'<br>7. '+typemontag);
 
};
//При нажатии вперёд
   $(document).on('click','.t-form__screen-btn-next',function(e){ finishlist();});
  //При изменении чана
  $('input').change(function() {
  montaj();spincheck();finishlist();
  //Вычисляем позицию выбора
 var place = $('input[name="typechan"]:checked').parent('.t-img-select__control').index();
 var selectList = 'select[name="typesteel"]';$(selectList).empty();
 
 if (place==0){//Если первый вариант, то 
$(selectList).append( $('<option value="Полированная пищ. нерж.сталь 2 мм" data-calc-value="110000">Полированная пищ. нерж.сталь 2 мм</option>'));     
$(selectList).append( $('<option value="Матовая пищ. нерж.сталь 3 мм" data-calc-value=" 136000">Матовая пищ. нерж.сталь 3 мм</option>'));
$('input[name="typetrenoga"]:eq(2)').attr('data-calc-value' , '21000');
$('input[name="typedimohod"]').parent('.t-input-block').find('input[type="checkbox"]:eq(1)').attr('data-calc-value' , '16000');

 };
  if (place==1){//Если второй вариант, то 
$(selectList).append( $('<option value="Полированная пищ. нерж.сталь 2 мм" data-calc-value="132000">Полированная пищ. нерж.сталь 2 мм</option>'));     
$(selectList).append( $('<option value="Матовая пищ. нерж.сталь 3 мм" data-calc-value=" 154000">Матовая пищ. нерж.сталь 3 мм</option>'));
$('input[name="typetrenoga"]:eq(2)').attr('data-calc-value' , '25000');
$('input[name="typedimohod"]').parent('.t-input-block').find('input[type="checkbox"]:eq(1)').attr('data-calc-value' , '17000');

 };
  if (place==2){//Если третий вариант, то 
$(selectList).append( $('<option value="Полированная пищ. нерж.сталь 2 мм" data-calc-value="134000">Полированная пищ. нерж.сталь 2 мм</option>'));     
$(selectList).append( $('<option value="Матовая пищ. нерж.сталь 3 мм" data-calc-value=" 155000">Матовая пищ. нерж.сталь 3 мм</option>'));
$('input[name="typetrenoga"]:eq(2)').attr('data-calc-value' , '26000');
$('input[name="typedimohod"]').parent('.t-input-block').find('input[type="checkbox"]:eq(1)').attr('data-calc-value' , '21000');

 };
});


});
</script>
Made on
Tilda