自动更正为最接近的可能值（数量形式WordPress）

Question

I am building a webshop with WooCommerce. We are using WooCommerce advanced quantity so the quantity is not like 1,2,3,4 etc but in steps of 0.72 for example. When using the +/- button it is working fine. (steps: 0.72, 1.44, 2.16 etc)

When I fill in 20 with my keyboard and click add to my cart in my cart there has been add a quantity of 19.44 instead of 20 because 20 is not an possible option. I want the field to autocorrect to the closest possible quantity value before adding it to my cart. So more like autocorrect it after deselecting the field.

How can I achieve this? Has it something to do with javascript? Hope you guys can help me!

Link to example page so you can test it: https://www.stenenentegels.nl/product/trommelsteen-chelsea-20x30x4/

Answer 1

You could do it in the blur event of the #qty field with javascript:

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

Edit: You need to find a place to put this - in a WooCommerce template or in the general js file of the site.

Edit 2: You can check that this actually works by pasting the above code in the Chrome JS console and then entering "20" in the field and clicking out of the field again.

Answer 2

You can just set the value to the current value minus itself with the modulus operator. You can determine the best event, but blur would probably work best.

 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" /> 

To round up one step, you could consider:

 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" /> 

If you only want this to effect steps that aren't 1 , just wrap that in an if statement:

 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" />