"Infinite" scrolling for products in collection pages - Brooklyn Theme with sections

New Member
2 0 0

Hello,

 

I would like to know if there is a way to create an infinite scroll to my collection pages. Currently, I am using the standard pagination found in the Brooklyn theme that separates collection pages by adding the ?page=X element at the end of the URL. Ultimately, I would like to get rid of the pages and have all products on the same collection page by executing an infinite scroll function when a visitor reaches to the end of the "first" page of products in collection pages.

 

I've been trying to figure out how to implement the infinite scroll made by davecap in Github found here:

https://gist.github.com/davecap/1187078/ebae13b05f80fabfd03fffa54bf79c264230120f

 

I seem to have run into a brick wall since the code was created before sections were implemented to the Brooklyn theme. Any help in this matter would be much appreciated.

 

If I understand correctly, this code should be inserted to the end of my theme.liquid:

 

    {% if template contains 'collection' %}
         function ScrollExecute() {
           if($(document).height() - 800 < ($(document).scrollTop() + $(window).height())) {
               scrollNode = $('.product#more').last();    
               scrollURL = $('.product#more p a').last().attr("href");
               if(scrollNode.length > 0 && scrollNode.css('display') != 'none') {
                   $.ajax({
                       type: 'GET',
                       url: scrollURL,
                       beforeSend: function() {
                           scrollNode.clone().empty().insertAfter(scrollNode).append('<img src=\"{{ "loading.gif" | asset_url }}\" />');
                           scrollNode.hide();
                       },
                       success: function(data) {
                           // remove loading feedback
                           scrollNode.next().remove();
                           var filteredData = $(data).find(".product");
                           filteredData.insertBefore( $("#product-list-foot") );                   
                       },
                       dataType: "html"
                   });
               }
           }
         }
 
         $(document).ready(function () {
           $(window).scroll(function(){
               $.doTimeout( 'scroll', 200, ScrollExecute);
           });
         });
    {% endif %}

I am having trouble figuring out how to implement the rest of the githubs code to my theme and I am in a desperate need of help.

0 Likes
Highlighted

please share a store url

Thanks & Regards
Perennial Solution

Would like to add new functionality or customize an existing one, please hire us.
If helpful then please Like and Accept Solution .
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
0 Likes
New Member
2 0 0
0 Likes
Shopify Partner
2536 31 562

Mike, have you looked at Ajaxinate?

It's a live project and I've successfully used it several times...

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes