Shopify, forward and back buttons through filtered product list

Question

I'm trying to make forward and back buttons that will be displayed on the product page of the collection page. When a filter is selected on a collection page and then a product is clicked, I would like to make buttons that go forward and back through the listed products based on the filter selected by the user. My buttons only go forward and back through the entire collection page. How can I rewrite the code below to handle products listed based on a filter?

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

I searched on the internet but didn't find any results.

Answer 1

Review this old article Shopify: Get Highest Priced Items in Collections for tips.

Basically, you would use a script to detect the filter from the search parameters of the page's document.referrer and then rerun the filter through the script. Scroll through the filtered products, and when you find a product, you can rebuild the previous and next buttons client-side to point to the correct product.

You can cache scripted filter product IDs in order using window.sessionStorage so that when a new page loads you can check the cache (whose key is the current filter parameter) and if you find your Products, you can skip the search.

If you use cache routing, you will also need to set some kind of staleness criteria.