WooCommerce如何通过AJAX实现一键添加多个交叉销售商品到购物车

第一步：修改交叉销售展示代码 #

替换你现有的show_cross_sell_in_single_product函数代码，改动点：给按钮添加标识、存储交叉销售商品ID、注入AJAX所需的安全参数：

add_action('woocommerce_single_product_cols_before', 'show_cross_sell_in_single_product', 1200);
function show_cross_sell_in_single_product(){
    $crosssells = get_post_meta( get_the_ID(), '_crosssell_ids',true);
    $args = array(
        'post_type'         => 'product',
        'posts_per_page'=> -1,
        'post__in'          => $crosssells,
        'tax_query'     => array(
          array(
              'relation' => 'OR',
              array(
                  'taxonomy' => 'product_visibility',
                  'field'    => 'name',
                  'terms'    => 'exclude-from-catalog',
                  'operator' => 'NOT IN',
              ),
              array(
                  'taxonomy' => 'product_visibility',
                  'field'    => 'name',
                  'terms'    => 'exclude-from-catalog',
                  'operator' => '=',
              ),
          )
      ),
        );
    $products_crosssells = new WP_Query( $args );
    $products_crosssells_ids = wp_list_pluck( $products_crosssells->posts, 'ID' );
    if( $products_crosssells->have_posts() ) :  ?>
        <div class="crosssell-products-wrap">
            <ul>
                <?php while ( $products_crosssells->have_posts() ) : $products_crosssells->the_post(); ?>
                    <?php wc_get_template_part( 'content', 'product-crosssells' ); ?>
                <?php endwhile; ?>
            </ul>
            <!-- 给按钮加类和数据属性 -->
            <a href="#" class="button multi-crosssell-addtocart" data-crosssell-ids="<?php echo esc_attr(json_encode($products_crosssells_ids)); ?>">一键添加全部到购物车</a>
        </div>
        <!-- 注入AJAX配置 -->
        <script type="text/javascript">
            const crosssellConfig = {
                ajaxUrl: "<?php echo esc_url(admin_url('admin-ajax.php')); ?>",
                nonce: "<?php echo wp_create_nonce('multi_add_to_cart_nonce'); ?>"
            }
        </script>
    <?php endif;
    wp_reset_postdata();
}

第二步：完善服务端AJAX处理代码 #

给现有接口添加CSRF安全校验，替换你原来的服务端代码：

add_action('wp_ajax_multi_add_to_cart', 'multi_ajax_add_to_cart');
add_action('wp_ajax_nopriv_multi_add_to_cart', 'multi_ajax_add_to_cart');
function multi_ajax_add_to_cart() {
    // 新增安全校验
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'multi_add_to_cart_nonce')) {
        wp_send_json_error('非法请求');
    }
    if (isset($_POST['items']) ) {
        $item_keys = array();
        foreach( $_POST['items'] as $item ) {
            if( isset($item['id']) ) {
                $item_qty  = isset($item['qty']) && $item['qty'] > 1 ? $item['qty'] : 1;
                $item_keys[] = WC()->cart->add_to_cart($item['id'], $item_qty);
            }
        }
        wp_send_json_success($item_keys);
    }
    wp_send_json_error('没有可添加的商品');
    die();
}

第三步：添加前端交互JS代码 #

将以下代码添加到主题的自定义JS文件中，或者直接插入到页脚：

jQuery(function($){
    // 绑定一键加购按钮点击事件
    $('.multi-crosssell-addtocart').on('click', function(e){
        e.preventDefault();
        const $btn = $(this);
        // 禁止重复点击
        $btn.addClass('loading disabled').text('添加中...');
        // 拿到商品ID
        const productIds = JSON.parse($btn.data('crosssell-ids'));
        // 组装请求参数
        const items = productIds.map(id => { return {id: id, qty: 1} });
        // 发送AJAX请求
        $.ajax({
            url: crosssellConfig.ajaxUrl,
            type: 'POST',
            data: {
                action: 'multi_add_to_cart',
                nonce: crosssellConfig.nonce,
                items: items
            },
            success: function(res){
                if(res.success){
                    // 触发WooCommerce默认的购物车更新事件，自动刷新购物车碎片
                    $(document.body).trigger('wc_fragment_refresh');
                    $btn.text('添加成功');
                    setTimeout(() => {
                        $btn.removeClass('loading disabled').text('一键添加全部到购物车');
                    }, 2000);
                    // 可自定义加购成功后的提示
                    alert('所有交叉销售商品已成功添加到购物车');
                }else{
                    alert(res.data || '添加失败，请稍后重试');
                    $btn.removeClass('loading disabled').text('一键添加全部到购物车');
                }
            },
            error: function(){
                alert('请求失败，请检查网络');
                $btn.removeClass('loading disabled').text('一键添加全部到购物车');
            }
        })
    })
})

注意事项 #

• 当前实现仅支持简单商品，如果你有可变商品需要添加，需要额外获取选中的变体ID，调整参数组装逻辑即可
• 按钮的样式可根据你的主题自行调整multi-crosssell-addtocart类的CSS

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