在Woocommerce中使用Ajax增加/减少数量可以通过以下步骤实现:
functions.php
的文件,并在其中添加以下代码:function custom_ajax_add_to_cart() {
// 获取产品ID和数量
$product_id = apply_filters('woocommerce_add_to_cart_product_id', absint($_POST['product_id']));
$quantity = empty($_POST['quantity']) ? 1 : wc_stock_amount($_POST['quantity']);
// 添加产品到购物车
$cart_item_key = WC()->cart->add_to_cart($product_id, $quantity);
// 返回购物车小部件的HTML
echo WC()->cart->get_cart_contents_count();
die();
}
add_action('wp_ajax_custom_ajax_add_to_cart', 'custom_ajax_add_to_cart');
add_action('wp_ajax_nopriv_custom_ajax_add_to_cart', 'custom_ajax_add_to_cart');
custom.js
的文件,并在其中添加以下代码:jQuery(document).ready(function($) {
// 点击增加数量按钮
$('.quantity .plus').click(function(e) {
e.preventDefault();
var $quantityInput = $(this).prev('.qty');
var currentQuantity = parseInt($quantityInput.val());
// 使用Ajax增加数量
$.ajax({
type: 'POST',
url: ajaxurl,
data: {
action: 'custom_ajax_add_to_cart',
product_id: $quantityInput.attr('data-product_id'),
quantity: currentQuantity + 1
},
success: function(response) {
// 更新购物车小部件数量
$('.cart-contents-count').text(response);
$quantityInput.val(currentQuantity + 1);
}
});
});
// 点击减少数量按钮
$('.quantity .minus').click(function(e) {
e.preventDefault();
var $quantityInput = $(this).next('.qty');
var currentQuantity = parseInt($quantityInput.val());
if (currentQuantity > 1) {
// 使用Ajax减少数量
$.ajax({
type: 'POST',
url: ajaxurl,
data: {
action: 'custom_ajax_add_to_cart',
product_id: $quantityInput.attr('data-product_id'),
quantity: currentQuantity - 1
},
success: function(response) {
// 更新购物车小部件数量
$('.cart-contents-count').text(response);
$quantityInput.val(currentQuantity - 1);
}
});
}
});
});
header.php
文件中添加以下代码,以便在购物车小部件中显示数量:<span class="cart-contents-count"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
现在,当用户点击增加/减少数量按钮时,Ajax将会通过custom_ajax_add_to_cart
函数将产品添加到购物车,并更新购物车小部件中的数量显示。
请注意,这只是一个简单的示例,你可能需要根据你的具体需求进行修改和调整。此外,这个示例假设你已经熟悉并了解Woocommerce的基本概念和使用方法。
推荐的腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云