вход   

Механизм "Показать еще"

весь список раздела "Модули, компоненты, файлы"


Добавление кнопки "Показать еще" в шаблоне постраничной навигации.

php + html
	
<?if ($arResult["NavPageNomer"] < $arResult["NavPageCount"]) {?>
  <?
  $plus = $arResult["NavPageNomer"]+1;
  $url = $arResult["sUrlPathParams"] . "PAGEN_".$arResult["NavNum"]."=".$plus;
  ?>
     <div class="load_more" data-url="<?=$url?>">
<?if($arResult["NavPageCount"] > 1) { // Если страница одна, кнопка не нужна ?> <?if ($arResult["NavPageNomer"]+1 <= $arResult["nEndPage"]){ // Если страница последняя, кнопка не нужна ?> <div class="catalog-more"> <div class="button button__inverse"> Показать еще </div> </div> <?}?> <?}?>

</div>

... Здесь код постраничной навигации, если нужен.
<?}?>


Скрипт обработчика кнопки "Показать еще".

jquery
$(document).ready(function() {
    $(document).on('click', '.load_more', function() {
        var targetContainer = $('.product-items'),          //  Контейнер, в котором хранятся элементы
            url =  $('.load_more').attr('data-url');    //  URL, из которого будем брать элементы
        if (url !== undefined) {
            $.ajax({
                type: 'GET',
                url: url,
                dataType: 'html',
                success: function(data){
                    $('.load_more').remove(); //  Удаляем старую навигацию
                    var elements = $(data).find('.product-item'),  //  Ищем элементы
                        pagination = $(data).find('.load_more');//  Ищем навигацию
                    targetContainer.append(elements);   //  Добавляем посты в конец контейнера
                    targetContainer.append(pagination); //  добавляем навигацию следом
                }
            })
        }
    });
});


Шаблон каталога, новостей и пр., где нужна копка "Показать еще".

html + php
<div class="product-items">
    <?foreach($arResult["ITEMS"] as $arItem):?>
        
        <div class="product-item">

            <a href="<?=$arItem["DETAIL_PAGE_URL"]?>">

                <h2><?=$arItem["NAME"]?></h2>

            </a>

            <?=CFile::ShowImage($arItem['PREVIEW_PICTURE'])?>

            <?=$arItem['PREVIEW_TEXT']?>
        </div>
    <?endforeach;?>
</div>

<?=$arResult['NAV_STRING']?>

Оформление может быть любым.
Но, обязательно!
Все элементы должны быть обёрнуты в блок с классом product-items, а каждый элемент иметь класс product-item