Abr@X@bra.ru

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

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

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

Прежде всего разместим вот этот вот шаблон постраничной навигации по адресу /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;
}



Ajax, PHP, Bitrix
Читайте также:
Web-разработчик и новый клиент. Выстраиваем правильное общение.

Web-разработчик и новый клиент. Выстраиваем правильное общение.

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

Читать
React.js на русском языке. Часть первая

React.js на русском языке. Часть первая

Опубликовал свой первый пост, на habrahabr.ru по React.js
Мне очень нравиться концепция и подход React.js, что...
Читать
Битрикс D7, инфоблоки - ORM

Битрикс D7, инфоблоки - ORM

Модуль ORM для инфоблоков.

Все знаю что у битркс появилась какая-никакая, но все-таки ORM.

И они даже модуль...

Читать
Источник: blog.d-it.ru