AJAX Pagination, Sorting & Filters

Ajax based features to improve your OpenCart store. Reduce server load and increase your conversion rate.

Features:

✯ Loading the product list without need of reloading the page
✯ Support pagination, sorting & filters
✯ Compatible with almost any theme or modification

OVERWRITE

No files are overwritten

COMPATIBILITY

☞ Module should be compatible with almost any theme or modification

REQUIREMENTS

☞ Latest vQmod extension is required

GALLERY

 

INSTALL

1. Upload all files in upload folder to your opencart directory.
2. DONE !

Source code

Prohibition of copying and distribution without permission.

JavaScript:

$().ready(function(){
 function init() {
  var $content  = $('#content').css('position', 'relative');
  
  if( ! $content.length )
   return;
  
  var $productFilter = $content.find('.product-filter');
  //var $productList = $content.find('.product-list');

  function createParams( url, o ) {
   var p = url.split('?')[1];

   if( typeof o == 'undefined' )
    o = {};

   if( typeof p != 'undefined' ) {
    p = p.replace(/&/g, '&');
    p = p.split('&');

    for( var i = 0; i < p.length; i++ ) {
     var key = p[i].split('=')[0];
     var val = p[i].split('=')[1];

     if( typeof key != 'undefined' && typeof val != 'undefined' )
      o[key] = val;
    }
   }

   return o;
  }

  function createLoader() {
   var top = $productFilter.length ? $productFilter.offset().top + $productFilter.height() - 20 : $content.height() / 4;
   
   if( $content.offset().top + top + 80 > $content.offset().top + $content.height() )
    top -= 80;
   
   return $('<i>')
    .css({
     'display' : 'block',
     'position' : 'absolute',
     'z-index' : '9',
     'width'  : $content.outerWidth() + 'px',
     'height' : $content.outerHeight() + 'px',
     'background': 'rgba(255,255,255,0.5)',
     'text-align': 'center',
     'padding' : '0',
     'margin' : '0',
     'cursor' : 'wait'
    })
    .append($('<img>')
     .attr( 'src', 'catalog/view/theme/default/image/ajax-loading.gif' )
     .css('margin-top', top + 'px')
    )
    .prependTo( $content );
  }

  var remembers  = [ 'limit', 'sort' ];
  var url   = document.location.href;
  var params  = createParams( url );
  var isLocked  = false;
  
  $productFilter.find('select').unbind('change').removeAttr('onchange').bind('change', function(){
   params = createParams( $(this).val(), params );
   
   ajax();

   return false;
  });

  $('.pagination a').bind('click', function(){
   params = createParams( $(this).attr('href'), params );

   ajax();

   return false;
  });
  
  $('#button-search').unbind('click').bind('click', function(){
   var hasFilter = false;
   
   function _set( $this ) {
    var name = $this.attr('name');
    var value = $this.val();
    
    if( $this.prop('tagName').toLowerCase() == 'input' ) {
     switch( $this.attr('type') ) {
      case 'checkbox' :
      case 'radio' : {
       if( ! $this.is(':checked') )
        value = '';
      }
     }
    }
    
    params[name] = value;
   }
   
   $content.find('[name^="filter_"]').each(function(){
    _set( $(this) );
    
    hasFilter = true;
   });
  
   if( ! hasFilter ) {
    $content.find('[name="search"],[name="category_id"],[name="description"]').each(function(){
     _set( $(this) );
    });
   }
   
   ajax();
   
   return false;
  }).each(function(){
   var $input = $content.find('input[name="filter_name"]');
   
   if( ! $input.length )
    $content.find('input[name="search"]');
   
   $content.unbind('keydown').bind('keydown', function(e){
    if( e.keyCode == 13 ){
     $('#button-search').trigger('click');

     return false;
    }

    return true;
   });
  });
  
  $('#button-filter').unbind('click').bind('click', function(){
   var filter = [];
 
   $('.box-filter input[type="checkbox"]:checked').each(function() {
    filter.push( $(this).val() );
   });
   
   params['filter'] = filter.join(',');
   
   ajax();
   
   return false;
  });

  function ajax() {
   if( isLocked )
    return;

   isLocked = true;

   // aktywuj loader
   var loader  = createLoader();
   var response = null;
   var ready  = false;
   var interval = setInterval(function(){
    onLoad();
   }, 100);

   $('html, body').animate({
    scrollTop: $productFilter.length ? $productFilter.offset().top : $content.offset().top
   }, 800).promise().done(function(){
    clearInterval( interval );
    
    ready = true;
    
    setTimeout(function(){
     onLoad();
    }, 100);
   });
   
   function onLoad() {
    if( response === null || ! ready )
     return;
    
    clearInterval( interval );
    
    loader.remove();
    isLocked = false;

    var contents = $('<div>').append( response ).find('#content > *');
    
    /*if( ! contents.length ) {
     contents = $("<div>").append( response ).find("#content-center > *");
     
     $content = $('#content-center');
    }*/
    
    if( contents.length ) {
     $content.html( contents );
     
     if( typeof display == 'function' ) {
      var dis = null;
      
      if( typeof $.cookie == 'function' )
       dis = $.cookie('display');
      
      if( ! dis && typeof $.totalStorage == 'function' )
       dis = $.totalStorage('display');
      
      if( dis )
       display( dis );
     }
    } else {
     window.location.href = url;
    }
    
    init();
   }
   
   $.ajax({
    'type'  : 'GET',
    'data'  : params,
    'url'  : url.split('?')[0],
    'cache'  : false,
    'timeout' : 10000,
    'success' : function( res ) {
     response = res;
    },
    'error'  : function() {
     window.location.href = url;
    }
   });
  }
 }
 
 init();
});

Prohibition of copying and distribution without permission.