Code used to initiate infinite-scroll on Magento category page
<script>
jQuery(document).ready(function(){
jQuery('.products-grid').infinitescroll({
loading: {
finished: undefined,
finishedMsg: 'No more products available.',
img: '<?php echo $this->getSkinUrl('dist/images/ajax-loader.gif'); ?>',
msg: null,
msgText: '',
selector: null,
speed: 'fast',
start: undefined
},
state: {
isDuringAjax: false,
isInvalidPage: false,
isDestroyed: false,
isDone: false, // For when it goes all the way through the archive.
isPaused: false,
currPage: 1
},
binder: jQuery(window), // used to cache the selector for the element that will be scrolling
nextSelector: ".pages a.next",
navSelector: ".pages",
// contentSelector: null, // rename to pageFragment
extraScrollPx: 150,
itemSelector: ".item",
animate: false,
dataType: 'html',
appendCallback: true,
bufferPx: 40,
behavior: 'twitter',
errorCallback: function () { },
infid: 0, //Instance ID
maxPage: <?php echo $this->getLastPageNum() ?> // to manually control maximum page (when maxPage is undefined, maximum page limitation is not work)
}, function(){
jQuery('body').addClass('callback-test');
// NEED TO ADD CODE HERE TO MAKE SURE COLOR SWATCHES PRO LOADS AGAIN ON NEW ITEMS
});
jQuery(window).unbind('.infscr');
jQuery('.pages a.load-more').click(function(){
jQuery('.item').infinitescroll('retrieve');
return false;
});
});
</script>