Magento Ajax Scroll

Link :

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 ( <= 0) {
var nextPageUrl = jQuery('.pages .i-next').attr('href');
if (nextPageUrl == undefined) {
} else {
url: nextPageUrl,
success: function(msg)
//refresh the page class element
//append the list to the existing product list
//check if there are more products to be loaded or not
return false;

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s