Подгрузка страниц на AJAX для элементов каталога в Битрикс

Для того, чтобы в Битрикс сделать бесконечную AJAX подгрузку страниц каталога, необходимо играться с параметром PAGEN_1 при включенной пагинации.

Выглядеть это будет примерно так:

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

/*
 * количество элементов каталога на странице
 */
$elem_per_page = 48;

Далее пишем JS код, который будет вызываться при прокрутке страницы. Если мы достигаем подвала сайта — делаем AJAX запрос и добавляем в блок со списком товаров новые:

  /*AJAX прогрузка*/
  $(document).ready(function(){
    /* С какой страницы надо делать выборку из базы при ajax-запросе */
    var startFrom = 2;
    
    /* максимальное количество страниц */
    <?php
    CModule::IncludeModule("iblock");
    //ID инфоблока каталога:
    $catalog_iblock_id = 2;
    //раздел каталога:
    $catalog_section_id = 3;
    $max_elements = CIBlockElement::GetList( array(),
                     array('IBLOCK_ID'=>$catalog_iblock_id,
                     'ACTIVE'=>'Y',
                     'SECTION_ID'=>$catalog_section_id,
                     'INCLUDE_SUBSECTIONS'=>'Y'
                     ),
                     array(),
                     false,
               array('ID',
                     'NAME')
                    );
    $max_pages = ceil($max_elements/$elem_per_page);
    ?>
        
    var maxPages = <?=$max_pages?>;   
    
    /* Переменная-флаг для отслеживания того, происходит ли в данный момент ajax-запрос. В самом начале даем ей значение false, т.е. запрос не в процессе выполнения */
    var inProgress = false;
    
    /*если количество элементов на странице < количества элементов в разделе*/
    if (maxPages<startFrom) inProgress = true;
    $(window).scroll(function() {
      /* Если высота окна + высота прокрутки больше или равна высоте всего документа и ajax-запрос в настоящий момент не выполняется, то запускаем ajax-запрос. 600 - это высота подвала в пикселях */
      if($(window).scrollTop() + $(window).height() >= $(document).height() - 600 && !inProgress) {
          
        $.ajax({
          url: '/ajax/catalog_pager.php',
          method: 'POST',
          data: {
              "PAGEN_1" : startFrom,
              "section_id": <?=$catalog_section_id?>
              },
          beforeSend: function() {
            inProgress = true;
            $(".iloader").append('<div id="preloader"></div>');
          }
          }).done(function(data){
          
            $('#preloader').remove();
            
            $(".iloader").append(data);
            startFrom += 1;
            if (maxPages>=startFrom){
              inProgress = false;
            }  
            
          });
          
      }
    });
  });

В плане вёрстки делаем так: элементы каталога отображаем в div-е с классом «iloader».

JS код, представленный выше добавляем в ваш шаблон catalog.section на странице раздела каталога.

В /ajax/catalog_pager.php также отображаем catalog.section но уже с другой вёрсткой (там будут отображаться элементы каталога, которые подгружаются по каждому ajax запросу). Примерно так:

<?php
$params = Array(
                ...
                'SECTION_ID' => $_REQUEST['section_id'],
                ...
            );
$APPLICATION->IncludeComponent(
        'bitrix:catalog.section',
        '<ваш_шаблон>',
        $params
        );      
?>

Собственно вся магия 🙂