使用 WooCommerce 购物车中的自定义数量按钮启用 "Update cart" 数量更改按钮

Question

我已购买 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 后，更新按钮仅在单击默认输入箭头时启用。

Answer 1

在您的代码中，您需要使用以下代码行从 "Update" 购物车按钮中删除 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 });
        }
    }); 
};

已测试并有效。

使用 WooCommerce 购物车中的自定义数量按钮启用 "Update cart" 数量更改按钮

Enable "Update cart" button on quantity change with custom quantity buttons in WooCommerce cart

wordpress

jquery

cart

woocommerce

product-quantity