dima7b
2/16/2017 - 9:42 PM

Code used to initiate infinite-scroll on Magento category page

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>