Как создать условный прайс-калькулятор в Tilda
Стоимость email-рассылок
Кол-во ящиков:
100
Стоимость в месяц

Как создать условный прайс-калькулятор в Tilda

1
Создали ZeroBLock
2
Создали в нём:

- форму с RangeSlider (имя переменной сmail , val 32, min 0, max 100 , step 2 )
- ещё одну отдельную форму с калькулятором. В формулу прописали просто имя переменной сmail (убрали форму из зоны видимости)
- 1 Text для кол-ва ящиков, написали там цифру 100 и задали ссылку #boxes
- 1 Text для доп описания (- Письма без ограничений - Помощь 5 часов в неделю - Скидка 30% при покупке подписки на год) и задали ему ссылку #txtP
- 4 Text под RangeSlider (Бесплатно , Малый бизнес , Средний бизнес, Крупный бизнес) и задали им ссылку #colont
- 1 Text - стоимость месяца при оплате в месяц 3000 со ссылкой #emonth
- 1 Text - стоимость месяца при оплате в год 2100 со ссылкой #monthcur
- 1 Text - стоимость месяца при оплате в месяц old 3000 , прозрачность 50%, ссылка #emonthold
- 1 Text - стоимость при оплате за год 25200 со ссылкой #yearcur
- 1 Text - стоимость при оплате помесячно за год 36000 со ссылкой #yearold
- 2 Button c текстом Год и Месяц, со ссылками #type

3
Добавили скрипт на страницу
Скрипт вставляется в блок ДРУГОЕ►Т123
Библиотека для примера
<style>
  a[href$="old"] {
    text-decoration: line-through !important;
}
 a[href$="old"] , a[href$="cur"] , a[href="#boxes"] , a[href="#colont"] , a[href="#emonth"], a[href="#textyear"] , a[href="#txtP"] {
    pointer-events:none;
}
input.t-range.js-tilda-rule {
    background-color: #f7f7f7;
    border-radius: 30px;
}

    a.tn-atom[href^="#"] , .type{
        transition: all 0.4s linear;
    }
.nopac{
    opacity:1 !important;
}   
.acttype{
    color: #fcb42f !important;
    border-color: #fcb42f !important;
    box-shadow: 0px 5px 0px 0px #fcb42f;
}
.t-range__value-txt , .t-range__interval-txt {
    display: none !important;
}

