Для начала благодарю за скрипт все работает.
Данный скрипт применил для категорий
в catalog/view/theme/default/template/product/category.twig
<div class="row">
{# <div class="col-sm-6 text-left">{{ pagination }}</div> #}
<div class="col-sm-12 text-center"><button type="button" class="more-product-btn"></button></div>
{# <div class="col-sm-6 text-right">{{ results }}</div> #}
</div>
{% endif %}
{% if not categories and not products %}
<p>{{ text_empty }}</p>
<div class="buttons">
<div class="pull-right"><a href="{{ continue }}" class="btn btn-primary">{{ button_continue }}</a></div>
</div>
{% endif %}
{{ content_bottom }}</div>
{{ column_right }}</div>
</div>
{{ footer }}
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<script>
(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();
}());
</script>
Для начала благодарю за скрипт все работает. Данный скрипт применил для категорий в catalog/view/theme/default/template/product/category.twig <div class="row"> {# <div class="col-sm-6 text-left">{{ pagination }}</div> #} <div class="col-sm-12 text-center"><button type="button" class="more-product-btn"></button></div> {# <div class="col-sm-6 text-right">{{ results }}</div> #} </div> {% endif %} {% if not categories and not products %} <p>{{ text_empty }}</p> <div class="buttons"> <div class="pull-right"><a href="{{ continue }}" class="btn btn-primary">{{ button_continue }}</a></div> </div> {% endif %} {{ content_bottom }}</div> {{ column_right }}</div> </div> {{ footer }} <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> <script> (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(); }()); </script>
