Как организовать бесконечную прокрутку на «Битрикс»?

Автоматическая подгрузка страницы вместо привычной пагинации с подачи социальных сетей вошла в моду. Многие заказчики хотят видеть этот способ отображения на своих сайтах. Не факт, что она всегда удобна и уместна. Иной раз может создавать трудности с поиском нужной записи, да и дополнительных ресурсов требует. Но как бы то ни было, а спрос на это решение есть. Давайте рассмотрим, как его реализовать.

1. Шаблон промотки вместо пагинации

Разместим по адресу /bitrix/templates/.default/components/bitrix/system.pagenavigation.

файл template.php, содержащий код

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();

$this->setFrameMode(true);

if(!$arResult["NavShowAlways"]) {
	if ($arResult["NavRecordCount"] == 0 || ($arResult["NavPageCount"] == 1 && $arResult["NavShowAll"] == false)) {
		return;
	}
}

$strNavQueryString = ($arResult["NavQueryString"] != "" ? $arResult["NavQueryString"]."&amp;" : "");
?>
<?if($arResult["bDescPageNumbering"] === true):?>
	<?if ($arResult["NavPageNomer"] > 1):?>
		<a href="<?=$arResult["sUrlPath"]?>?<?=$strNavQueryString?>PAGEN_<?=$arResult["NavNum"]?>=<?=($arResult["NavPageNomer"]-1)?>" id="infinity-next-page">еще</a>
	<?endif?>
<?else:?>
	<?if($arResult["NavPageNomer"] < $arResult["NavPageCount"]):?>
		<a href="<?=$arResult["sUrlPath"]?>?<?=$strNavQueryString?>PAGEN_<?=$arResult["NavNum"]?>=<?=($arResult["NavPageNomer"]+1)?>" id="infinity-next-page">еще</a>
	<?endif?>
<?endif?>

2. Сбросим буфер Ajax

В файл в файл result_modifier.php добавим код

if (array_key_exists('is_ajax', $_REQUEST) && $_REQUEST['is_ajax']=='y') {
    $APPLICATION->RestartBuffer();
}

3. А этот код отменит выполнение Ajax - запроса

Для этого добавим код в файл omponent_epilog.php

if (array_key_exists('is_ajax', $_REQUEST) && $_REQUEST['is_ajax']=='y') {
    die();
}

4. Вывод бесконечного скроллинга

В подходящее место в коде страницы поместим код JS

$(document).on('ready', function(){
    var loading = false;
    $(window).scroll(function() {
        if ($('#infinity-next-page').size() && !loading) {
            if ($(window).scrollTop()+100 >= $(document).height()-$(window).height()) {
                loading = true;
                $.get($('#infinity-next-page').attr('href'), {is_ajax: 'y'}, function(data){
                    $('#infinity-next-page').after(data);
                    $('#infinity-next-page').remove();
                    loading = false;
                });
            }
        }
    });
});

Готово!

Назад в раздел