Кнопка "Загрузить ещё" в каталоге в CS-Cart

В CS-Cart по умолчанию пагинация в каталоге товаров сделана через Ajax, но при реализации через выбор страниц в пагинации. Иногда требуется либо добавить или поменять стандартную пагинацию на кнопку «Загрузить ещё», чтобы в конец страницы подгружались ещё товары.

Сделать такое не трудно, достаточно внести изменения в тему сайта. Это можно делать либо в самой теме, либо через свой плагин или в стандартным плагином «Мои изменения».

1. В файле \views\categories\view.tpl нужно добавить свою кнопку

{hook name="categories:view"}
<div id="category_products_{$block.block_id}" class="gul-main-catalog">

<h1 class="gul-categ-head">{$category_data.category}</h1>
{if $category_data.description || $runtime.customization_mode.live_editor}
    <div class="ty-wysiwyg-content ty-mb-s" {live_edit name="category:description:{$category_data.category_id}"}>{$category_data.description nofilter}</div>
{/if}

{if $products}
{assign var="layouts" value=""|fn_get_products_views:false:0}
{if $category_data.product_columns}
    {assign var="product_columns" value=$category_data.product_columns}
{else}
    {assign var="product_columns" value=$settings.Appearance.columns_in_products_list}
{/if}

{if $layouts.$selected_layout.template}
    {include file="`$layouts.$selected_layout.template`" columns=$product_columns}
{/if}

{elseif !$subcategories || $show_no_products_block}
<p class="ty-no-items cm-pagination-container">{__("text_no_products")}</p>
{else}
<div class="cm-pagination-container"></div>
{/if}
<!--category_products_{$block.block_id}--></div>
###################################################################################
# Добавляем сюда свою кнопку, которая будет отвечать за загрузку нового контента
    {assign var="pagination" value=$search|fn_generate_pagination} 
    {if $pagination.total_pages>1} # если у нас больше одной страницы в категории
       {if $smarty.request.dispatch=="products.search"} # если страница поиска
         <div class="gul-load-more serchpagin" data-curcateg='{$smarty.server.REQUEST_URI}' data-curpagunpage="{$pagination.current_page}" data-allpaginpage="{$pagination.total_pages}">Загрузить еще</div>
       {elseif $smarty.request.dispatch=="categories.view"} # если страница каталога
            <div class="gul-load-more catpagin" data-curcateg='{"categories.view&category_id={$category_data.category_id}"|fn_url}' data-curpagunpage="{$pagination.current_page}" data-allpaginpage="{$pagination.total_pages}">Загрузить еще</div>
       {/if}>
    {/if}
###################################################################################
{capture name="mainbox_title"}<span {live_edit name="category:category:{$category_data.category_id}"}>{$category_data.category}</span>{/capture}
{/hook}

2. В файле \blocks\list_templates\grid_list.tpl нужно убрать вызов стандартной пагинации и добавить необходимые теги, чтобы наша загрузка работала

