Битрикс, бесконечная прокрутка , пагинация

Автоподгрузка, бесконечный скроллинг, «вебдванольная постраничка» — этот подход называют по разному, но суть одна — при прокрутке к концу списка, автоматически подгружается еще контент. В этой статье я опишу простой подход к реализации сего.  В статье будет рассмотрен простейший список элементов один под другим, по окончании которого обычно ожидается постраничка или кнопка “еще”. В зависимости от внешних div-ов, хитрой верстки или прочего вам самим придется немного подправить шаблон, но суть остается та же.

Прежде всего разместим новый шаблон  постраничной навигации по адресу /bitrix/templates/.default/components/bitrix/system.pagenavigation.

<?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?>

Это обычный шаблон постранички, очень сильно урезанный, мы в нем оставили лишь кнопку “следующая страница”, обозвав ее “еще”. В это и есть простота подхода .

При желании вы можете оставить эту ссылку, кастомизировав ее под свой стиль, а можете убрать через style=”display: none”. Кому как удобнее.

Теперь займемся шаблоном наших элементов. В кастомизируемый шаблон в файл result_modifier.php (если его нет, надо создать) добавляем такой код, который сбрасывает буфер страницы, если идет обращение по ajax.

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

Там же в файле component_epilog.php (если нет – создаете) добавляем код (если данный файл в компоненте не принимает участия, то вставляете в самый низ template.php):

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

Здесь, если идет ajax-запрос, прекращаем выполнение. Для тех, кто пока путается в Битриксе: по ajax запрашивается ВСЯ страница, но мы получаем ровно тот кусок контента, который сгенерировал наш компонент списка.

А также в удобное для вас место (например, в скриптах шаблона сайта) добавляем следующий 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;
                });
            }
        }
    });
});

Тут все очень просто тоже: при скроллинге, если дошли до футера (там можно подкрутить дельту, если не очень вовремя срабатывает), то ищем ту самую ссылку “еще”, берем из нее адрес, и обращаемся по этому адресу по ajax, контент вставляем тут же, а предыдущую кнопку удаляем.

Вот так все просто. Замечу, что подход seo-оптимизирован, так как поисковик увидит просто кнопку “еще”, перейдет по ней, там будет уже вторая страница, и так далее. При желании вы можете закрыть это от поисковика самостоятельно (атрибут rel=”nofollow” ). Единственное, я бы посоветовал в robots.txt вставить такую строчку: Disallow: /*is_ajax=* (чтобы аяксовые страницы не индексировались поисковиком).

Вот и все. Не забудьте, что подход использует библиотеку jQuery.

В процессе использования выяснилось, что не работает режим правки для подгружаемых элементов. Если для вас это важно, надо сделать следующее. Не использовать второй кусок кода из данного поста, а в footer.php шаблона сайта в самом верху вставить:

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

Оригинал статьи

Leave a Reply

Your email address will not be published. Required fields are marked *

два − 1 =

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.