DanWebb
10/24/2014 - 3:08 PM

Load a collection page in parts rather than all at once. For big collections that use the filters.

Load a collection page in parts rather than all at once. For big collections that use the filters.

function autoLoad(data) {
  this.page = data.page || 2;
  this.items = data.items || 5;
  this.container = data.container || '#collection-listing';
  this.url = data.url;
  this.ajaxData = data.ajaxData;
}

autoLoad.prototype = {
  
  getNextPage: function() {
    this.ajaxData['page'] = this.page;
    this.incrementPage();
    
    return $.ajax(this.url, {
      data: this.ajaxData
    });
  },
  
  appendData: function($elem, data) {
    $elem.append(data);
  },
  
  incrementPage: function() {
    this.page += 1;
  },
  
  onStart: function() {
  	
  },
  
  load: function(callback) {
    var self = this;
    
    this.getNextPage().done(function(data) {
      if(data && data.trim() > '') {
      	self.appendData($(self.container), data);
        self.load(callback);        
      } else {
      	callback();
      }
    });
  },
  
  onFinish: function() {
  	
  },
  
  init: function() {
    var self = this;
  
    this.onStart();
    
    this.load(function() {
    	self.onFinish();
    });
  }
};

$(function() {
  var data = {
    url: '/collections/all',
    ajaxData: { view: 'ajax' },
  };

  var load = new autoLoad(data);
  load.init();
});
{% layout none %}

{% paginate collection.products by 5 %}
  {% for product in collection.products %}
	
  {% endfor %}
{% endpaginate %}