如何在opencart过滤器模块中包含AJAX？

Question

我正在使用Opencart 2.2.0.0，并搜索任何代码示例以在过滤器模块中包含AJAX。

我试过以下代码。它有效但经过一些选项检查后变得很慢

$().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;
   });
  });


  $(".checkbox").change(function() {

   var filter = [];
if(this.checked) {

    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();
});