Привет всем. В этой статье я бы хотел рассказать о том, как создать бесконечную прокрутку в MODX Revolution.
Постраничная навигация (пагинация) является классикой, но иногда нужно использовать так называемую бесконечную прокрутку
. Бесконечная прокрутка имеет свои достоинства и недостатки, но я не ставлю целью этой статьи сравнивать эти два подхода порционирования содержимого, а просто расскажу на простом примере, как я реализовал бесконечную прокрутку.
Принципы создания бесконечной прокрутки одинаковы для любых систем, но эта статья ориентирована на MODX.
Как оно работает?
Если в общих чертах, то принцип бесконечной прокрутки в том, чтобы при срабатывании события (пользователь листает страницу до низа или нажимает на кнопку Загрузить больше
) с помощью AJAX подгружались более поздние сообщения и добавлялись к общему списку записей (сообщения, публикации и пр.). Всё это похоже на обычную пагинацию, но происходит без перезагрузки страницы.
Минимальные требования
Итак, для создания бесконечной прокрутки необходимо следующее:
- MODX Revolution (я использовал версию 2.3)
- Расширение getResources
- jQuery
- Взвешенное решение читателя о том, нужна ли ему бесконечная прокрутка.
Вывод статей
Для вывода статей я использовал расширение getResources. Обратите внимание на id обёртки. Он будет использоваться для идентификации блока, куда подгружаются записи.
Теперь нужна кнопка, по нажатию на которую будут подгружаться поздние записи. В данном случае этой кнопкой является span с идентификатором giveMeMoreNewsPlease
. Как я уже написал, бесконечная прокрутка очень похожа на традиционную пагинацию. Поэтому я решил хранить номер абстрактной страницы в скрытом поле.
Запрос на получение ранних новостей
Теперь нужно как-то подгрузить очередную порцию записей. Для этого с помощью AJAX отправляем запрос на получение записей, указывая номер страницы.
Возвращение записей
Осталось дело за последним — отдавать последние записи на стороне сервера. Во-первых, нужно создать пустой шаблон для страницы, в котором будет один единственный тег [[*content]]. Во-вторых, нужно создать саму страницу (если вы внимательно просмотрели код выше, то у этой страницы псевдоним newsajax
), которая возвращает записи в определённом количестве и с определённым смещением, которое зависит от номера страницы. Содержимое страницы следующее: [[!newsInfinity]]. Как можно догадаться, на этой странице вызывается самописный сниппет. Давайте посмотрим на его содержимое.
Здесь скрипт ожидает получить номер страницы, исходя из которого он вычисляет смещение (за это отвечает параметр offset у getResources).
В общем, как-то так я за пару часов сделал бесконечную прокрутку.
Недостатки этого решения
Обошлось и не без недоработок. Во-первых, в моём решении не учитывается момент, когда на сайт добавляется запись. Допустим, если посетитель находится уже на третьей абстрактной странице, а в это время редактор добавил статью, то при получении следующей порции записей пользователю вернётся дублированная запись.
В общем, хорошо подумайте перед тем, как использовать бесконечную прокрутку.