Add Infinite Scroll Magento Extension

Answered

Comments

3 comments

  • Official comment
    Avatar
    Zoey Support

    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
  • Avatar
    Waqqas

    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
  • Avatar
    Waqqas

    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,R0lGODlhEAAQAPQAAP///wAAAPDw8IqKiuDg4EZGRnp6egAAAFhYWCQkJKysrL6+vhQUFJycnAQEBDY2NmhoaAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAFdyAgAgIJIeWoAkRCCMdBkKtIHIngyMKsErPBYbADpkSCwhDmQCBethRB6Vj4kFCkQPG4IlWDgrNRIwnO4UKBXDufzQvDMaoSDBgFb886MiQadgNABAokfCwzBA8LCg0Egl8jAggGAA1kBIA1BAYzlyILczULC2UhACH5BAkKAAAALAAAAAAQABAAAAV2ICACAmlAZTmOREEIyUEQjLKKxPHADhEvqxlgcGgkGI1DYSVAIAWMx+lwSKkICJ0QsHi9RgKBwnVTiRQQgwF4I4UFDQQEwi6/3YSGWRRmjhEETAJfIgMFCnAKM0KDV4EEEAQLiF18TAYNXDaSe3x6mjidN1s3IQAh+QQJCgAAACwAAAAAEAAQAAAFeCAgAgLZDGU5jgRECEUiCI+yioSDwDJyLKsXoHFQxBSHAoAAFBhqtMJg8DgQBgfrEsJAEAg4YhZIEiwgKtHiMBgtpg3wbUZXGO7kOb1MUKRFMysCChAoggJCIg0GC2aNe4gqQldfL4l/Ag1AXySJgn5LcoE3QXI3IQAh+QQJCgAAACwAAAAAEAAQAAAFdiAgAgLZNGU5joQhCEjxIssqEo8bC9BRjy9Ag7GILQ4QEoE0gBAEBcOpcBA0DoxSK/e8LRIHn+i1cK0IyKdg0VAoljYIg+GgnRrwVS/8IAkICyosBIQpBAMoKy9dImxPhS+GKkFrkX+TigtLlIyKXUF+NjagNiEAIfkECQoAAAAsAAAAABAAEAAABWwgIAICaRhlOY4EIgjH8R7LKhKHGwsMvb4AAy3WODBIBBKCsYA9TjuhDNDKEVSERezQEL0WrhXucRUQGuik7bFlngzqVW9LMl9XWvLdjFaJtDFqZ1cEZUB0dUgvL3dgP4WJZn4jkomWNpSTIyEAIfkECQoAAAAsAAAAABAAEAAABX4gIAICuSxlOY6CIgiD8RrEKgqGOwxwUrMlAoSwIzAGpJpgoSDAGifDY5kopBYDlEpAQBwevxfBtRIUGi8xwWkDNBCIwmC9Vq0aiQQDQuK+VgQPDXV9hCJjBwcFYU5pLwwHXQcMKSmNLQcIAExlbH8JBwttaX0ABAcNbWVbKyEAIfkECQoAAAAsAAAAABAAEAAABXkgIAICSRBlOY7CIghN8zbEKsKoIjdFzZaEgUBHKChMJtRwcWpAWoWnifm6ESAMhO8lQK0EEAV3rFopIBCEcGwDKAqPh4HUrY4ICHH1dSoTFgcHUiZjBhAJB2AHDykpKAwHAwdzf19KkASIPl9cDgcnDkdtNwiMJCshACH5BAkKAAAALAAAAAAQABAAAAV3ICACAkkQZTmOAiosiyAoxCq+KPxCNVsSMRgBsiClWrLTSWFoIQZHl6pleBh6suxKMIhlvzbAwkBWfFWrBQTxNLq2RG2yhSUkDs2b63AYDAoJXAcFRwADeAkJDX0AQCsEfAQMDAIPBz0rCgcxky0JRWE1AmwpKyEAIfkECQoAAAAsAAAAABAAEAAABXkgIAICKZzkqJ4nQZxLqZKv4NqNLKK2/Q4Ek4lFXChsg5ypJjs1II3gEDUSRInEGYAw6B6zM4JhrDAtEosVkLUtHA7RHaHAGJQEjsODcEg0FBAFVgkQJQ1pAwcDDw8KcFtSInwJAowCCA6RIwqZAgkPNgVpWndjdyohACH5BAkKAAAALAAAAAAQABAAAAV5ICACAimc5KieLEuUKvm2xAKLqDCfC2GaO9eL0LABWTiBYmA06W6kHgvCqEJiAIJiu3gcvgUsscHUERm+kaCxyxa+zRPk0SgJEgfIvbAdIAQLCAYlCj4DBw0IBQsMCjIqBAcPAooCBg9pKgsJLwUFOhCZKyQDA3YqIQAh+QQJCgAAACwAAAAAEAAQAAAFdSAgAgIpnOSonmxbqiThCrJKEHFbo8JxDDOZYFFb+A41E4H4OhkOipXwBElYITDAckFEOBgMQ3arkMkUBdxIUGZpEb7kaQBRlASPg0FQQHAbEEMGDSVEAA1QBhAED1E0NgwFAooCDWljaQIQCE5qMHcNhCkjIQAh+QQJCgAAACwAAAAAEAAQAAAFeSAgAgIpnOSoLgxxvqgKLEcCC65KEAByKK8cSpA4DAiHQ/DkKhGKh4ZCtCyZGo6F6iYYPAqFgYy02xkSaLEMV34tELyRYNEsCQyHlvWkGCzsPgMCEAY7Cg04Uk48LAsDhRA8MVQPEF0GAgqYYwSRlycNcWskCkApIyEAOwAAAAAAAAAAAA==',
    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.