Постраничка на ajax в Bitrix

• 
  Vadim Tsukanov
  Разработчик
• Дата публикации
  25.03.2020
• Категория
  1С-Битрикс

Итак, мода на кнопку «Показать еще» только растет. Разберемся, как ее грамотно сделать в битриксе.

Все уже давно написано и расписано, данный пост — это некая заготовка для своих проектов, т.к. каждый раз делать с 0 уже просто надоело.

1. Скачиваем шаблон постранички тут. Я спецом уже сделал папку с system.pagenavigation, css и js
2. Закидываем все в local/templates/%templateName%/components/bitrix
3. Применяем для компонента данный шаблон постранички

Теперь готовим наш компонент для работы с ajax-ом. Если у вас используется файл result_modifier.php, то лучше вставляйте этот код туда. Если же такого файла нет, то вставляйте код в самое начало файла template.php

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();
}

Тут все просто — если аякс — умри.

Пилим обработчик на JS

$(function() {
    var load_more = false;

    $(document).on("click", "#show-more", function(e) {
        e.preventDefault();
        if(load_more)
            return false;
        var ajax_url = $('#ajax_next_page').attr("href");
        load_more = true;
        $.ajax({
            url: ajax_url,
            type: "POST",
            data: {IS_AJAX: 'Y'},
            success: function(data) {
                $("#ajax_next_page").after(data);
            	$("#ajax_next_page").remove();
            	load_more = false;
                checkPages();
            }
        });
    });

    function checkPages(){
        if($('#ajax_next_page').length == '0'){
            $('#show-more').hide();
        }
    }
    checkPages();
});

где #show-more — идентификатор вашей кнопки

Для большего удобства — я собрал все в одном месте, скачать можете либо тут либо по ссылке в начале поста