使用 WooCommerce 购物车中的自定义数量按钮在数量更改时启用“更新购物车”按钮答案

【问题标题】：Enable "Update cart" button on quantity change with custom quantity buttons in WooCommerce cart使用 WooCommerce 购物车中的自定义数量按钮在数量更改时启用“更新购物车”按钮
【发布时间】：2021-03-10 22:20:28
【问题描述】：

我已购买 HTML 模板并将其实施到自定义 Woocommerce 主题中。数字输入有两个按钮（btn-product-up、btn-product-down）可以改变数值。

来自 /woocommerce/cart/cart.php：

<?php
if ( $_product->is_sold_individually() ) {
    $product_quantity = sprintf( '1 <input type="hidden" name="cart[%s][qty]" value="1" />', $cart_item_key );
} else {
    $product_quantity = woocommerce_quantity_input(
        array(
            'input_name'   => "cart[{$cart_item_key}][qty]",
            'input_value'  => $cart_item['quantity'],
            'max_value'    => $_product->get_max_purchase_quantity(),
            'min_value'    => '0',
            'product_name' => $_product->get_name(),
            'classes'      => array( 'form-product', 'input-text', 'qty', 'text' ), // added some class
        ),
        $_product,
        false
    );
}

echo '<div class="d-flex justify-content-center align-items-center">'; // added wrapper element
echo '<button class="btn-product btn-product-up"> <i class="las la-minus"></i></button>'; // minus button

echo apply_filters( 'woocommerce_cart_item_quantity', $product_quantity, $cart_item_key, $cart_item ); // PHPCS: XSS ok.

echo '<button class="btn-product btn-product-down"> <i class="las la-plus"></i></button>'; // plus button
echo '</div>'; // wrapper end
?>

默认输入“箭头”被 CSS 隐藏：

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

在购物车页面点击 + 和 - 按钮不会出现在更新购物车按钮上，仍然被禁用。 HTML 中包含的这个 JS 更改了输入的数值但没有启用更新按钮：

function btnproduct() {
  $('.btn-product-up').on('click', function (e) {
    e.preventDefault();
    var numProduct = Number($(this).next().val());
    if (numProduct > 1) $(this).next().val(numProduct - 1);
  });
  $('.btn-product-down').on('click', function (e) {
    e.preventDefault();
    var numProduct = Number($(this).prev().val());
    $(this).prev().val(numProduct + 1);
  }); 
};

更新按钮仅在删除 CSS 后单击默认输入箭头时启用。

【问题讨论】：

您是否尝试在更新值的两个地方触发更改？例如，$(this).next().val(numProduct - 1).trigger('change');

标签： jquery wordpress woocommerce cart product-quantity

【解决方案1】：

在您的代码中，您需要使用以下代码行从 “更新” 购物车按钮中删除 disabled 和 aria-disabled 属性：

$('[name=update_cart]').prop({'disabled': false, 'aria-disabled': false });

因此，在您的代码中，当您的自定义“减号”和“加号”按钮改变数量时：

function btnproduct() {
    $('.btn-product-up').on('click', function (e) {
        e.preventDefault();
        var numProduct = Number($(this).next().val());
        if (numProduct > 1) {
            $(this).next().val(numProduct - 1);
            $('[name=update_cart]').prop({'disabled': false, 'aria-disabled': false });
        }
    });
    $('.btn-product-down').on('click', function (e) {
        e.preventDefault();
        var numProduct = Number($(this).prev().val());
            $(this).prev().val(numProduct + 1);
            $('[name=update_cart]').prop({'disabled': false, 'aria-disabled': false });
        }
    }); 
};

经过测试并且有效。

【讨论】：

再次感谢 Loic！