Вам не нравится постраничная навигация в категории товаров на 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;
Подробнее...