Установка


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

1. Включение использования шаблона постраничной навигации

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

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

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

Далее необходимо шаблон комопнента разметить,  чтобы модуль понимал какие есть блоки, из чего состоят и куда встявляются, для этого есть соответствующие методы. На примере каталога, находим шаблон комопнента списка элементов раздела -  bitrix:catalog.section, и в его шаблоне проставляем отметки.

разметка блоков для подгрузки по 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>


3. Добавление обработчика запроса

Для того чтобы навигация подгружалась, если рядом с шаблоном (template.php) компонента списка товаров раздела нет файла component_epilog.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']);


4. Завершение установки

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