实现Shopify产品页面的过滤后导航：打造智能前进/后退按钮

本教程详细阐述如何在Shopify产品页面实现基于用户筛选条件的前进/后退导航功能。针对Shopify默认Liquid对象无法识别筛选状态的问题，我们将采用客户端JavaScript方案。核心思路包括从referrer URL捕获筛选参数、客户端动态获取并排序筛选后的产品列表、更新导航按钮链接，并利用sessionStorage进行性能优化，以提供无缝的用户体验。

Shopify产品页面过滤后导航的挑战

在Shopify商店中，当用户在集合页面（Collection Page）应用了筛选器（如按品牌、价格或标签筛选）后，点击进入某个产品详情页，通常会希望产品页面上的“上一个”和“下一个”按钮能够继续在当前筛选条件下的产品列表中进行导航，而不是回到整个集合的默认顺序。

Shopify的Liquid模板语言提供了 collection.previous_product 和 collection.next_product 对象，它们确实能实现产品间的导航。然而，这些对象是基于Shopify集合的默认产品顺序（或通过后台设置的排序方式），并且在服务器端渲染时生成。这意味着它们无法感知用户在集合页面上应用的动态筛选条件。当用户从一个已筛选的集合页面进入产品详情页时，默认的导航按钮会忽略这些筛选条件，导致用户体验不连贯。

为了解决这一问题，我们需要一种客户端（浏览器端）的解决方案，利用JavaScript来动态捕获筛选状态、获取筛选后的产品列表，并据此更新导航按钮。

Levity

AI帮你自动化日常任务

206

查看详情

解决方案概述：客户端JavaScript实现

实现基于筛选条件的产品导航，其核心在于将集合页面的筛选上下文传递到产品详情页，并在产品详情页上重新构建或模拟该筛选过程，从而确定当前产品在筛选列表中的位置及其相邻产品。

整个流程可以概括为以下几个步骤：

1. 捕获筛选参数： 在产品详情页加载时，通过 document.referrer 获取用户从哪个页面跳转而来，并解析其中的筛选参数。
2. 客户端获取筛选后的产品列表： 根据捕获到的筛选参数，在客户端重新获取（或模拟获取）符合这些条件的产品列表。
3. 定位当前产品： 在筛选后的产品列表中找到当前正在查看的产品。
4. 动态更新导航按钮： 根据当前产品在筛选列表中的位置，确定“上一个”和“下一个”产品的URL，并更新页面上的导航按钮链接。
5. 性能优化（可选）： 利用 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.');

以上就是实现Shopify产品页面的过滤后导航：打造智能前进/后退按钮的详细内容，更多请关注php中文网其它相关文章！