在Woocommerce产品循环中添加自定义AJAX减少按钮的方法如下:
function custom_scripts() {
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'custom_scripts' );
jQuery(document).ready(function($) {
$('.reduce-button').on('click', function(e) {
e.preventDefault();
var productId = $(this).data('product-id');
var quantityInput = $(this).siblings('.quantity').find('input[type="number"]');
var quantity = parseInt(quantityInput.val());
if (quantity > 1) {
quantity--;
$.ajax({
url: ajaxurl,
type: 'POST',
data: {
action: 'reduce_product_quantity',
product_id: productId,
quantity: quantity
},
success: function(response) {
quantityInput.val(quantity);
}
});
}
});
});
function reduce_product_quantity() {
$product_id = $_POST['product_id'];
$quantity = $_POST['quantity'];
// 在这里执行减少产品数量的操作,例如更新数据库中的产品数量
wp_die();
}
add_action( 'wp_ajax_reduce_product_quantity', 'reduce_product_quantity' );
add_action( 'wp_ajax_nopriv_reduce_product_quantity', 'reduce_product_quantity' );
<button class="reduce-button" data-product-id="<?php echo get_the_ID(); ?>">减少</button>
这样,当用户点击减少按钮时,AJAX请求将被发送到服务器并处理产品数量的减少操作。成功后,数量输入框将更新为新的数量。
请注意,以上代码仅为示例,你需要根据你的具体需求进行适当的修改和调整。此外,如果你使用的是腾讯云的云服务器,你可以考虑使用腾讯云的云函数 SCF 来处理 AJAX 请求,腾讯云的云数据库 TDSQL 来存储产品数量等。具体的腾讯云产品和服务可以在腾讯云官网上找到相关信息。
领取专属 10元无门槛券
手把手带您无忧上云