{if $products}

    {script src="js/tygh/exceptions.js"}
    

    {if !$no_pagination}
  #####################################################################################
  # заменяем тут подключение стандартной пагинации на блок контента
        <div class="ty-pagination-container cm-pagination-container" id="pagination_contents">
  #####################################################################################
    {/if}

    {if !$show_empty}
        {split data=$products size=$columns|default:"2" assign="splitted_products"}
    {else}
        {split data=$products size=$columns|default:"2" assign="splitted_products" skip_complete=true}
    {/if}

    {math equation="100 / x" x=$columns|default:"2" assign="cell_width"}
    {if $item_number == "Y"}
        {assign var="cur_number" value=1}
    {/if}

    {* FIXME: Don't move this file *}
    {script src="js/tygh/product_image_gallery.js"}

    {if $settings.Appearance.enable_quick_view == 'Y'}
        {$quick_nav_ids = $products|fn_fields_from_multi_level:"product_id":"product_id"}
    {/if}
    <div class="grid-list">
        {strip}
            {foreach from=$splitted_products item="sproducts" name="sprod"}
                {foreach from=$sproducts item="product" name="sproducts"}
                    <div class="ty-column{$columns}">
                        {if $product}
                            {assign var="obj_id" value=$product.product_id}
                            {assign var="obj_id_prefix" value="`$obj_prefix``$product.product_id`"}
                            {include file="common/product_data.tpl" product=$product}

                            <div class="ty-grid-list__item ty-quick-view-button__wrapper">
                                {assign var="form_open" value="form_open_`$obj_id`"}
                                {$smarty.capture.$form_open nofilter}
                                {hook name="products:product_multicolumns_list"}
                                        <div class="ty-grid-list__image">
                                            {include file="views/products/components/product_icon.tpl" product=$product show_gallery=true}

                                            {assign var="discount_label" value="discount_label_`$obj_prefix``$obj_id`"}
                                            {$smarty.capture.$discount_label nofilter}
                                        </div>

                                        <div class="ty-grid-list__item-name">
                                            {if $item_number == "Y"}
                                                <span class="item-number">{$cur_number}. </span>
                                                {math equation="num + 1" num=$cur_number assign="cur_number"}
                                            {/if}

                                            {assign var="name" value="name_$obj_id"}
                                            {$smarty.capture.$name nofilter}
                                        </div>

                                        <div class="ty-grid-list__price {if $product.price == 0}ty-grid-list__no-price{/if}">
                                            {assign var="old_price" value="old_price_`$obj_id`"}
                                            {if $smarty.capture.$old_price|trim}{$smarty.capture.$old_price nofilter}{/if}

                                            {assign var="price" value="price_`$obj_id`"}
                                            {$smarty.capture.$price nofilter}

                                            {assign var="clean_price" value="clean_price_`$obj_id`"}
                                            {$smarty.capture.$clean_price nofilter}

                                            {assign var="list_discount" value="list_discount_`$obj_id`"}
                                            {$smarty.capture.$list_discount nofilter}
                                        </div>

                                        <div class="ty-grid-list__control">
                                            {if $settings.Appearance.enable_quick_view == 'Y'}
                                                {include file="views/products/components/quick_view_link.tpl" quick_nav_ids=$quick_nav_ids}
                                            {/if}

                                            {if $show_add_to_cart}
                                                <div class="button-container">
                                                    {assign var="add_to_cart" value="add_to_cart_`$obj_id`"}
                                                    {$smarty.capture.$add_to_cart nofilter}
                                                </div>
                                            {/if}
                                        </div>
                                {/hook}
                                {assign var="form_close" value="form_close_`$obj_id`"}
                                {$smarty.capture.$form_close nofilter}
                            </div>
                        {/if}
                    </div>
                {/foreach}
                {if $show_empty && $smarty.foreach.sprod.last}
                    {assign var="iteration" value=$smarty.foreach.sproducts.iteration}
                    {capture name="iteration"}{$iteration}{/capture}
                    {hook name="products:products_multicolumns_extra"}
                    {/hook}
                    {assign var="iteration" value=$smarty.capture.iteration}
                    {if $iteration % $columns != 0}
                        {math assign="empty_count" equation="c - it%c" it=$iteration c=$columns}
                        {section loop=$empty_count name="empty_rows"}
                            <div class="ty-column{$columns}">
                                <div class="ty-product-empty">
                                    <span class="ty-product-empty__text">{__("empty")}</span>
                                </div>
                            </div>
                        {/section}
                    {/if}
                {/if}
            {/foreach}
        {/strip}
    </div>

    {if !$no_pagination}
  ################################# 
  # так-же заменяем стандартную пагинацию на закрытие тега 
        <!--pagination_contents--></div>
  #################################
    {/if}

{/if}

{capture name="mainbox_title"}{$title}{/capture}

3. В скриптах своего модуля или в скриптах своей темы \common\scripts.tpl нужно добавить обработчик загрузки нового контента для нашей кнопки

$('body').on('click','.gul-load-more',function(){ // объявляем событие на клик по нашей кнопке
 var but=$(this); // заносим в переменную нашу кнопку
    if (but.hasClass('catpagin')) { // если страница каталога
     $.ceAjax('request', $(this).data('curcateg') + 'page-' + ($(this).data('curpagunpage') + 1) + '/', {
         result_ids: 'pagination_contents',
            caching: true,
            append: true,
            callback: function (data) {
             but.next().next().next('.ty-sort-container').remove(); // убираем блок с сортировкой
                but.next('.ty-pagination__bottom').remove(); // убираем блок с пагинацией
                but.remove();

                if (but.data('curpagunpage') + 1 >= but.data('allpaginpage')) { // если страница, которую мы загружаем последняя, удаляем кнопку "загрузить ещё"
                 $('.gul-load-more').remove();
                }
             }
          });
      } else if (but.hasClass('serchpagin')) { // если страница поиска
       var request=$(this).data('curcateg');
        request=request.replace("page="+$(this).data('curpagunpage'), "page="+($(this).data('curpagunpage') + 1));
        $.ceAjax('request', request, {
         result_ids: 'pagination_contents',
            caching: true,
            append: true,
            callback: function (data) {
             but.next().next().next('.ty-sort-container').remove(); // убираем блок с сортировкой
                but.next('.ty-pagination__bottom').remove(); // убираем блок с пагинацией
                but.remove();

                if (but.data('curpagunpage') + 1 >= but.data('allpaginpage')) { // если страница, которую мы загружаем последняя, удаляем кнопку "загрузить ещё"
                 $('.gul-load-more').remove();
                }
             }
          });
       }
});