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

Highlighted
New Member
3 0 1

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
Shopify Expert
1381 111 200

please share a store url

0 Likes
Highlighted
New Member
3 0 1
0 Likes
Highlighted
Shopify Expert
2684 67 778

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? Like it!
I am away till Feb-15.
0 Likes
Highlighted
New Member
4 0 0

Can you offer some advice on how to implement  https://elkfox.github.io/Ajaxinate/
just looking on where the codes need to be added. 

0 Likes