Попробуем разобраться сегодня как загружать комментарии используя Quip, AJAX и прямые руки. Для начала установите компонент Quip, если он ещё не установлен.
Создадим ресурс с произвольным именем, шаблоном _Blank (!) и назначим ему псевдоним (alias) как ajaxgetcomments, переходим на вкладку Настройки (Settings) и ставим чекбокс Заморозить URI (Freeze URI) и выставляем значение ajaxgetcomments без “.html”.
Вставляем в поле “содержимое” (content) некешируемый вызов сниппета ajaxGetComments. Получается следующая картина:
* Давайте теперь создадим сам сниппет ajaxGetComments. Этот сниппет - всего лишь модифицированный сниппет Quip, который будет принимать параметр thread от AJAX вызова и выдавать соответствующий тред комментариев. Скопируем код сниппета Quip и добавим туда сверху код, принимающий параметр thread (нужный тред) и передающий его в $properties в виде массива после инициализации контекста:
Мы проверим вначале работу сниппета и, если всё сделали правильно и получаем комментарии, то поменяем GET на POST. Проверим теперь работу сниппета: напишем в адресной строке браузера запрос, вида: http://mysite.com/ajaxgetcomments?thread=mythread, где mythread - это ИД треда, для меня строка проверки работы была https://modx.ws/demo/ajaxgetcomments?thread=blog-post-11
ИД треда можно найти в менеджере в Quip компоненте, смотрим изображение:
Итак, если сниппет работает как нужно, то меняем запрос GET на POST и добавляем вверху сниппета ajaxGetComments для проверки наличия AJAX-запроса следующую строчку:
if ($_SERVER[‘HTTP_X_REQUESTED_WITH’] != ‘XMLHttpRequest’) {return;}
Создадим код кнопки “Показать комментарии”, которая будет содержать данные о треде вывода комментариев в атрибуте data-thread. Вставляем его в том месте шаблона, где планируем выводить комментарии. Код кнопки:
Создадим JS-код, который будет обрабатывать нажатие кнопки, брать данные о треде из атрибута data-thread и отсылать его в post-запросе на нужный нам URL:
Вставляем данный код после вызова библиотеки jQuery (на момент написания статьи - 1.8.2). Добавляем необходимые стили и в итоге получаем следующий код шаблона:
Что нужно читать, чтобы понять как я это сделал:
- Основы Ajax статья Василия Наумкина о AJAX в MODX Revolution. Расширяет горизонты =).
- Документация по Quip. - тут можно почитать и узнать какие дополнительные параметры можно передавать-получать для AJAX запроса.
- HTML5 data-атрибуты (data-*) пожалуй самая удачная статья по data-атрибутам, есть одна на Хабре, но эта была самой понятной.
- AJAX в MODX Revolution когда-то я уже переводил статьи о AJAX в MODX Revolution.
Вот пожалуй и всё. Как обычно задавайте вопросы.