如何在WordPress中实现自定义文章类型的选品跨页管理功能

首先修正当前HTML的核心问题：所有<li>的id重复为ad-1230，这会导致无法唯一识别广告项。需将每个li的id改为ad-{文章ID}（如ad-1230、ad-1231），同时把复选框的value设为对应文章ID（替换[object Object]），这是后续功能实现的基础。

整体方案思路 #

采用localStorage存储选中的广告ID（跨页面持久化、无需后端会话），结合前端JS同步状态，后端通过AJAX拉取广告数据渲染购物车。核心实现分为三部分：搜索页选中状态管理、购物车页数据渲染与删除、跨页状态同步。

1. 搜索页（site/ooh）前端逻辑 #

负责监听复选框操作、维护选中ID数组、同步DOM状态，页面加载时自动恢复之前的选中记录。

// 统一存储键名
const CART_STORAGE_KEY = 'en_ads_cart';

// 获取本地存储的已选广告ID数组
function getSelectedAds() {
    const storedData = localStorage.getItem(CART_STORAGE_KEY);
    return storedData ? JSON.parse(storedData) : [];
}

// 保存已选ID（自动去重）
function saveSelectedAds(adsIds) {
    const uniqueIds = [...new Set(adsIds)];
    localStorage.setItem(CART_STORAGE_KEY, JSON.stringify(uniqueIds));
}

// 页面加载时恢复选中状态
function restoreSelectionState() {
    const selectedIds = getSelectedAds();
    document.querySelectorAll('.ad-item').forEach(item => {
        const adId = item.id.replace('ad-', '');
        const checkbox = item.querySelector('.ad-item__info--add-to-pdf');
        
        if (selectedIds.includes(adId)) {
            item.classList.add('ad-item--add-to-cart');
            checkbox.checked = true;
        } else {
            item.classList.remove('ad-item--add-to-cart');
            checkbox.checked = false;
        }
    });
}

// 监听复选框点击事件
document.addEventListener('change', (e) => {
    if (!e.target.classList.contains('ad-item__info--add-to-pdf')) return;
    
    const adItem = e.target.closest('.ad-item');
    const adId = adItem.id.replace('ad-', '');
    let selectedIds = getSelectedAds();

    // 更新选中数组
    if (e.target.checked) {
        selectedIds.push(adId);
    } else {
        selectedIds = selectedIds.filter(id => id !== adId);
    }

    saveSelectedAds(selectedIds);
    adItem.classList.toggle('ad-item--add-to-cart', e.target.checked);
});

// 页面加载完成后恢复状态
document.addEventListener('DOMContentLoaded', restoreSelectionState);

2. 购物车页（site/ooh-cart）实现 #

分为后端模板渲染和前端交互两部分，通过AJAX拉取选中广告的数据，并支持删除操作。

2.1 WordPress模板文件（ooh-cart.php）

创建自定义页面模板用于展示购物车：

<?php
/*
Template Name: OOH 广告购物车
*/
get_header();
?>

<div class="ooh-cart-wrapper">
    <h2>我的广告购物车</h2>
    <div id="cart-items" class="cart-items-list"></div>
    <div id="cart-empty" style="display: none; margin: 20px 0;">购物车为空</div>
</div>

<script>
const CART_STORAGE_KEY = 'en_ads_cart';

// 复用搜索页的存储操作函数
function getSelectedAds() {
    const storedData = localStorage.getItem(CART_STORAGE_KEY);
    return storedData ? JSON.parse(storedData) : [];
}

function saveSelectedAds(adsIds) {
    const uniqueIds = [...new Set(adsIds)];
    localStorage.setItem(CART_STORAGE_KEY, JSON.stringify(uniqueIds));
}

// 渲染购物车列表
function renderCart() {
    const selectedIds = getSelectedAds();
    const cartContainer = document.getElementById('cart-items');
    const emptyMsg = document.getElementById('cart-empty');

    if (selectedIds.length === 0) {
        cartContainer.innerHTML = '';
        emptyMsg.style.display = 'block';
        return;
    }

    emptyMsg.style.display = 'none';

    // 发送AJAX请求获取广告数据
    fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-WP-Nonce': '<?php echo wp_create_nonce('en_ads_cart_nonce'); ?>'
        },
        body: `action=fetch_en_ads_cart&ads_ids=${selectedIds.join(',')}`
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            let cartHtml = '<ul>';
            data.items.forEach(item => {
                cartHtml += `
                <li class="cart-item" data-id="${item.id}">
                    <img src="${item.image}" alt="${item.title}" class="cart-item-img">
                    <div class="cart-item-info">
                        <h4>${item.title}</h4>
                        <p>地区：${item.state} ${item.city}</p>
                        <p>价格：${item.price}</p>
                        <button class="remove-item" data-id="${item.id}">删除</button>
                    </div>
                </li>
                `;
            });
            cartHtml += '</ul>';
            cartContainer.innerHTML = cartHtml;
            bindRemoveEvents();
        }
    });
}

// 绑定删除按钮事件
function bindRemoveEvents() {
    document.querySelectorAll('.remove-item').forEach(btn => {
        btn.addEventListener('click', () => {
            const adId = btn.dataset.id;
            let selectedIds = getSelectedAds();
            selectedIds = selectedIds.filter(id => id !== adId);
            saveSelectedAds(selectedIds);
            renderCart();
        });
    });
}

// 页面加载时渲染购物车
document.addEventListener('DOMContentLoaded', renderCart);
</script>

<?php get_footer(); ?>

2.2 WordPress AJAX处理函数（functions.php）

添加后端逻辑，根据ID拉取en-ads类型的文章数据：

// AJAX获取购物车广告数据（登录/未登录用户均可访问）
add_action('wp_ajax_fetch_en_ads_cart', 'fetch_en_ads_cart_items');
add_action('wp_ajax_nopriv_fetch_en_ads_cart', 'fetch_en_ads_cart_items');

function fetch_en_ads_cart_items() {
    // 验证请求合法性
    if (!wp_verify_nonce($_POST['X-WP-Nonce'], 'en_ads_cart_nonce')) {
        wp_send_json_error('非法请求');
    }

    $ads_ids = isset($_POST['ads_ids']) ? explode(',', $_POST['ads_ids']) : [];
    $cart_items = [];

    foreach ($ads_ids as $id) {
        $post = get_post(intval($id));
        if (!$post || $post->post_type !== 'en-ads') continue;

        // 替换为你实际的自定义字段名
        $cart_items[] = [
            'id' => $id,
            'title' => get_the_title($id),
            'image' => get_the_post_thumbnail_url($id, 'medium'),
            'state' => get_post_meta($id, 'ad_state', true),
            'city' => get_post_meta($id, 'ad_city', true),
            'price' => get_post_meta($id, 'ad_price', true)
        ];
    }

    wp_send_json_success(['items' => $cart_items]);
}

3. 关键特性说明 #

• 跨页存储与去重：通过localStorage持久化存储，利用Set自动去重，确保同一广告不会重复添加
• 状态同步：搜索页加载时自动恢复选中状态，购物车页删除后返回搜索页也会同步取消选中
• 删除功能：购物车页点击删除按钮后，更新本地存储并重新渲染列表

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