</style>
<script>
$( document ).ready(function() {

var boxes = $('a[href="#boxes"]');
$('a[href="#colont"]').addClass('colont');
$('.colont:eq(1)').addClass('nopac');

$('a[href="#monthcur"]').addClass('monthY');
$('a[href^="#emonth"]').addClass('monthM');
$('a[href="#emonth"]').addClass('monthMn').hide();
$('a[href="#emonthold"]').addClass('monthMo');
$('a[href="#yearcur"]').addClass('yearY');
$('a[href="#yearold"]').addClass('yearM');
$('a[href="#textyear"]').addClass('textyear');
$('a[href="#txtP"]').addClass('txtP');

$('a[href="#type"]').addClass('type');
$('.type:first').addClass('acttype');

$('.type').click(function(e){e.preventDefault();
    $('.type').removeClass('acttype');
    $(this).addClass('acttype');
    $('.monthMn , .monthY , .monthMo , .yearY , .yearM , .textyear ').toggle();
});

function explode(){

  var num =   $('.t-range__value-txt').html();
  
  function col(){
    
      if (num<=20){$('.colont').removeClass('nopac');
      $('.colont:eq(0)').addClass('nopac');
      $('.txtP').html('<p>- 100 писем</p><p>- Полный доступ ко всем инструментам</p><p>- Больше 30 бесплатных шаблонов</p>')    
      }else{
      $('.txtP').html('<p>- Письма без ограничений</p><p>- Помощь 5 часов в неделю</p><p>- Скидка 30% при покупке подписки на год</p>')         
      };
    
      if (num>20&&num<=44){$('.colont').removeClass('nopac');$('.colont:eq(1)').addClass('nopac');};
      if (num>44&&num<=70){$('.colont').removeClass('nopac');$('.colont:eq(2)').addClass('nopac');};
      if (num>70){$('.colont').removeClass('nopac');$('.colont:eq(3)').addClass('nopac');};
    
};col();
  
  if (num<=20){
      boxes.html(100);
      $('.monthY').html('0 р');
      $('.monthM').html('0 р');
      $('.yearY').html('Бесплатно');
      $('.yearM').html('');
  };
  //Малый
  if (num>20 && num<=26){
      boxes.html('1 000');
      $('.monthY').html('1 400 р');
      $('.monthM').html('2 000 р');
      $('.yearY').html('16 800 р');
      $('.yearM').html('24 000 р');
  };
  if (num>26 && num<=32){
      boxes.html('2 000');
      $('.monthY').html('2 100 р');
      $('.monthM').html('3 000 р');
      $('.yearY').html('25 200 р');
      $('.yearM').html('36 000 р');
  }; 
  if (num>32 && num<=38){
      boxes.html('4 000');
      $('.monthY').html('2 800 р');
      $('.monthM').html('4 000 р');
      $('.yearY').html('33 600 р');
      $('.yearM').html('48 000 р');
  };
   if (num>38 && num<=44){
      boxes.html('7 000');
      $('.monthY').html('3 500 р');
      $('.monthM').html('5 000 р');
      $('.yearY').html('42 000 р');
      $('.yearM').html('60 000 р');
  };
  //Средний
    if (num>44 && num<=50){
      boxes.html('10 000');
      $('.monthY').html('4 900 р');
      $('.monthM').html('7 000 р');
      $('.yearY').html('58 800 р');
      $('.yearM').html('84 000 р');
  };
  if (num>50 && num<=56){
      boxes.html('15 000');
      $('.monthY').html('7 000 р');
      $('.monthM').html('10 000 р');
      $('.yearY').html('84 800 р');
      $('.yearM').html('120 000 р');
  };
  if (num>56 && num<=64){
      boxes.html('25 000');
      $('.monthY').html('10 500 р');
      $('.monthM').html('15 000 р');
      $('.yearY').html('126 800 р');
      $('.yearM').html('180 000 р');
  };
  if (num>64 && num<=70){
      boxes.html('50 000');
      $('.monthY').html('14 000 р');
      $('.monthM').html('20 000 р');
      $('.yearY').html('168 800 р');
      $('.yearM').html('240 000 р');
  };
  //Крупный
  if (num>70 && num<=76){
      boxes.html('100 000');
      $('.monthY').html('21 000 р');
      $('.monthM').html('30 000 р');
      $('.yearY').html('252 800 р');
      $('.yearM').html('360 000 р');
  };
   if (num>76 && num<=82){
      boxes.html('150 000');
      $('.monthY').html('28 000 р');
      $('.monthM').html('40 000 р');
      $('.yearY').html('336 800 р');
      $('.yearM').html('480 000 р');
  };
  if (num>82 && num<=88){
      boxes.html('250 000');
      $('.monthY').html('35 000 р');
      $('.monthM').html('50 000 р');
      $('.yearY').html('420 800 р');
      $('.yearM').html('600 000 р');
  };
  if (num>88 && num<=96){
      boxes.html('350 000');
      $('.monthY').html('42 000 р');
      $('.monthM').html('60 000 р');
      $('.yearY').html('504 000 р');
      $('.yearM').html('720 000 р');
  };  
  if (num>96){
      boxes.html('500 000');
      $('.monthY').html('40 000 р');
      $('.monthM').html('70 000 р');
      $('.yearY').html('588 800 р');
      $('.yearM').html('840 000 р');
  }; 
  
};//expl
$(".tn-atom__form").on('DOMSubtreeModified', ".t-calc", function() {
explode();  
});
    
$( window ).resize(function() {
  setTimeout(explode, 3000);
});
});
</script>
Made on
Tilda