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 %}