1 1 1 1 1 1 1 1 1 1 Rating 0.00 (0 Votes)

Вам не нравится постраничная навигация в категории товаров на Opencart 2.3? Вы хотите заменить ее на автоматическую подгрузку с использованием AJAX? Тогда это руководство - для Вас!

По наводке: http://forum.opencart.pro/topic/1776-%D0%B4%D0%B5%D0%BB%D0%B0%D0%B5%D0%BC-%D0%B1%D0%B5%D1%81%D0%BA%D0%BE%D0%BD%D0%B5%D1%87%D0%BD%D1%83%D1%8E-%D0%BF%D0%B0%D0%B3%D0%B8%D0%BD%D0%B0%D1%86%D0%B8%D1%8E-%D0%B4%D0%BB%D1%8F-%D0%BB%D1%8E%D0%B1%D0%BE%D0%B3%D0%BE-%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%B0-%D0%B4%D0%BB%D1%8F-opencart-2x/. Но если взять код напрямую оттуда, то он у Вас работать не будет, поскольку там парсер форума съел некоторые важные вещи!

Итак, вот он код:

<!-- ajax pagination -->

<script type="text/javascript">
$(document).ready(function () {
 
  var autoscroller = [];
  //setting
    autoscroller.hidePagination = 1;
    autoscroller.autoScroll = 1;
    autoscroller.catcher = '#endless';
    autoscroller.delay = 1000;
  //setting
 
  autoscroller.loading = 0;
 

  $(window).scroll(function() {


    if(inWindow(autoscroller.catcher) && !autoscroller.loading && autoscroller.autoScroll) {
      
        autoscroller.loading = true;
        $('#endless .fa-refresh').addClass('fa-spin');
        
        setTimeout(function() {
          
          $('#endless').trigger('click');
          
        }, autoscroller.delay);
          
      }

    });
 
  if (autoscroller.hidePagination) {
    $('.pagination').hide();
    }


  if ($('.product-grid, .product-list').length) {
    
    if ($('.pagination').length && !$('.pagination > li:last-child').hasClass('active')) {

      $('#content div.col-sm-6.text-right').hide();
      
      $('.pagination').parent().before('<div class="col-xs-12 text-center"><button class="btn btn-success btn-lg" id="endless" style="margin: 15px auto; padding: 10px 120px;" ><i class="fa fa-refresh"></i> </button></div>');

      $('#endless').on('click', function(e) {
      
        var lastProduct = $('.pagination').parent().parent().parent().find('.product-layout:last-child');
        
        var nextPage = $('ul.pagination li.active').next().find('a:first-child');
      
        $.ajax({
          url: $(nextPage).attr('href'),
          beforeSend: function(){
              $('#endless .fa-refresh').addClass('fa-spin');
          },
          success: function(data){

            var products = $(data).find('.product-list');
            
              lastProduct.after(products);
            
    



          

                if (localStorage.getItem('display') == 'grid') {
                
                  cols = $('#column-right, #column-left').length;

                  if (cols == 2) {
                    $(products).attr('class', 'product-layout product-grid col-lg-6 col-md-6 col-sm-12 col-xs-12');
                  } else if (cols == 1) {
                    $(products).attr('class', 'product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12');
                  } else {
                    $(products).attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12');
                  }

                }

            
            $('.pagination').html($(data).find('.pagination > *'));
            
            nextPage = $('ul.pagination li.active').next().find('a:first-child');
            

            if (nextPage.length == 0) {
              $('#endless').remove();
            } else {
              $('#endless .fa-refresh').removeClass('fa-spin');
            }
            
            autoscroller.loading = 0;
          }
        });

        return false;
      });

    }
  }
 
 
  function inWindow(el){
    if($(el).length) {
      var scrollTop = $(window).scrollTop();
      var windowHeight = $(window).height();
      var offset = $(el).offset();
      
      if(scrollTop <= offset.top && ($(el).height() + offset.top) < (scrollTop + windowHeight))
        return true;
    };
    
    return false;
  }
 
});
</script>

Берем этот код и вставляем перед закрывающим тегом </body> в шаблон footer.tpl. Вот и все! Вместо паджинации товары будут подгружаться автоматически. Если же Вы хотите, чтобы товары подгружались по нажатию на кнопку, то выставляем:

autoscroller.autoScroll = 0;

Еще раз спасибо http://forum.opencart.pro/topic/1776-%D0%B4%D0%B5%D0%BB%D0%B0%D0%B5%D0%BC-%D0%B1%D0%B5%D1%81%D0%BA%D0%BE%D0%BD%D0%B5%D1%87%D0%BD%D1%83%D1%8E-%D0%BF%D0%B0%D0%B3%D0%B8%D0%BD%D0%B0%D1%86%D0%B8%D1%8E-%D0%B4%D0%BB%D1%8F-%D0%BB%D1%8E%D0%B1%D0%BE%D0%B3%D0%BE-%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%B0-%D0%B4%D0%BB%D1%8F-opencart-2x/.

Как переопределить тему по-умолчанию в OpenCart 2.3

В этом руководстве вы узнаете, как переопределить тему "по-умолчанию" в OpenCart 2.3.

Экспорт товаров в Яндекс.Маркет в YML на OpenCart 2.3

Продолжаем серию руководств по OpenCart 2.3. Сейчас вы узнаете, как настроить экспорт товаров в Яндекс.Маркет в формате YML из интернет-магазина на OpenCart 2.3 совершенно бесплатно.
Back to Top