Add Infinite Scroll Magento Extension

Answered

Follow

Waqqas

• August 16, 2016 13:28

Browsing through pagination is a thing of past now. People would love to see infinite scroll in Zoey also.

It is really needed as it makes browsing through tons of products relatively easier and quicker.

7

• Official comment

  

  Zoey

  • August 26, 2016 00:32

  Hi Waqqas, 

  Please feel free to share this useful tip! We will review it and possibly add it to our Knowledge Base to help others. 

  Comment actions Permalink
• 

  Waqqas

  • August 22, 2016 11:50

  I can provide you jQuery implementation that can do this without any server side changes. Just the javascript library can do it. I have done it on my zoey hosted site already.

  0

  Comment actions Permalink
• 

  Waqqas

  • August 27, 2016 07:42

  Sure. Here it is... 

  1st download and host Infinite AJAX Scroll library on your domain from here 

  http://infiniteajaxscroll.com/jquery-ias.min.js

  and then add Following scripts to your Global JavaScript section using design editor.

   

  This conditional check "window.location.href.toLowerCase().indexOf(".html") >= 0" is there so that it does not run on home page. Its not a bullet proof check though but i couldn't find a way to detect if its a category page or not... May be you could suggest something :)

   

  /*INFINITE SCROLL BY WAQQAS */
  if (window.location.href.toLowerCase().indexOf(".html") >= 0){
  window.ias_config={};
  windowLoadedFlag = false;
  
  window.SgyIAS = {
  debug: false,
  _log: function(object) {
  if(this.debug) {
  console.log(object);
  }
  },
  init: function(){
  jQuery.getScript("https://your-domain.com/zoey/infinitescroll/jquery-ias.min.js", function() {
  console.log('IAS Script is loaded!!');
  jQuery(function($) {
  var config = {
  item: '.zoey-product-list',
  container : '.category-products',
  next: '.next',
  pagination: '.zoey-toolbar .pager',
  delay: 600,
  negativeMargin: 150,
  history: {
  prev: '.prev'
  },
  noneleft: {
  text: '<em>All Products Loaded. The END!!.</em>',
  html: '<div class="ias-noneleft" style="text-align: center;">{text}</div>'
  },
  spinner: {
  src: 'data:image/gif;base64,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',
  html: '<div class="ias-spinner" style="text-align: center;"><img style="display:inline" src="{src}"/> <em>Loading the next set of items...</em></div>'
  },
  trigger: {
  text: 'Load more items',
  html: '<div class="ias-trigger ias-trigger-next" style="text-align: center; cursor: pointer;"><a>{text}</a></div>',
  textPrev: 'Load more items',
  htmlPrev: '<div class="ias-trigger ias-trigger-prev" style="text-align: center; cursor: pointer;"><a>{text}</a></div>',
  offset: 200 }
  };

  if (window.ias_config){
  $.extend(config, window.ias_config);
  }

  SgyIAS._log({extension: 'ias', config: config});
  window.ias = $.ias(config);

  SgyIAS._log({extension: 'paging'});
  window.ias.extension(new IASPagingExtension());

  SgyIAS._log({extension: 'spinner'});
  window.ias.extension(new IASSpinnerExtension(config.spinner));

  SgyIAS._log({extension: 'noneleft'});
  window.ias.extension(new IASNoneLeftExtension(config.noneleft));

  SgyIAS._log({extension: 'trigger'});
  window.ias.extension(new IASTriggerExtension(config.trigger));

  SgyIAS._log({extension: 'history'});
  window.ias.extension(new IASHistoryExtension(config.history));
  
  // debug events
  window.ias.on('scroll', function(scrollOffset, scrollThreshold){
  SgyIAS._log({eventName: 'scroll', scrollOffset: scrollOffset, scrollThreshold: scrollThreshold});
  });
  window.ias.on('load', function(event){
  SgyIAS._log({eventName:'load', event: event});
  });
  window.ias.on('loaded', function(data, items){
  SgyIAS._log({eventName: 'loaded', data: data, items: items});
  });
  window.ias.on('render', function(items){
  SgyIAS._log({eventName: 'render', items: items});
  });
  window.ias.on('rendered', function(items){
  SgyIAS._log({eventName: 'render', items: items});
  });
  window.ias.on('noneLeft', function(){
  SgyIAS._log({eventName: 'noneLeft'});
  });
  window.ias.on('next', function(url){
  SgyIAS._log({eventName: 'next', url: url});
  });
  window.ias.on('ready', function(){
  SgyIAS._log({eventName: 'ready'});
  });

  $('.zoey-toolbar').show();

  if(windowLoadedFlag){
  $(window).load();
  }

  SgyIAS._log('Done loading IAS.');

  });
  });
  }
  };

  SgyIAS.init();
  }
  /*INFINITE SCROLL BY WAQQAS */

  0

  Comment actions Permalink

Please sign in to leave a comment.