"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
Shopify Partner
1125 90 137

please share a store url

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
0 Likes
New Member
2 0 0
0 Likes
Shopify Expert
2648 60 643

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!
0 Likes
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