本教程详细阐述如何在Shopify产品页面实现基于用户筛选条件的前进/后退导航功能。针对Shopify默认Liquid对象无法识别筛选状态的问题，我们将采用客户端JavaScript方案。核心思路包括从referrer URL捕获筛选参数、客户端动态获取并排序筛选后的产品列表、更新导航按钮链接，并利用sessionStorage进行性能优化，以提供无缝的用户体验。
Shopify产品页面过滤后导航的挑战
在Shopify商店中，当用户在集合页面（Collection Page）应用了筛选器（如按品牌、价格或标签筛选）后，点击进入某个产品详情页，通常会希望产品页面上的“上一个”和“下一个”按钮能够继续在当前筛选条件下的产品列表中进行导航，而不是回到整个集合的默认顺序。
Shopify的Liquid模板语言提供了 collection.previous_product 和 collection.next_product 对象，它们确实能实现产品间的导航。然而，这些对象是基于Shopify集合的默认产品顺序（或通过后台设置的排序方式），并且在服务器端渲染时生成。这意味着它们无法感知用户在集合页面上应用的动态筛选条件。当用户从一个已筛选的集合页面进入产品详情页时，默认的导航按钮会忽略这些筛选条件，导致用户体验不连贯。
为了解决这一问题，我们需要一种客户端（浏览器端）的解决方案，利用JavaScript来动态捕获筛选状态、获取筛选后的产品列表，并据此更新导航按钮。
解决方案概述：客户端JavaScript实现
实现基于筛选条件的产品导航，其核心在于将集合页面的筛选上下文传递到产品详情页，并在产品详情页上重新构建或模拟该筛选过程，从而确定当前产品在筛选列表中的位置及其相邻产品。
整个流程可以概括为以下几个步骤：
- 捕获筛选参数： 在产品详情页加载时，通过 document.referrer 获取用户从哪个页面跳转而来，并解析其中的筛选参数。
- 客户端获取筛选后的产品列表： 根据捕获到的筛选参数，在客户端重新获取（或模拟获取）符合这些条件的产品列表。
- 定位当前产品： 在筛选后的产品列表中找到当前正在查看的产品。
- 动态更新导航按钮： 根据当前产品在筛选列表中的位置，确定“上一个”和“下一个”产品的URL，并更新页面上的导航按钮链接。
- 性能优化（可选）： 利用 sessionStorage 缓存筛选结果，避免重复的网络请求和处理，提升用户体验。
详细实现步骤
1. 捕获筛选参数
当用户从一个已筛选的集合页面点击产品链接时，该集合页面的URL会作为 document.referrer 传递给产品详情页。我们可以通过JavaScript解析这个URL，提取出筛选相关的查询参数。
// product-page-navigation.js
document.addEventListener('DOMContentLoaded', function() {
const referrer = document.referrer;
let filterParams = '';
if (referrer) {
try {
const referrerUrl = new URL(referrer);
// 检查referrer是否来自Shopify的collection页面，并包含筛选参数
if (referrerUrl.pathname.includes('/collections/') && referrerUrl.search) {
// 提取所有查询参数，特别是Shopify的filter参数
filterParams = referrerUrl.search;
// 示例：/collections/all?filter.p.vendor=Nike&filter.v.price.gte=100
}
} catch (e) {
console.error('Failed to parse referrer URL:', e);
}
}
// 如果没有有效的筛选参数，可能意味着用户直接访问了产品页，
// 或者从非筛选页面跳转，此时可以使用默认的导航逻辑或禁用按钮。
if (filterParams) {
console.log('Detected filter parameters from referrer:', filterParams);
// 接下来使用这些filterParams来获取筛选后的产品列表
// ...
} else {
console.log('No specific filter parameters detected. Using default collection navigation or disabling.'); 
