为WordPress首页添加Ajax加入购物车按钮（Divi主题）

问题背景 #

使用Divi主题时，通过自定义代码在首页WooCommerce产品模块添加了加入购物车按钮，但Ajax功能仅在首页失效，产品页、分类页、商店页均正常。已开启WooCommerce设置中的「Enable AJAX add to basket buttons on archives」选项。

已添加的按钮显示代码 #

add_action('template_redirect', 'work_only_on_front_page', 10);
function work_only_on_front_page(){
    if ( is_front_page() ) {
        add_action('woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_add_to_cart', 10);
    }
}

现有Ajax实现代码（其他页面正常） #

前端JS文件（ajax-add-to-cart.js）

(function ($) {
    $(document).on('click', '.single_add_to_cart_button', function (e) {
        e.preventDefault();

        var $thisbutton = $(this),
                $form = $thisbutton.closest('form.cart'),
                id = $thisbutton.val(),
                product_qty = $form.find('input[name=quantity]').val() || 1,
                product_id = $form.find('input[name=product_id]').val() || id,
                variation_id = $form.find('input[name=variation_id]').val() || 0;

        var data = {
            action: 'woocommerce_ajax_add_to_cart',
            product_id: product_id,
            product_sku: '',
            quantity: product_qty,
            variation_id: variation_id,
        };

        $(document.body).trigger('adding_to_cart', [$thisbutton, data]);

        $.ajax({
            type: 'post',
            url: wc_add_to_cart_params.ajax_url,
            data: data,
            beforeSend: function (response) {
                $thisbutton.removeClass('added').addClass('loading');
            },
            complete: function (response) {
                $thisbutton.addClass('added').removeClass('loading');
            },
            success: function (response) {
                if (response.error && response.product_url) {
                    window.location = response.product_url;
                    return;
                } else {
                    $(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, $thisbutton]);
                }
            },
        });

        return false;
    });
})(jQuery);

后端PHP代码（主题functions.php）

function woocommerce_ajax_add_to_cart_js() {
    if (is_product() || is_product_category() || is_shop() || is_front_page()) {
        wp_enqueue_script('woocommerce-ajax-add-to-cart', get_stylesheet_directory_uri() . '/assets/js/ajax-add-to-cart.js', array('jquery'), '', true);
    }
}
add_action('wp_enqueue_scripts', 'woocommerce_ajax_add_to_cart_js', 99);
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 = apply_filters('woocommerce_add_to_cart_product_id', absint($_POST['product_id']));
    $quantity = empty($_POST['quantity']) ? 1 : wc_stock_amount($_POST['quantity']);
    $variation_id = absint($_POST['variation_id']);
    $passed_validation = apply_filters('woocommerce_add_to_cart_validation', true, $product_id, $quantity);
    $product_status = get_post_status($product_id);

    if ($passed_validation && WC()->cart->add_to_cart($product_id, $quantity, $variation_id) && 'publish' === $product_status) {
        do_action('woocommerce_ajax_added_to_cart', $product_id);

        if ('yes' === get_option('woocommerce_cart_redirect_after_add')) {
            wc_add_to_cart_message(array($product_id => $quantity), true);
        }

        WC_AJAX::get_refreshed_fragments();
    } else {
        $data = array(
            'error' => true,
            'product_url' => apply_filters('woocommerce_cart_redirect_after_error', get_permalink($product_id), $product_id)
        );
        echo wp_send_json($data);
    }
    wp_die();
}

问题排查与修复步骤 #

1. 补全首页WooCommerce Ajax参数 #

首页未自动加载wc_add_to_cart_params对象，导致Ajax请求地址为空。修改脚本入队代码，手动传递参数：

function woocommerce_ajax_add_to_cart_js() {
    if (is_product() || is_product_category() || is_shop() || is_front_page()) {
        wp_enqueue_script('woocommerce-ajax-add-to-cart', get_stylesheet_directory_uri() . '/assets/js/ajax-add-to-cart.js', array('jquery'), '', true);
        // 传递Ajax请求地址到前端
        wp_localize_script('woocommerce-ajax-add-to-cart', 'wc_add_to_cart_params', array(
            'ajax_url' => admin_url('admin-ajax.php')
        ));
    }
}
add_action('wp_enqueue_scripts', 'woocommerce_ajax_add_to_cart_js', 99);

2. 兼容首页按钮类名 #

首页通过woocommerce_template_loop_add_to_cart输出的按钮类名为.add_to_cart_button，而非.single_add_to_cart_button，修改JS选择器：

// 同时兼容归档页和产品页的按钮类名
$(document).on('click', '.add_to_cart_button, .single_add_to_cart_button', function (e) {
    // 原有逻辑保持不变
});

3. 强制刷新购物车片段 #

Divi首页可能未触发默认的购物车更新事件，在JS成功回调中添加强制刷新：

success: function (response) {
    if (response.error && response.product_url) {
        window.location = response.product_url;
        return;
    } else {
        $(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, $thisbutton]);
        // 强制刷新购物车UI
        $(document.body).trigger('wc_fragment_refresh');
    }
},

验证方法 #

1. 清除浏览器缓存后刷新首页
2. 点击加入购物车按钮，观察是否出现加载动画，购物车数量是否实时更新
3. 打开浏览器控制台，确认无JS错误且Ajax请求返回成功

内容的提问来源于stack exchange，提问作者CuppaCoffee