Shopify-, Vor- und Zurück-Schaltflächen durch gefilterte Produktliste

Question

Ich versuche, Vor- und Zurück-Schaltflächen zu erstellen, die auf der Produktseite der Kollektionsseite angezeigt werden. Wenn auf der Sammlungsseite ein Filter ausgewählt und dann auf ein Produkt geklickt wird, möchte ich Schaltflächen erstellen, die basierend auf dem vom Benutzer ausgewählten Filter durch die aufgelisteten Produkte vor- und zurückblättern. Meine Schaltflächen bewegen sich nur vorwärts und rückwärts durch die gesamte Sammlungsseite. Wie kann ich den folgenden Code umschreiben, um die aufgelisteten Produkte basierend auf einem Filter zu verarbeiten?

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

Ich habe im Internet gesucht, aber keine Ergebnisse gefunden.

Answer 1

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

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

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

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