На самом деле, новости я выбрал просто для примера, Вы можете организовать загрузку любых элементов, хранящихся в инфоблоках. Не обязательно новостей, но и статей, часто задаваемых вопросов и многого другого.
Как обычно, в своих статьях я использую демо-версию системы редакции «Стандарт». При установке выбираю вариант «для разработчиков». Так как в инфоблоке «Новости магазина» не так много элементов, я делаю по 3 копии каждой новости, чтобы как можно наглядней показать их загрузку с помощью AJAX.
Сначала, в папке /content/ создадим папку news2, а в ней – 2 файла index.php и detail.php. В файле index.php разместим компонент bitrix:news.list, настроив его на инфоблок «Новости магазина» с количеством новостей на странице - 5, а в файле detail.php - компонент bitrix:news.detail, который будет показывать детальное содержимое новости. В рамках нашей задачи изменять будем только шаблон компонента bitrix:news.list.
Итак, приступаем…
После размещения компонента bitrix:news.list на странице index.php, скопируем его шаблон и назовем его "ajax_list". После копирования он будет находиться в папке /bitrix/templates/.default/components/bitrix/news.list/ajax_list/.
В файле template.php заменим код нижнего блока постраничной навигации
PHP
своим блоком HTML-кода со ссылкой «Показать еще новости», при клике на которой будут загружаться новости.
HTML
Затем немного стилизуем его. В файл style.css добавим стили для блока и ссылки.
CSS
В параметрах вызова компонента bitrix:news.list в файле /content/news2/index.php нужно добавить еще один параметр ("AJAX" => $_REQUEST["AJAX"]
), значение которого будет браться из массива $_REQUEST
. После добавления указанного параметра, редактировать параметры компонента из публичной части сайта нельзя, иначе наш параметр просто затрется. Значение этого параметра будет зависеть от типа загрузки страницы: если страница загружена по ссылке «Показать еще новости», то значение этого параметра буде равно “Y
”, иначе значения просто не будет, то есть при первой загрузке страницы это параметр будет иметь значение null
. В зависимости от значения $arParams[“AJAX”]
, в шаблоне компонента будут работать определённые участки кода. В этом можно будет убедиться, если посмотреть содержимое файла template.php. Скачать его можно по ссылке в конце статьи.
Для решения поставленной задачи, в файле template.php нам будут необходимы следующие данные:
- номер текущей страницы – его мы должны знать на каждой странице, то есть при каждой загрузке страницы через AJAX;
- общее количество страниц;
- номер постраничной навигации на странице – нужен для формирования ссылок в постраничной навигации. Если на странице размещено несколько разных компонентов с постраничной навигацией, этот параметр формирует ссылку, указывая «страницы» какого именно компонента показывать. В нашем случае не очень важен, так как у нас один компонент на странице, но на будущее пригодится, если вдруг вы решите добавить еще один компонент с таким же функционалом.
Все эти данные можно получить из объекта, хранящегося в $arResult["NAV_RESULT"]
.
В самом начале файла template.php, после первой строки, сохраним указанные выше параметры в переменных.
PHP
Теперь можно переходить к написанию скрипта на javaScript, который будет делать всю основную «работу», а именно управлять загрузкой новостей. Этот код мы, конечно же, разместим в файле script.js в папке шаблона компонента. У меня скрипт получился следующий.
JavaScript
Код скрипта несложный – это «класс», состоящий всего из 2 методов, первого (loadMoreNews
), который собственно и загружает новости и второго (init
) - в котором инициализируется обработчик клика по ссылке для загрузки новостей. В самом начале скрипта из файла script.js мы создаем свойства, в которые сохраняем объекты: идентификатор «обертки» списка новостей, идентификатор ссылки-загрузчика, путь к gif-изображению, которое будет появляться во время загрузки, а также объект с настройками.
В файле template.php создаем объект «класса» newsLoader
.
JavaScript
Теперь осталось только добавить стили для gif-изображения, которое появляется в процессе загрузки в файл style.css.
CSS
Теперь если все сделано правильно у вас должен получиться вполне работающий код, который можно разместить в структуре демо-сайта и ознакомиться с его функционалом. Поздравляю, наша задача, поставленная в начале статьи – решена.