Загрузка...

Ajax подгрузка контента Битрикс

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

В статье будет рассмотрен простейший список элементов один под другим, по окончании которого обычно ожидается постраничка или кнопка "еще". В зависимости от внешних div-ов, хитрой верстки или прочего вам самим придется немного подправить шаблон, но суть остается та же.

Прежде всего разместим вот этот вот шаблон:

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

Постраничной навигации по адресу /bitrix/templates/.default/components/bitrix/system.pagenavigation. Это обычный шаблон постранички, очень сильно урезанный, мы в нем оставили лишь кнопку следующая страница, обозвав ее еще. В этом и есть простота подхода. При желании вы можете оставить эту ссылку, кастомизировав ее под свой стиль, а можете убрать через 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;
}

Источник: abraxabra.ru



Похожие заметки:

Вывод комментариев с пагинацией

Выводим все комменты на WordPress из базы данных с пагинацией

Открыть здесь

Прикручиваем Sphinx к своему поиску на сайте

Установка, задание конфигурации и запуск службы на Ubuntu для высокоскоростного поиска. Быстрый гайд

Открыть здесь

Веб-разработка

Займусь вашим проектом, если вам нужен специалист в области веб-разработки

Открыть здесь


В этой заметке комментарии закрыты.