Shopify：如何实现基于筛选商品列表的产品页前后切换按钮

在Shopify产品页添加了前后切换按钮，但当前按钮仅能在整个collection的所有商品间切换。需要实现：当用户在集合页选择筛选条件后点击进入产品页时，按钮能基于筛选后的商品列表进行前后切换。

原代码如下：

{%- liquid
    assign previous_product = collection.previous_product
    assign next_product = collection.next_product
       assign backFunc = 
    if previous_product or next_product
    else
        assign collectionList = product.collections[0].handle
        assign previous_product = nil
        assign next_product = nil
        assign last = collections[collectionList].products_count
        for p in collections[collectionList].products
            if p.handle == product.handle
                assign prev = forloop.index | minus: 2
                assign next = forloop.index
                if prev >= 0
                  assign previous_product = collections[collectionList].products[prev].handle
                endif
                if last >= next
                  assign next_product = collections[collectionList].products[next].handle
                endif
                break
            endif
        endfor
    endif
-%} 

{%- if previous_product -%}
            <a class="next-prev-icon prev-icon" href="{{ previous_product }}">
              Prev
            </a>
        {%- endif -%}
        {%- if next_product -%}
            <a class="next-prev-icon next-icon" href="{{ next_product }}">
                Next
            </a>
        {%- endif -%}

要实现基于筛选结果的前后切换，核心是保留并复用集合页的筛选参数，从URL中提取筛选条件后，重新查询符合条件的产品列表，再定位当前产品的位置。

改写后的代码如下：

{%- liquid
  # 优先用URL里的collection参数，没有则取产品所属的第一个集合
  assign target_collection_handle = collection.handle | default: product.collections[0].handle
  assign target_collection = collections[target_collection_handle]

  # 提取URL中的所有筛选参数（去掉分页、视图这类无关参数）
  assign filter_params = request.params | remove: 'view' | remove: 'page'
  # 初始化筛选后的产品列表
  assign filtered_products = target_collection.products

  # 处理标签筛选（根据你店铺的筛选逻辑调整）
  if filter_params contains 'tags'
    assign tag_filter = filter_params | split: '&tags=' | last
    assign filtered_products = filtered_products | where: 'tags', tag_filter
  endif
  # 处理价格区间筛选（示例，按需添加其他筛选维度）
  if filter_params contains 'price_min' and filter_params contains 'price_max'
    assign price_min = filter_params | split: '&price_min=' | last | split: '&' | first
    assign price_max = filter_params | split: '&price_max=' | last | split: '&' | first
    assign filtered_products = filtered_products | where: 'price', '>=', price_min | where: 'price', '<=', price_max
  endif

  # 遍历筛选列表，找到当前产品的索引
  assign previous_product = nil
  assign next_product = nil
  assign current_index = nil
  for product_item in filtered_products
    if product_item.handle == product.handle
      assign current_index = forloop.index0 # 从0开始计数
      break
    endif
  endfor

  # 计算上一个产品
  if current_index > 0
    assign previous_product = filtered_products[current_index | minus: 1]
  endif
  # 计算下一个产品
  if current_index != nil and current_index < filtered_products.size | minus: 1
    assign next_product = filtered_products[current_index | plus: 1]
  endif
-%}

{%- if previous_product -%}
  <a class="next-prev-icon prev-icon" href="{{ previous_product.url }}?{{ filter_params }}">
    Prev
  </a>
{%- endif -%}
{%- if next_product -%}
  <a class="next-prev-icon next-icon" href="{{ next_product.url }}?{{ filter_params }}">
    Next
  </a>
{%- endif -%}

代码说明 #

• 抓准集合和筛选条件：先获取URL中携带的集合参数（用户从筛选后的集合页进入时，URL会包含该参数），没有则用产品所属的第一个集合。同时提取用户选的筛选参数（如标签、价格区间），这是实现精准切换的核心。
• 生成匹配的产品列表：根据提取的筛选条件，对集合产品二次过滤，得到和用户在集合页看到的完全一致的列表。如果店铺还有其他筛选维度（比如品牌、尺码），照着价格筛选的逻辑补充判断即可。
• 定位产品位置并计算前后项：遍历筛选后的列表找到当前产品的索引，以此计算出前一个和后一个产品。
• 跳转保留筛选参数：跳转链接后拼接筛选参数，保证用户点击按钮后，新的产品页依然基于同一筛选结果进行切换，不会回到全集合列表。

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