Previous/Next Page Button that work based on collection filters

batulkr
Excursionist
35 1 1

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!

0 Likes
tim
Shopify Expert
2927 143 1037

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.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
batulkr
Excursionist
35 1 1

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

0 Likes
tim
Shopify Expert
2927 143 1037

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>

 

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes