Add Continuous Scroll to Datafeedr
Datafeedr is an amazing product but out of the box it doesn’t come with continuous scroll.
Here is how I implemented continuous scroll for datafeedr on various sites:
Set Up Product List Template
- Add a div around your product list so that you can reference this product list and add new products to it as they are required.
- Add a div outside the datafeedr product loop so that you can show a ‘loading products’ type message.
[product.each]
....
[product.end]
Loading More Products...
Once you have wrapped your datafeedr product loop with the next div, continue to the next step where we actually add the code that performs continuous scroll.
Add Javascript Code To Product List Template
The javascript/jquery code is what actually performs the continuous scroll.
- It detects when the user has scrolled to within 500px of the bottom of the screen
- Providing another ajax call is not already running AND we are not at the last page already, it performs an Ajax call to fetch the next page
- When that next page returns, it grabs the contents of the div you defined above and adds them to the one on this page.
To implement, paste this code at the bottom of your product list template in Datafeedr:
Remove Pagination Links
Save your product list template and remove any other pagination link blocks you may have.
Test and Enjoy
Continuous scroll is amazing. You can add extra functionality like Google Analytics tracking at the point when the ajax call is made and plenty of other funky stuff.
Troubleshooting
The code relies on the div #ajaxproducts existing OUTSIDE of your [product.each] loop.
This line is important and MAY require modification, depending on how your Datafeedr template is structured:
nextproductset = jQuery('#ajaxproducts .t1', jQuery(data));
The part ‘#ajaxproducts .t1’ is grabbing all the elements with a class of t1 from within the ‘ajaxproducts’ div.
If you have problems with products loading on scroll, the likeliest cause is that you have a different class which contains your products.
To explain: In the default datafeedr templates, each product is typically contained within a div with a class of “t1 col3” or “t1 col1” or similar. This means ‘#ajaxproducts .t1’ will grab all those products from the next page (which are then inserted onto this current page to make continuous scroll work).
If you have a different structure, e.g. if you use the Responsive product list I created for Datafeedr, then this part of the code is all that needs to change. You can actually view it on that page (since I include the full continuous scroll solution on that responsive product list template too) and it looks like this:
nextproductset = jQuery('.awdproductlist .awdproduct', jQuery(data));
That’s because the div outside of the [products.each] loop in that template uses a class rather than an id (hence the . prefix rather than the # prefix) and the products are each contained within a div with a class name of ‘awdproduct’.
Looking at your code, you should be able to see what the class name is for your products – if you have any difficulties, post your question below and I’ll help you out.
Some Performance Notes
This will continue working infinitely or until your browser runs out of memory for storing the images as you scroll.
If you have social media counters, like Facebook likes, on top of your products, performance will suffer with continuous scroll as you have to refresh the counters too.
Static image buttons (like the Pinterest buttons at Bag Saver) that connect to Sharer URLs work extremely fast if you can handle not having the social media count per product.
- How to create a tree of categories from a custom taxonomy - September 22, 2014
- Managing postcodes and locations with WPAllImport - September 22, 2014
- Why do affiliate merchants reject your website? - August 20, 2014