Добрый день. Я занимаюсь web-разработкой и почти всем, что с этим связано.

MODX Revolution: Бесконечная прокрутка

Привет всем. В этой статье я бы хотел рассказать о том, как создать бесконечную прокрутку в MODX Revolution.

Постраничная навигация (пагинация) является классикой, но иногда нужно использовать так называемую бесконечную прокрутку. Бесконечная прокрутка имеет свои достоинства и недостатки, но я не ставлю целью этой статьи сравнивать эти два подхода порционирования содержимого, а просто расскажу на простом примере, как я реализовал бесконечную прокрутку.

Принципы создания бесконечной прокрутки одинаковы для любых систем, но эта статья ориентирована на MODX.

Как оно работает?

Если в общих чертах, то принцип бесконечной прокрутки в том, чтобы при срабатывании события (пользователь листает страницу до низа или нажимает на кнопку Загрузить больше) с помощью AJAX подгружались более поздние сообщения и добавлялись к общему списку записей (сообщения, публикации и пр.). Всё это похоже на обычную пагинацию, но происходит без перезагрузки страницы.

Минимальные требования

Итак, для создания бесконечной прокрутки необходимо следующее:

Вывод статей

Для вывода статей я использовал расширение getResources. Обратите внимание на id обёртки. Он будет использоваться для идентификации блока, куда подгружаются записи.

Вызов getResources
Вызов getResources

Теперь нужна кнопка, по нажатию на которую будут подгружаться поздние записи. В данном случае этой кнопкой является span с идентификатором giveMeMoreNewsPlease. Как я уже написал, бесконечная прокрутка очень похожа на традиционную пагинацию. Поэтому я решил хранить номер абстрактной страницы в скрытом поле.

Кнопка получения новостей
Кнопка получения новостей

Запрос на получение ранних новостей

Теперь нужно как-то подгрузить очередную порцию записей. Для этого с помощью AJAX отправляем запрос на получение записей, указывая номер страницы.

AJAX-запрос получения новой порции сущностей
AJAX-запрос получения новой порции сущностей

Возвращение записей

Осталось дело за последним — отдавать последние записи на стороне сервера. Во-первых, нужно создать пустой шаблон для страницы, в котором будет один единственный тег [[*content]]. Во-вторых, нужно создать саму страницу (если вы внимательно просмотрели код выше, то у этой страницы псевдоним newsajax), которая возвращает записи в определённом количестве и с определённым смещением, которое зависит от номера страницы. Содержимое страницы следующее: [[!newsInfinity]]. Как можно догадаться, на этой странице вызывается самописный сниппет. Давайте посмотрим на его содержимое.

Код сниппета
Код сниппета

Здесь скрипт ожидает получить номер страницы, исходя из которого он вычисляет смещение (за это отвечает параметр offset у getResources).

В общем, как-то так я за пару часов сделал бесконечную прокрутку.

Недостатки этого решения

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

В общем, хорошо подумайте перед тем, как использовать бесконечную прокрутку.

Комментарии