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

您可以使用javascript：

在#qty字段的模糊事件中执行此操作

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”并再次单击该字段来检查这是否真正有效。

Answer 2

您可以使用模数运算符将值设置为当前值减去自身。您可以确定最佳事件，但blur可能效果最佳。

＆＃13;

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
}

＆＃13;

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

＆＃13;

要整理一步，您可以考虑：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

如果您只希望这会影响不是1的步骤，只需将其包装在if语句中：

＆＃13;

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;
  }
}

＆＃13;

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

＆＃13;

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

2 个答案: