Shopify：实现基于筛选结果的产品页面前后导航

document.addEventListener('DOMContentLoaded', () => {
    const currentProductHandle = window.Shopify.product.handle; // 获取当前产品句柄
    const prevButton = document.querySelector('.prev-icon'); // 假设您的上一页按钮有此class
    const nextButton = document.querySelector('.next-icon'); // 假设您的下一页按钮有此class

    // 禁用默认按钮，直到确定新的链接
    if (prevButton) prevButton.style.display = 'none';
    if (nextButton) nextButton.style.display = 'none';

    async function updateFilteredNavigation() {
        const referrer = document.referrer;
        if (!referrer || !referrer.includes('/collections/')) {
            // 如果没有referrer或不是从集合页跳转，则不处理
            console.log('Not coming from a collection page or no referrer.');
            return;
        }

        const referrerUrl = new URL(referrer);
        const searchParams = referrerUrl.searchParams;
        const collectionHandle = referrerUrl.pathname.split('/').pop(); // 获取集合句柄

        // 提取所有筛选参数
        const filterParams = {};
        searchParams.forEach((value, key) => {
            if (key.startsWith('filter.')) {
                filterParams[key] = value;
            }
        });

        const filterQueryString = new URLSearchParams(filterParams).toString();
        const cacheKey = `filtered_products_${collectionHandle}_${filterQueryString}`;
        let filteredProductHandles = JSON.parse(sessionStorage.getItem(cacheKey));

        // 检查缓存
        if (filteredProductHandles && filteredProductHandles.timestamp && (Date.now() - filteredProductHandles.timestamp < 3600000)) { // 缓存1小时
            console.log('Using cached filtered product list.');
            filteredProductHandles = filteredProductHandles.data;
        } else {
            console.log('Fetching filtered product list...');
            try {
                // 构建AJAX请求URL，这里假设Shopify主题支持某种JSON API或您能解析HTML
                // 这是一个示例，您可能需要根据您的Shopify主题和应用来调整这个URL和解析逻辑
                const collectionApiUrl = `/collections/${collectionHandle}.json?${filterQueryString}`; // 示例：获取JSON数据
                const response = await fetch(collectionApiUrl);
                const data = await response.json();

                // 提取产品句柄列表
                filteredProductHandles = data.products.map(p => p.handle);

                // 缓存结果
                sessionStorage.setItem(cacheKey, JSON.stringify({
                    data: filteredProductHandles,
                    timestamp: Date.now()
                }));

            } catch (error) {
                console.error('Failed to fetch filtered products:', error);
                return;
            }
        }

        if (!filteredProductHandles || filteredProductHandles.length === 0) {
            console.log('No products found after filtering.');
            return;
        }

        const currentIndex = filteredProductHandles.indexOf(currentProductHandle);

        if (currentIndex === -1) {
            console.log('Current product not found in filtered list.');
            return;
        }

        // 确定前后产品
        const prevProductHandle = filteredProductHandles[currentIndex - 1];
        const nextProductHandle = filteredProductHandles[currentIndex + 1];

        // 更新按钮链接
        if (prevButton && prevProductHandle) {
            prevButton.href = `/products/${prevProductHandle}`;
            prevButton.style.display = 'block';
        } else if (prevButton) {
            prevButton.style.display = 'none'; // 已经是第一个产品
        }

        if (nextButton && nextProductHandle) {
            nextButton.href = `/products/${nextProductHandle}`;
            nextButton.style.display = 'block';
        } else if (nextButton) {
            nextButton.style.display = 'none'; // 已经是最后一个产品
        }
    }

    updateFilteredNavigation();
});