На самом деле, новости я выбрал просто для примера, Вы можете организовать загрузку любых элементов, хранящихся в инфоблоках. Не обязательно новостей, но и статей, часто задаваемых вопросов и многого другого.
Как обычно, в своих статьях я использую демо-версию системы редакции «Стандарт». При установке выбираю вариант «для разработчиков». Так как в инфоблоке «Новости магазина» не так много элементов, я делаю по 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
Теперь если все сделано правильно у вас должен получиться вполне работающий код, который можно разместить в структуре демо-сайта и ознакомиться с его функционалом. Поздравляю, наша задача, поставленная в начале статьи – решена.
Комментарии
Например у меня нет папки /content/, где размещать файлы?
1. В файле template.php под ссылкой "Показазать еще новости" добавить новый HTML-элемент со ссылкой на нужную вам страницу (придумать и указать у этого элемента идентификатор).
Изначально если у вас больше одной страницы новостей - этот элемент должен быть скрыт (display:none;). Иначе его скрывать не нужно.
Чтобы его скрытьможно написать, например так: <a <?if($totalPages > 1):?>style="display:none;"<?endif?>>Пе рейти в портфолио</a>
2. В JS коде добавить свойство с именем linkToPortfolio (this.linkToPortfolio = $(p.linkToPortfolio);).
3. Добавить следующий код (после строк if(o.curPage == o.loadSett.endPage){o.newsLoader.parent().hide();) : o.linkToPortfolio.show();
4. При создании JS объекта в файле template.php нужно связать ID элемента ссылки со свойством функции-конструктора.
Если перед списком новостей нужно вывести какой-то текст, как его правильно разместить - в шаблоне или на странице со списком? Я пробовала и так, и так - после нажатия на "загрузить еще" текст перед списком дублируется.
На странице, где размещен компонент новостей (в архиве content/news2/index.php), перед ним разместите компонент «Вставка включаемой области» (bitrix:main.include).
Ознакомьтесь с параметрами компонента на сайте Битрикса. С помощью включаемой области разместите необходимый текст.
В этом случае при загрузке дополнительных новостей текст дублироваться не будет.
Чем ваша реализация AJAX принципиально отличается от реализации битрикса? Насколько я понимаю, при догрузке вы так же запрашиваете исходную страницу с параметрами и выбрасываете лишнее. Спасибо.
Скачайте обновленный архив по ссылке в конце статьи.
У меня такая проблема...
Когда я нажимаю на кнопку "Показать еще новости", у меня открываются не новые новости, а те же самые, что были над этой кнопкой.
Подскажите пожалуйста, в чем может быть причина?
RSS лента комментариев этой записи