Автозамена до ближайшего возможного значения (форма количества WordPress)

Question

Я создаю интернет-магазин с WooCommerce.Мы используем расширенное количество WooCommerce, поэтому количество не равно 1,2,3,4 и т. Д., Но, например, с шагом 0,72.При использовании кнопки +/- все работает нормально.(шаги: 0,72, 1,44, 2,16 и т. д.)

Когда я заполняю 20 с моей клавиатурой и нажимаю добавить в корзину в моей корзине, было добавлено количество 19,44 вместо 20, потому что 20 невозможновариант.Я хочу, чтобы поле автоматически менялось до максимально возможного количества, прежде чем добавлять его в корзину.Это больше похоже на автозамену после отмены выбора поля.

Как мне этого добиться?Это как-то связано с JavaScript?Надеюсь, вы, ребята, можете мне помочь!

Ссылка на пример страницы, чтобы вы могли проверить это: https://www.stenenentegels.nl/product/trommelsteen-chelsea-20x30x4/

Answer 1

Вы можете просто установить текущее значение за вычетом самого себя с помощью оператора модуля.Вы можете определить лучшее событие, но blur, вероятно, будет работать лучше.

let qty = document.getElementById('qty');

qty.onblur = function(){
  let val  = this.value; // Current Value
  let step = this.getAttribute('step'); // Get step instead of hard coding it
  
  this.value = (val - (val % step)).toFixed(2); // Simple math that adjusts the value on blur
}

<input type="number" id="qty" step=".72" />

Чтобы округлить один шаг, вы можете рассмотреть:

let qty = document.getElementById('qty');

qty.onblur = function(){
  let val  = this.value; // Current Value
  let step = this.getAttribute('step'); // Get step instead of hard coding it
  
  let roundDown = (val - (val % step)).toFixed(2);
  let roundUp   = (parseFloat(roundDown) + parseFloat(step)).toFixed(2);
  
  this.value = roundUp;
}

<input type="number" id="qty" step=".72" />

Если вы хотите, чтобы это влияло только на шаги, которые не 1, просто оберните это в операторе if:

let qty = document.getElementById('qty');

qty.onblur = function(){
  let val  = this.value; // Current Value
  let step = this.getAttribute('step'); // Get step instead of hard coding it
  
  if( step != 1 ){
    let roundDown = (val - (val % step)).toFixed(2);
    let roundUp   = (parseFloat(roundDown) + parseFloat(step)).toFixed(2);
  
    this.value = roundUp;
  }
}

<input type="number" id="qty" step=".72" />

Answer 2

Вы можете сделать это в событии размытия поля #qty с помощью javascript:

jQuery("#qty").on("blur", function(){
    correctValue = jQuery(this).val() - (jQuery(this).val() % 0.72);   
    jQuery(this).val(correctValue.toFixed(2));
})

Редактировать: вам нужно найти место для размещения этого - в шаблоне WooCommerce или в общем js-файле.сайта.

Редактировать 2: Вы можете убедиться, что это действительно работает, вставив приведенный выше код в консоль Chrome JS, а затем введя «20» в поле и снова щелкнув из поля.