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，以便在載入新頁面時可以檢查快取（其鍵是目前篩選器參數），如果您找到您的產品，您可以跳過查找。

如果您使用快取路由，您還需要設定某種陳舊標準。