весь список раздела "Модули, компоненты, файлы"
Добавление кнопки "Показать еще" в шаблоне постраничной навигации.
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