Magento – AJAX Loading of Product Collection in Product Listing Page

Do you have long list of products to show on category pages and you do not want to use the standard pagination method? If you are looking to avoid this long and irritating process then don’t worry, my ajax product scroll method will help you to increase your customer attention and make their browsing experience effortless.

With the help of AJAX we can update parts of a web page without reloading the whole page giving user a more seamless browsing experience.

After spending countless hours in finding a solutions to this problem, I have successfully cracked this case by altering the default behavior of the script to make it work exactly how we needed.

Instructions for installing this extension in 3 easy do-it-yourself steps:

1.) Place this loader inside {$theme}/template/catalog/product/list.phtml: file

<div class="ajax-loader" style="display: none; font-size: 16px; clear: both; width: 100%; padding: 20px 0px; text-align: center;"><img src="&lt;?php echo $this-&gt;getSkinUrl('images/loader.gif'); ?&gt;" alt="" /></div>

2.) Place the below code at the end of {$theme}/template/catalog/category/view.phtml file:

jQuery(function() {
	jQuery(body).bind('scroll', function(){
		if (jQuery(this).scrollTop() + $(this).innerHeight() + 200 >= $(this)[0].scrollHeight){
			if (jQuery.active <= 0) {
				jQuery(".ajax-loader").show();
				var nextPageUrl = jQuery('.pages .i-next').attr('href');
				if (nextPageUrl == undefined) {
					jQuery(".ajax-loader").hide();
				} else {
					jQuery.ajax({
						url: nextPageUrl,
						success: function(msg)
						{
							jQuery(".ajax-loader").hide();
							//refresh the page class element
							jQuery('.pages').html(jQuery(msg).find('.pages').html());
							//append the list to the existing product list
							jQuery('.category-products').append(jQuery(msg).find('.category-products').html());
							//check if there are more products to be loaded or not
							return false;
						}
					});
				}
			}
		}
	});
});

3.) Now just hide the default page numbering group of elements using styling properties like display: none;

That’s it! Enjoy! 🙂

This worked for me on Magento 1.8,1.9. I hope this works for you too as I am not doing any big changes here. 🙂

Let us know how it has worked out for you, please feel to comment below if you have any suggestions or improvements, we would be glad to hear from you.

Good luck!