Previous/Next Page Button that work based on collection filters

batulkr
Excursionist
43 1 2

Hey everyone!

My client wants me to build a Previous and Next Product button for their products in collections. It was easy to set up for me. However, what he wants that the buttons should go to next or previous product based on the filters that the visitor has selected in the collection page.

For demonstration, visitors will filter the collection products from left:

Capture.PNG

 

Then they will go to a product, and previous and next page buttons will act based on the filter selections of visitor.

Here is the code that I used for the buttons. They actually work, but not the way we want them.

     <div style="display: flex; justify-content: flex-end;" class="product-nav clearfix">
           <span style="">{% if collection.previous_product %}
       {{ '&larr; See Previous' | link_to: collection.previous_product }}
       {% endif %}</span>
	   <span style="">{% if collection.next_product %}
       {{ 'See Next &rarr;' | link_to: collection.next_product }}
         {% endif %}</span>
     </div>

 

Hope you can help me in this context!

Thanks in advance!

Replies 3 (3)

tim
Shopify Expert
3258 232 1178

As far as I know, you can't do this with liquid (would be happy to be wrong here 🙂

On product page you do not even know what current_tags were on collection you came from.

Can probably be done with some javascript -- on collection page put a list of filtered collection products in sessionStorage, on product page retrieve this data, find prev/next products and update the prev/next links you've got from liquid.

For collections that do not fit in pagination it will be yet more complex.

batulkr
Excursionist
43 1 2

What kind of a code can I use/write? I have very limited knowledge in JavaScript...

tim
Shopify Expert
3258 232 1178

Here is a very rough prototype which stores and retrieves the data as I mentioned, just to illustrate the idea:

 

  <script>
  {% if template.name == 'collection' and current_tags %}
    sessionStorage.setItem('product_handles', {{ collection.products | map: 'handle' | json }} );
    sessionStorage.setItem('product_titles',  {{ collection.products | map: 'title' 	| json }} );
    sessionStorage.setItem('product_urls', 	 {{ collection.products | map: 'url' 	| json }} );
  {% elsif template.name == 'product' %}
    var cHandles = sessionStorage.getItem( 'product_handles' );
    if( cHandles ){
      cHandles = cHandles.split(',');
      var cTitles  = sessionStorage.getItem( 'product_titles' ).split(',');
      var cUrls 	 = sessionStorage.getItem( 'product_urls' ).split(',');
      
      function pdata( index ){
        return cHandles[index] + " | " + cUrls[index ].replace('/products', '/collections/{{ collection.handle }}/products')  + " | " + cTitles[index]; 
      }

      var numHandles = cHandles.length;
      if( numHandles > 1 ){
        var cIndex = cHandles.indexOf( {{ product.handle | json }} );
        if( cIndex >=0 )
          console.log(	"Curent product : " + cHandles[cIndex] 		);
          console.log( cIndex == 0 	? 	"First product" 
                      : "Prev product is: " + pdata( cIndex - 1 ) );
          console.log( cIndex ==  numHandles -1  ? "Last product" 
                      : "Next product is: " + pdata( cIndex + 1) );
      }
    }
  {% else %}
    sessionStorage.removeItem('product_handles');      
  {% endif %}
  
  </script>