Woocommerce 加/减数量按钮更改值但实际上不起作用

Posted 2023-05-09

【中文标题】Woocommerce 加/减数量按钮更改值但实际上不起作用

【英文标题】：Woocommerce plus/minus quantity button changing value but not working actually

【发布时间】：2016-04-08 08:06:34

【问题描述】：

我为 woocommerce 单品页面创建了一个加/减数量按钮。创建了一个新的数量输入.php

<?php
    if ( ! defined( 'ABSPATH' ) ) 
        exit; // Exit if accessed directly
?>
<div class="quantity">
    <input class="minus" type="button" value="-">
    <input type="number" step="<?php echo esc_attr( $step ); ?>" <?php if ( is_numeric( $min_value ) ) : ?>min="<?php echo esc_attr( $min_value ); ?>"<?php endif; ?> <?php if ( is_numeric( $max_value ) ) : ?>max="<?php echo esc_attr( $max_value ); ?>"<?php endif; ?> name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php _ex( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="input-text qty text" size="4" />
    <input class="plus" type="button" value="+">
</div>

$('.plus').on('click', function(e) 
    var val = parseInt($(this).prev('input').val());
    $(this).prev('input').attr( 'value', val+1 );
);

$('.minus').on('click', function(e) 
    var val = parseInt($(this).next('input').val());
    if (val !== 0) 
        $(this).next('input').val( val-1 );
     
);

上面的代码在视觉上改变了文本框的值，但没有改变代码中的值。因此，woocommerce 没有得到任何数量的变化。另一方面，如果我按下向上/向下按钮对于键盘，woocommerce 正在改变价值。我认为这是因为我使用了.val() 而不是.attr()，我多次更改为attr() 但徒劳无功。

【问题讨论】：

这似乎在 jsfiddle 中运行良好：jsfiddle.net/o2amr91n

是的 .attr() 正在工作，但 woocommerce 仍然没有获得输入值。示例在这里 jollyfine.co/shop/product/12-box-of-pick-your-own

你可以试试看这个插件：nwordpress.org/plugins/woocommerce-quantity-increment

看起来像带有这些类的输入标签input-text qty text在您单击数量时注册更改。这些变化也反映在你的篮子上。也许在单击.plus 和.minus 时，您应该使用这些类更新最近的输入元素：input-text qty text。

@sandeep 你是对的。问题就在那里。我通过删除 input-text qty text 来检查它。然后 woocommerce 不再获得输入值。你能建议我如何用我的 js 修复它?

【参考方案1】：

根据我的上述评论，this answer 解释说 jQuery 的 change 事件仅由手动浏览器事件触发。因此，通过 jQuery 更改输入的值不会触发change 事件，因此我们需要通过在输入上调用.change() 手动触发它。

这是我更新的fiddle，显示了混搭上下文之外的修复。

关于混合和匹配，我们只需要在值更改后将.change() 事件链接到输入。我调整了输入的识别方式，但这并没有太大的区别。

编辑：现在考虑输入的“步骤”。

$('.quantity').on('click', '.plus', function(e) 
    $input = $(this).prev('input.qty');
    var val = parseInt($input.val());
    var step = $input.attr('step');
    step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
    $input.val( val + step ).change();
);

$('.quantity').on('click', '.minus', 
    function(e) 
    $input = $(this).next('input.qty');
    var val = parseInt($input.val());
    var step = $input.attr('step');
    step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
    if (val > 0) 
        $input.val( val - step ).change();
     
);

我很快就会将此添加到我的常见问题解答中。

【讨论】：

嗨！我在结帐页面出现问题：数量变化没有更新价格，并且好像她没有识别新的输入值编号。你知道怎么解决吗？

我已经在 php 文件中移动了 jQuery，现在可以工作但只有一次，在第一次更新后不能通过任何变化。云帮我求情？ :)

@MarcoRomano 你应该提出一个新问题，也许有人可以帮助你。

谢谢！无论如何，在这个时候我已经解决了这个问题！ :) 我在一个插件中使用了 js 的一部分，现在可以工作了...（我知道这不是最好的解决方案，但工作并且很轻！）最好

【参考方案2】：

@helgatheviking 你的代码对我不起作用。但我很高兴你的建议解决了我的问题。我刚刚添加了.change() 和.val() 并且它有效:)

最终代码为：

$('.plus').on('click',function(e)

var val = parseInt($(this).prev('input').val());

$(this).prev('input').val( val+1 ).change();


);
$('.minus').on('click',function(e)

var val = parseInt($(this).next('input').val());
if(val !== 0)
    $(this).next('input').val( val-1 ).change();
 );

【讨论】：

由于我们的代码看起来基本相同，我猜你的 html 标记有点不同，我的 CSS 选择器不适合你。