You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

WooCommerce购物车项加复选框:选中时存产品ID到全局数组

因为前端JS和后端PHP是分离运行的,没法直接在JS函数里执行PHP代码,得通过AJAX实现前后端通信来完成需求。下面是具体的修改步骤:


第一步:修改购物车项的复选框代码

替换你原来的复选框部分,让每个复选框绑定对应产品的ID,同时调整事件监听方式:

<td>
    <?php 
    // 获取当前购物车项对应的产品ID
    $product_id = $_product->get_id();
    ?>
    <input type="checkbox" name="selected_products[]" value="<?php echo esc_attr($product_id); ?>" class="product-select-checkbox">
</td>

第二步:添加前端AJAX处理脚本

在cart.php页面的底部(比如</body>标签前)插入这段JS代码,监听复选框的勾选状态变化,实时向后端发送请求:

<script>
jQuery(document).ready(function($) {
    $('.product-select-checkbox').on('change', function() {
        const productId = $(this).val();
        const isChecked = $(this).is(':checked');

        $.ajax({
            url: '<?php echo admin_url('admin-ajax.php'); ?>',
            type: 'POST',
            data: {
                action: 'update_selected_products',
                product_id: productId,
                is_checked: isChecked
            },
            success: function(res) {
                // 可根据需求添加成功提示,比如console.log(res.data);
            },
            error: function(xhr) {
                console.log('请求出错:', xhr.responseText);
            }
        });
    });
});
</script>

第三步:在主题functions.php中添加后端处理逻辑

这段PHP代码会接收AJAX请求,把选中的产品ID存储到会话(session)的全局数组里(普通PHP全局数组会在请求结束后销毁,session能在用户会话周期内保留数据):

// 初始化session,确保会话可用
add_action('init', function() {
    if (!session_id()) {
        session_start();
    }
});

// 处理登录用户的AJAX请求
add_action('wp_ajax_update_selected_products', 'update_selected_products');
// 处理未登录用户的AJAX请求
add_action('wp_ajax_nopriv_update_selected_products', 'update_selected_products');

function update_selected_products() {
    // 校验请求参数
    if (!isset($_POST['product_id']) || !isset($_POST['is_checked'])) {
        wp_send_json_error('参数不合法');
    }

    $product_id = intval($_POST['product_id']);
    $is_checked = $_POST['is_checked'] === 'true';

    // 初始化存储选中产品的数组
    if (!isset($_SESSION['selected_products'])) {
        $_SESSION['selected_products'] = [];
    }

    if ($is_checked) {
        // 勾选时添加产品ID,避免重复
        if (!in_array($product_id, $_SESSION['selected_products'])) {
            $_SESSION['selected_products'][] = $product_id;
        }
    } else {
        // 取消勾选时移除对应产品ID
        $key = array_search($product_id, $_SESSION['selected_products']);
        if ($key !== false) {
            unset($_SESSION['selected_products'][$key]);
            // 重新索引数组,避免空索引
            $_SESSION['selected_products'] = array_values($_SESSION['selected_products']);
        }
    }

    wp_send_json_success('操作完成,当前选中产品ID:' . implode(',', $_SESSION['selected_products']));
}

内容的提问来源于stack exchange,提问作者user13047397

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.08 23:50:11