Shopify，通过过滤的产品列表前进和后退按钮

Question

我正在尝试制作前进和后退按钮，这些按钮将显示在集合页面的产品页面上。当在集合页面上选择过滤器然后单击产品时，我想制作根据用户选择的过滤器在列出的产品上前进和后退的按钮。我的按钮只能在整个集合页面上前进和后退。如何重写下面的代码以处理根据过滤器列出的产品？

{%- 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 -%}

我在互联网上进行了搜索，但没有找到任何结果。

Answer 1

回顾一下这篇旧文章Shopify：获取最高价格收藏中的项目以获得提示。

基本上，您将使用脚本从页面的 document.referrer 的搜索参数中检测过滤器，然后通过脚本重新运行该过滤器。翻阅过滤后的产品，当您找到产品时，您可以在客户端重建上一个和下一个按钮以指向正确的产品。

您可以使用window.sessionStorage按顺序缓存脚本化过滤器产品ID，以便在加载新页面时您可以检查缓存（其键是当前过滤器参数），如果您找到您的产品，您可以跳过查找。

如果您使用缓存路由，您还需要设置某种陈旧标准。