Установить можно - отсюда
Базовая установка модуля стандартная и описана здесь
После установки модуля постараничной ajax-навигации, необходимо подготовить компоненты и шаблоны для работы с ним.
Во время установки для компонентов постраничной навигации будут скопированны готовые шаблоны с названием - bxmaker_ajaxpagenav_defaul
их и нужно использовать в настройках компонентов.
Как для любого другого комопнента с постраничной навигацией, в парамтерах комопнента можно указать шаблон постраничной навигации. Для примера сменим шаблон для комопнента каталога.
Для работы постарничной навигации, чтобы модулю сообщить какие данные и откуда нужно подгрузить на страницу - необходимо шаблоны разметить.
В данном случае рассмотрим разметку шаблона комопнента раздела катлога, который выводит товары на страницах катлога. Он берет настройки шаблона постраничной навигации из настроек основного компонента - Каталог
Учитывая что компонент каталога комплексный, и в файле 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>
Для того чтобы навигация подгружалась, если рядом с шаблоном 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 начнет работать