Установка

Установить можно - отсюда

Базовая установка модуля стандартная и описана здесь

После установки модуля постараничной ajax-навигации, необходимо подготовить компоненты и шаблоны для работы с ним.

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

Смена постранично навигации в катлоге

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

Смена шаблона постраничной навигации компонента катлог

Разметка блоков

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

В данном случае рассмотрим разметку шаблона комопнента раздела катлога, который выводит товары на страницах катлога. Он берет настройки шаблона постраничной навигации из настроек основного компонента - Каталог

разметка блоков для подгрузки по AJAX

Учитывая что компонент каталога комплексный, и в файле section.php (и его включениях) компонент bitrix:catalog.section вызывается несколько раз, в первом случае вывод товаров раздела, во втором случае отображение персональных рекомендаций, то контекст в них должен быть разный. В примере ниже контекст указан - catalog_section.

Это, можно сказать, метка для группировки данных разных групп. Так вот, если мы в шаблоне указываем значение, то для этих двух вызоваов будет одинаковый контекст и данные будут заменены сразу в двух блоках после подгрузки данных. Чтобы этого не случалось, следует в шаблоне вместо catalog_section указать какой то параметр компонента, к примеру $arParams['BXMAKER_AJAXPAGENAV_CONTEXT_NAME'] , а в файле section.php в параметры вызова комопнента bitrix:catalog.section указать разные значения для параметра - BXMAKER_AJAXPAGENAV_CONTEXT_NAME

Важно: чтобы все заработало сразу после установки используете для контента название блока - content, для верхней и нижней навигации соответственно - navtop и navbottom. Эти блоки автоматчиески заменяются на странице. Для блоков с другими названиями нужно подписаться на js события и алгоритм размещеня блоков написать самостоятельно.

Файл /catalog.section/templates/.default/template.php

// в начале шаблона подключаем компонент
CModule::IncludeModule('bxmaker.ajaxpagenav');

// получаем контекст, иначе можно сказать что получаем объект для работы с группой блоков в данном случае
$context = \BXmaker\Ajaxpagenav\Manager::getInstance()->getContext('catalog_section');


//далее блок с постраничной навигацией над списком товаров преобразуем ------

// из такого вида
<div class="paginator">
   <?=$arResult['NAV_STRING'];?>
</div>

// в такой
<div class="paginator <?=$context->getBlockClassName('navtop');?>">
   <?=$context->beginBlock('navtop');?>
   <?=$arResult['NAV_STRING'];?>
   <?=$context->endBlock('navtop');?>
</div>

// для постр. навигации под товарами делаем тоже самое, только название блока меняем на navbottom ----------------

// так как основная часть контента это товары, то именно эту область размечаем блоком content

// обязательно для навигации и контента ипользуйте именно эти названия

// таке могут быть любые другие блоки, например
<div class="<?=$context->getBlockClassName('example');?>">
   <?=$context->beginBlock('example');?>
   // пример произвольного блока
   <?=$context->endBlock('example');?>
</div>

Обработчик ajax запроса

Для того чтобы навигация подгружалась, если рядом с шаблоном template.php компонента списка товаров раздела нет файла component_epilog.php, то его создаем, иначе редактируем и добавляем обработку запросов постраничной навигации

<? if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) die(); 

// ... какой-то код можт быть, если файл уже существовал

// добавляем в конце файла код

CModule::IncludeModule('bxmaker.ajaxpagenav');
\BXmaker\Ajaxpagenav\Manager::getInstance()->sendJsonAnswer('catalog_section'); 

// если задаете название контекста в параметрах компонента то добавдяем вместо предыдущей строки, эту
// \BXmaker\Ajaxpagenav\Manager::getInstance()->sendJsonAnswer($arParams['BXMAKER_AJAXPAGENAV_CONTEXT_NAME']);

После всех этих шагов, осталось сбросить кэш и проверить работу, если все сделано правильно, постраничная навигация по AJAX начнет работать