将数量字段添加到WooCommerce商店页面上的Ajax添加到购物车按钮

基础概念

WooCommerce 是一个流行的 WordPress 插件，用于创建和管理电子商务网站。它允许商家通过 WordPress 平台销售产品。Ajax 添加到购物车功能是一种在不刷新页面的情况下将产品添加到购物车的技术。

类型

Ajax 添加到购物车功能可以通过以下几种方式实现：

纯 JavaScript：使用原生 JavaScript 发送异步请求。
jQuery：利用 jQuery 库简化 AJAX 请求。
PHP 和 WordPress：通过 WordPress 的钩子和 WooCommerce 的 API 实现。

应用场景

适用于任何希望提升用户体验、减少页面刷新的电子商务网站。

实现步骤

以下是一个简单的示例，展示如何在 WooCommerce 商店页面上添加数量字段并实现 Ajax 添加到购物车功能。

1. 修改 WooCommerce 模板文件

首先，找到 WooCommerce 的 single-product/add-to-cart.php 文件，并添加数量字段。

// single-product/add-to-cart.php
<form class="cart" method="post" enctype='multipart/form-data'>
    <?php wp_nonce_field( 'add-to-cart', 'add-to-cart-nonce' ); ?>
    <input type="hidden" name="add-to-cart" value="<?php the_ID(); ?>" />
    <label for="quantity"><?php _e( 'Quantity', 'woocommerce' ); ?></label>
    <input type="number" step="1" min="1" id="quantity" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" />
    <button type="submit" class="single_add_to_cart_button button alt">Add to cart</button>
</form>

2. 添加 JavaScript 代码

在 single-product.php 文件中添加以下 JavaScript 代码，实现 Ajax 添加到购物车功能。

// single-product.php
<script type="text/javascript">
jQuery(document).ready(function($) {
    $('.add_to_cart_button').click(function(e) {
        e.preventDefault();
        var quantity = $('#quantity').val();
        var productId = $(this).data('product_id');
        var variationId = $(this).data('variation_id');

        $.ajax({
            url: '<?php echo esc_url( admin_url('admin-ajax.php') ); ?>',
            type: 'POST',
            data: {
                action: 'woocommerce_ajax_add_to_cart',
                product_id: productId,
                variation_id: variationId,
                quantity: quantity
            },
            success: function(response) {
                // 更新购物车数量
                $('.cart-count').text(response.data.cart_count);
                // 显示成功消息
                alert(response.data.message);
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
});
</script>

3. 添加 WordPress AJAX 处理函数

在主题的 functions.php 文件中添加以下代码，处理 Ajax 请求。

// functions.php
add_action('wp_ajax_woocommerce_ajax_add_to_cart', 'woocommerce_ajax_add_to_cart');
add_action('wp_ajax_nopriv_woocommerce_ajax_add_to_cart', 'woocommerce_ajax_add_to_cart');

function woocommerce_ajax_add_to_cart() {
    $product_id = isset($_POST['product_id']) ? sanitize_text_field($_POST['product_id']) : 0;
    $variation_id = isset($_POST['variation_id']) ? sanitize_text_field($_POST['variation_id']) : 0;
    $quantity = isset($_POST['quantity']) ? absint($_POST['quantity']) : 1;

    if ($product_id > 0) {
        WC()->cart->add_to_cart($product_id, $quantity, $variation_id);
        $cart_count = WC()->cart->get_cart_contents_count();
        $message = __('Product added to cart successfully!', 'woocommerce');
        wp_send_json_success(array('cart_count' => $cart_count, 'message' => $message));
    } else {
        wp_send_json_error(__('Invalid product ID.', 'woocommerce'));
    }
}