Кнопка показать еще в модуле "Техникс.Товары в блоках"

как правильно реализовать кнопку "показать еще" ? Сайт на opencart 3.x с шаблоном "Техникс". У меня получилось сделать кнопку через подсчет блоков и display:none, это работает, но столкнулся с проблемой. Товары выгружаются сразу все, получается подсчет ведется и в соседних категориях. Как мне это обойти ?

$(document).ready(function () {
   size_li = $(".col-6.col-lg-4").size();
x=3;
$('.col-6.col-lg-4:lt('+x+')').show();
$('#loadMore').click(function () {
    x= (x+5 <= size_li) ? x+5 : size_li;
    $('.col-6.col-lg-4:lt('+x+')').show();
     $('#showLess').show();
    if(x == size_li){
        $('#loadMore').hide();
    }
});
$('#showLess').click(function () {
    x=(x-5<0) ? 3 : x-5;
    $('.col-6.col-lg-4').not(':lt('+x+')').hide();
    $('#loadMore').show();
     $('#showLess').show();
    if(x == 3){
        $('#showLess').hide();
    }
});});

Модуль:

        <div class="products">
      <div class="container-fluid">
        <div class="products__sorting" data-tabs>
          <div class="row align-items-center">
            {% if title %}
            <div class="col">
              <h2 class="products__heading">{{ title }}</h2>
            </div>
            {% endif %}
            <div class="col-auto">
              <ul class="products__sorting-menu" style="height: 55px;">
                {% set t = 0 %} 
                {% for tab,product_tab in product_tabs %} 
                  {% if (products[tab] is not empty) %} 
                <li>
                  <button class="products__sorting-btn {% if (not t) %} is-active {% endif %}" data-tabs-btn="{{ tab }}"><span>{{ product_tab['description'][language_id]['name'] is defined ? product_tab['description'][language_id]['name'] : '' }}</span></button>
                </li>
                    {% set t = t + 1 %} 
                   {% endif %} 
                {% endfor %} 
              </ul>
            </div>
          </div>
          <div class="products__sorting-container">
                    {% set y = 0 %} 
                  {% for tab,product_tab in product_tabs %} 
                    {% if (products[tab] is empty) %} {% endif %} 
            <div class="products__sorting-content {% if (not y) %} is-active {% endif %}" data-tabs-content="{{ tab }}">
              <div class="products__grid">
                <div class="row">
                    {% for key,product in products[tab] %} 
                                          <div class="col-6 col-lg-{{ tp_limit }}">
                    <div class="products__item">
                      <div class="products__item-in">
                    {% if (category_time and product['special'] and product['special_date_end']) %}
                        {% if (product['special'] and product['sales']) %}
                            <mark class="products__item-discount">{{ '<small>' ~ labelsinfo['sale']['name'][language_id] ~ '</small>' ~ product['discount'] }}</mark>
                        {% endif %}
                    {% endif %}
                          <div class="products__item-buttons">
                          <a class="btn btn--blog" title="{{ button_compare }}" onclick="compare.add('{{ product['product_id'] }}');">
                              <svg class="icon-blog">
                                 <use xlink:href="catalog/view/theme/technics/sprites/sprite.svg#icon-blog"></use>
                              </svg></a>
                          <a class="btn btn--like" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product['product_id'] }}');">
                              <svg class="icon-like">
                                <use xlink:href="catalog/view/theme/technics/sprites/sprite.svg#icon-like"></use>
                              </svg></a>
                          </div>
                      <div class="products__item-stickers {{ category_time and product['special'] and product['special_date_end'] ? 'products__item-stickers--top' : ''}}"> 
                      {% if (product['rating'] != constant('false')) %}
                        <div class="products__item-rating">
                            <svg class="icon-star">
                                <use xlink:href="catalog/view/theme/technics/sprites/sprite.svg#icon-star"></use>
                            </svg>{{ product['rating'] }}/5
                        </div>
                        {% endif %}
                        {% if (product['isnewest']) %} 
                            <mark class="products__item-mark products__item-mark--new">{{ labelsinfo['new']['name'][language_id] }}</mark>
                        {% endif %} 
                        {% if ((product['special'] and product['sales']) and not (category_time and product['special_date_end'])) %} 
                            <mark class="products__item-mark products__item-mark--sale">{{ labelsinfo['sale']['name'][language_id] ~ ' ' ~ product['discount'] }}</mark>
                        {% endif %} 
                        {% if (product['popular']) %} 
                            <mark class="products__item-mark products__item-mark--popular">{{ product['popular'] }}</mark>
                        {% endif %} 
                        {% if (product['hit']) %} 
                            <mark class="products__item-mark products__item-mark--hit">{{ product['hit'] }}</mark>
                        {% endif %} 
                        {% if (product['catch']) %} 
                            {% if (product['nocatch']) %} 
                                <mark class="products__item-mark products__item-mark--nocatch">{{ product['catch'] }}</mark>
                            {% else %} 
                                <mark class="products__item-mark products__item-mark--catch">{{ product['catch'] }}</mark>
                            {% endif %} 
                        {% endif %} 
                        {% if (product['reward']) %} 
                            <mark class="products__item-mark products__item-mark--reward">{{ text_reward }} {{ product['reward'] }}</mark>
                        {% endif %} 
                      </div>
                      {% if (not product['images']) %} 
                      <div class="products__item-images"><a href="{{ product['href'] }}"><img {{ lazyload ? 'src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src' : 'src' }}="{{ product['thumb'] }}" alt="{{ product['name'] }}"></a></div>
                      {% else %}
                      <div class="products__item-images js-slick-products">
                        <a href="{{ product['href'] }}"><img data-lazy="{{ product['thumb'] }}" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" alt="{{ product['name'] }}"></a>
                        {% for imageX in product['images'] %} 
                            <a href="{{ product['href'] }}"><img data-lazy="{{ imageX }}" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" alt="{{ product['name'] }}"></a>
                      {% endfor %} 
                      </div>
                      {% endif %}
                      <div class="products__item-desc">
                      {% if (product['manufacturer']) %} 
                      <span class="products__item-category">{{ product['manufacturer'] }}</span>
                      {% endif %}
                      <a href="{{ product['href'] }}" class="products__item-title">{{ product['name'] }}</a>
                      <span class="products__item-price">
                        {% if (product['price']) %} 
                            {% if (product['special']) %} 
                                <u>{{ product['price'] }}</u>{{ product['special'] }} 
                            {% else %} 
                                {{ product['price'] }}
                            {% endif %}
                        {% endif %} 
                      </span>   
                          {% if (category_time and product['special'] and product['special_date_end']) %}
                          <div class="products__item-countdown">
                            <div class="countdown">
                              <p class="countdown__text">{{ time_text_1 }} <small>{{ time_text_2 }}</small></p>
                              <time class="countdown__time js-countdown-time" data-text-countdown="{{ text_countdown }}">{{ product['special_date_end'] }}</time>
                            </div>
                          </div>
                          {% endif %}
                        <div class="products__item-action">
                            <button type="button" class="btn btn--cart" title="{{ button_cart }}" onclick="cart.add('{{ product.product_id }}');" {{ product['buy_btn'] ? 'disabled' : ''}}>{{ button_cart }}
                            <svg class="icon-cart">
                              <use xlink:href="catalog/view/theme/technics/sprites/sprite.svg#icon-cart"></use>
                            </svg></button>
                            <a data-for="{{ product['product_id'] }}" title="{{ text_product_view_btn }}" class="btn btn--preview" href="#popupprod">
                            <svg class="icon-preview">
                              <use xlink:href="catalog/view/theme/technics/sprites/sprite.svg#icon-preview"></use>
                            </svg></a>
                        </div>
                      </div>
                      </div>
                    </div>
                  </div>
                           {% endfor %} 
                </div>

              </div>
            </div>
                {% set y = y + 1 %} 
                  {% endfor %} 
          </div>
        </div>
      </div>
    </div>

Ответы (0 шт):