本教程详细介绍了如何在Shopify产品页面上实现基于用户筛选结果的前后产品导航功能。针对Shopify默认导航不适配筛选列表的问题，我们将探讨一种客户端脚本解决方案，利用`document.referrer`检测筛选参数，并通过JavaScript动态生成导航按钮。为提升性能，文章还建议使用`window.sessionStorage`进行筛选结果缓存，确保用户在筛选后的产品列表中获得流畅的浏览体验。
理解Shopify默认导航的局限性
在Shopify中，默认的Liquid对象（如collection.previous_product和collection.next_product）通常是基于整个产品集合的顺序来确定前后产品。这意味着，当用户在集合页面应用了筛选条件（例如按价格、标签或供应商筛选）后，如果点击进入某个产品详情页，默认的前后导航按钮仍会按照未筛选的完整集合顺序进行跳转，而非用户当前筛选结果中的顺序。这会导致用户体验上的断裂，与用户的预期不符。
提供的Liquid代码片段试图通过遍历product.collections[0].products来获取前后产品，但这依然是基于产品所属的第一个集合的完整列表，无法动态适应用户在集合页面上应用的特定筛选条件。要实现基于筛选结果的精确导航，我们需要采用客户端（浏览器端）的解决方案。
核心解决方案：客户端脚本与referrer检测
解决此问题的关键在于利用JavaScript在产品详情页动态地重建用户在集合页面的筛选上下文，并据此生成正确的前后产品链接。
1. 捕获筛选参数：利用 document.referrer
当用户从一个集合页面（应用了筛选）点击进入产品详情页时，document.referrer属性会包含来源页面的URL。这个URL通常包含了用户应用的筛选参数（例如，?filter.v.price.gte=10&filter.v.price.lte=50&filter.p.product_type=T-shirt）。
我们需要在产品详情页加载时，通过JavaScript读取document.referrer，解析出这些筛选参数。
2. 重建筛选上下文并获取产品列表
一旦我们捕获到筛选参数，下一步就是根据这些参数在客户端重建一个“虚拟”的筛选后产品列表。这通常通过以下方式实现：
- AJAX请求： 向Shopify商店的集合页面发送一个异步请求（GET），并在URL中带上从document.referrer解析出的筛选参数。例如，如果来源是 /collections/all?filter.p.vendor=BrandA，则向 /collections/all.json?filter.p.vendor=BrandA（或类似的API端点，如果Shopify主题提供了）发送请求，获取筛选后的产品数据。
- 解析HTML： 如果无法直接获取JSON数据，可以请求带有筛选参数的集合页面HTML，然后解析该HTML以提取产品列表的顺序和链接。这种方法相对复杂且脆弱。
推荐使用AJAX请求，因为它能直接获取结构化的产品数据（如产品ID、句柄等），便于处理。
3. 动态生成前后导航链接
获取到筛选后的产品列表后，我们需要：
- 识别当前产品： 在获取到的筛选列表中，找到当前产品详情页所展示的产品（可以通过产品句柄product.handle或ID进行匹配）。
- 确定前后产品： 根据当前产品在筛选列表中的索引，找到其前一个和后一个产品。
- 更新导航按钮： 将“上一页”和“下一页”按钮的href属性动态更新为对应前后产品的URL。如果当前产品是列表的第一个或最后一个，则相应地禁用或隐藏“上一页”或“下一页”按钮。
性能优化：使用 window.sessionStorage 缓存
每次加载产品详情页都执行上述步骤（解析referrer、发送AJAX请求）可能会影响性能，尤其是在用户频繁切换产品时。为了优化，可以使用window.sessionStorage来缓存筛选结果。
缓存策略：
- 生成缓存键： 将当前的筛选参数（例如，filter.p.vendor=BrandA）组合成一个唯一的字符串，作为sessionStorage的键。
- 存储数据： 当第一次获取到某个筛选条件下的产品列表时，将其产品ID或句柄的有序列表存储到sessionStorage中，键就是对应的筛选参数字符串。
- 检查缓存： 当产品详情页加载时，首先根据当前的筛选参数检查sessionStorage。如果找到了匹配的缓存数据，则直接使用缓存中的产品列表来确定前后导航，避免重新发送AJAX请求。
- 设置过期机制： sessionStorage的生命周期与当前会话绑定，浏览器关闭即清除。但为了更精细的控制，可以在缓存数据中包含一个时间戳，并设置一个“新鲜度”标准。如果缓存数据过旧，则重新获取。
示例代码（概念性 JavaScript 实现）
以下是一个概念性的JavaScript代码示例，展示了实现这一逻辑的关键步骤。请注意，这需要根据您的Shopify主题结构和产品数据API进行具体调整。
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();
});注意事项：
-
collectionApiUrl 的构建： 上述示例中的 /collections/${collectionHandle}.json 是一个假设。Shopify本身并没有直接提供一个通用的collection.json API来返回带筛选的产品列表。您可能需要：
- 利用Shopify Storefront API（如果您的应用允许）。
- 在您的Shopify主题中，创建一个自定义的Liquid模板（例如 collection.ajax.liquid），该模板只输出筛选后的产品列表的JSON数据，然后通过AJAX请求这个模板。
- 解析常规集合页面的HTML，但这会增加复杂性。
- 产品句柄与URL： 确保您能从AJAX响应中获取到产品句柄（handle），因为Shopify产品详情页的URL通常是 /products/{product-handle}。
- 错误处理： 在实际应用中，需要更健壮的错误处理机制。
- CSS样式： 确保您的“上一页”和“下一页”按钮具有正确的CSS样式，以在启用/禁用时显示良好。
- 用户体验： 在按钮加载前，可以显示一个加载指示器，避免页面元素跳动。
总结
通过客户端JavaScript结合document.referrer和window.sessionStorage，我们可以有效地在Shopify产品详情页实现基于用户筛选结果的前后产品导航。这种方法克服了Shopify默认Liquid对象的局限性，提供了更符合用户预期的无缝浏览体验。虽然实现上需要一些JavaScript开发工作，但其带来的用户体验提升是显著的。务必根据您的具体Shopify主题结构和数据获取方式，调整和完善上述示例代码。
