Скрипт не AJAX.
Как работает:
При клике на кнопку в ссылку подставляется &limit=N (отрабатывает совойство location, происходит переход по новой ссылке).
Скролит страницу к началу добавленых товаров (если это не необходимо - удалите хвост ссылки "+ '#last-item'" на 31й строке скрипта.)
Дизейблит кнопку, если в категории больше нет товаров.
При установке скрипта необходимо указать:
кол-во товаров для отображения при клике ( 20 по умолчанию )
класс блока обертки товаров
класс кнопки
(function () {
// need jquery > v.3
// add script in 'catalog\view\theme\default\template\product\category.twig' before footer
// productWrapperSelector -- selector of product wrapper
// productToShow -- product`s quantity to show
// productMoreBtnSelector -- selector of add button
// config
const productToShow = 20;
const productWrapperSelector = $('.product-list');
const productMoreBtnSelector = $('.more-product-btn');
// config
var moreBtn = productMoreBtnSelector;
var totalViewOnload = productWrapperSelector.children('div');
function getProductLimit() {
var totalProductInCategory = {{ results }};
var productLeft = totalProductInCategory - totalViewOnload.length;
return productLeft;
}
function viewMoreProduct() {
var loc = location.href;
var to = loc.search(/&limit/i);
loc = loc.substring(0, to);
loc.length == 0 ? loc = location.href : loc = loc.substring(0, to);
var limit = `&limit=${productToShow + totalViewOnload.length}`;
location = loc + limit + '#last-item';
}
function setLastProductId() {
var lastItemID = totalViewOnload.length - productToShow;
$(totalViewOnload[lastItemID]).attr('id', 'last-item');
}
function moreBtnView() {
moreBtn.text(`еще ${productToShow}`);
getProductLimit() <= 0 ? moreBtn.attr('disabled', 'disabled') : '';
getProductLimit() < productToShow ? moreBtn.text(`еще ${getProductLimit()}`) : '';
}
moreBtn.click(function (e) {
e.preventDefault();
viewMoreProduct();
moreBtnView();
});
function init() {
moreBtnView();
getProductLimit();
setLastProductId();
}
init();
}());
ссылка на Git
