Magento Ajax Scroll

Link : http://www.prashantblog.com/magento-ajax-loading-product-collection-product-listing-page/

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;
}
});
}
}
}
});
});
Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

w

Connecting to %s