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

Оформить доступ с промокодом
100
Дрова вакуумной сушки с доставкой и укладкой прямо
в вам дровяник
Мы не сгрузим дрова в грязь, а аккуратно сложим в Ваш дровяник бесплатно!
КАТАЛОГ ДРОВ

Как добавить поле ввода количества товара в корзине в Tilda

Как выполнили данный пример:

Добавили скрипт в конец страницы
Скрипт вставляется в блок ДРУГОЕ►Т123 (Без доработок)


<style>
/*Оформление поля*/
    .superinput {
    border: 1px solid #bebebe !important;
    height: 32px;
    border-radius: 30px;
    box-shadow: 0px 0px 3px 1px #e2e2e2;
    text-align: center;
}
/*Оформление поля при наведении*/
.superinput:hover {
    border: 1px solid #e3ae00 !important;
    box-shadow: 0px 0px 3px 1px #e3ae00;
}    
/*Скрываем кнопки + - */
   .t706__product-minus , .t706__product-quantity , .t706__product-plus {
    display:none;   
   }
/*Стиль для надписи кол-во*/   
   .descipt{
       text-align:center;
       font-size:14px;
       color:#838383;
       margin-top:-16px;
   }
/*Ширина и отступы на мобильном*/   
   @media screen and (max-width: 640px){
     .superinput {
    width:80px !important;
}
     .t706__product-title {
    margin-bottom: 10px;
}
}   
</style>

<script>
$( document ).ready(function() {
 
 var number = 0; 
  //Функция создания полеё ввода 
function createinput(){
    setTimeout(function() { 
    var spisok = $(".t706__product-plusminus").length;
    for (var x = 0; x <= spisok; x++) {
    $('.t706__product-plusminus:eq('+x+')').append('<input type="text" name="colvo" class="t-input superinput colvo js-tilda-rule  " value=""  style="color:#000000; border:1px solid #000000;  ">');
    number =  $('.t706__product-quantity:eq('+x+')').html();
    $('.colvo:eq('+x+')').val(number);
    }; 
//Добавим подпись КОЛ-ВО    
     $('.t706__product-plusminus').prepend('<div class="descipt">Кол-во</div>');
    }, 100);       
};
 
//При открытии корзины запускаем функцию создания полей ввода 
   $( "[href = #order] , .t706__carticon-wrapper"  ).click(function() {createinput();}); 
 
//При удалении товара запускаем функцию создания полей ввода 
 $(document).on('click','.t706__product-del',function(e){ createinput();});
 
//Разрешаем ввод только цифр в 1 и 2 поле ввода
  $(document).on('keydown','.superinput',function () {
    // Разрешаем: backspace, delete, tab и escape
    if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 ||
      // Разрешаем: Ctrl+A
      (event.keyCode == 65 && event.ctrlKey === true) ||
      // Разрешаем: home, end, влево, вправо
      (event.keyCode >= 35 && event.keyCode <= 39)) {
      // Ничего не делаем
      return;
    } else {
      // Запрещаем все, кроме цифр на основной клавиатуре, а так же Num-клавиатуре
      if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
        event.preventDefault();
      }
    }
  });
  
//Ставим ограничение на кол-во цифр 3 в поле  - максимум 999 
   $(document).on('keyup','.superinput',function () {
        var $this = $(this);
        if($this.val().length > 3)
            $this.val($this.val().substr(0, 3));           
    });
 
//При потере фокуса в поле подсчитываем сумму товара 
 
 $(document).on('focusout','.colvo',function () {
  number =   $(this).val();
  var step = $(".colvo").index(this);
  if (number==0){number++;$(this).val(number); };
  var oldnumber = $('.t706__product-quantity:eq('+step+')').html();
  raznost = number - oldnumber;
  if (raznost>0){
  for (var i = 1; i <= raznost; i++) {
  $('.t706__product-plus:eq('+step+')')[0].click();
  }; };
  if (raznost<0){
  raznost = raznost*(-1);       
  for (var i = 1; i <= raznost; i++) {
  $('.t706__product-minus:eq('+step+')')[0].click();
  }; };  });
});  
    
</script>
Made on
Tilda