MODX - Вывод случайного ресурса с помощью AJAX

Урок, на котором рассмотрим, как в MODX Revolution с помощью технологии AJAX реализовать вывод случайной статьи на странице.

Описание процесса вывода случайной статьи на странице

Основные действия, которые нам предстоит реализовать, для того чтобы вывести случайную статью на странице, выразим с помощью следующих шагов:

1. Создать на стороне клиента (с помощью скрипта JavaScript) асинхронный запрос и отправить его на сервер по адресу текущей страницы.
2. Получить запрос, отправленный клиентом, на сервере с помощью сниппета (ajaxSnippet). В этом сниппете будем обрабатывать полученный запрос, формировать ответ и отправлять его клиенту (веб-браузеру).
3. В этот время (после того как мы отправили запрос на сервер) страница (веб-браузер) ждёт на него ответ… Как только ответ прийдет с сервера, выводим его с помощью JavaScript на страницу.

Кроме этого выводить будем не одну случайную статью после загрузки страницы, а организуем так называемое слайд-шоу. Т.е. будем заменять одну случайную статью другой через некоторое время (например, для наглядности через 5 секунд).

На уровне кода необходимо будет выполнить следующее:

• В шаблоне "Пост":
  • создать контейнер (блок div) в который будем выводить случайную статью;
  • создать js-код, который будет выполнять 3 основные действия: отправлять запрос на сервер, получать от него ответ и отображать его на странице. Данный JavaScript код создадим не в самом шаблоне, а в чанке "chunk.footer", который будет вызываться из данного шаблона;
  • поместить вызов некэшируемого сниппета "ajaxSnippet". Он будет обрабатывать на сервере запрос, поступивший от клиента и отправлять ему ответ.
• Создать в MODX сниппет, имеющий имя ajaxSnippet. Он будет выполнять действия ("магию") вышеприведённого пункта.

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

В сниппете для получения случайной статьи будем использовать сниппет getTicket. Получать случайную статью будем из раздела, который имеет идентификатор 4.

<?php
// Если  запрос не AJAX (XMLHttpRequest), то завершить работу
if ($_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest') {return;}

// Проверяем является ли $_POST['action'] пустым. Если да, то завершаем работу
if (empty($_POST['action'])) {return;}

// В противном случае выполняем следующие действия:
// 1. Заводим переменную, которая будет хранить результат
$res = '';
// 2. Так как данный сниппет можно будет использовать и для других запросов, то выберем действие которе нужно выполнить с помощью оператора switch
switch ($_POST['action']) {
  case 'randomTicket':
    // 3. Параметры для выполнения сниппета
    $param = array(
      'sortby' => 'RAND()',
      'limit' => 1,
      'tpl'=> '@INLINE <h3>[[+pagetitle]]</h3>[[+introtext]]<p><a href="[[~[[+id]]]]" class="btn btn-primary" role="button">Читать далее...</a>',
      'parents'=> 4
    );
    // 4. Выполнить сниппет getTickets 
    $res = $modx->runSnippet('getTickets',$param);
    break;
  // При необходимости можно добавлять новые методы
}

// Если ответ не пустой, то отдаём и прерываем работу парсера MODX
if (!empty($res)) {
  // Выводит сообщение ($res) и прекращает выполнение текущего скрипта
  die($res);
}

Код шаблона "Пост"

Внесём следующие изменения в шаблон "Пост":

1. Поместим блок с идентификатором randomTicket в контейнер, имеющий класс col-md-4:

   <div class="col-md-4">
     [[$search]]
     <div id="randomTicket" class="thumbnail" style="padding:15px;"></div>
   

2. Поместим вызов сниппета ajaxSnippet:

   <div class="col-md-4">
     [[$search]]
     <div id="randomTicket" class="thumbnail" style="padding:15px;"></div>
     [[!ajaxSnippet]]
   

3. Добавим JavaScript код в чанк "chunk.footer":

   <script>
   // после загрузки страницы
   $(function() {
     // вызвать функцию showRandomTicket()
     showRandomTicket();
     // смену новости будем выполнять каждые 5 секунд
     setInterval(showRandomTicket, 5000);
     // функция showRandomTicket()
     function showRandomTicket() {
       // Выполняем ajax запрос к текущей страницы (к сниппету ajaxSnippet) методом post
       $.post(document.location.href, {action: 'randomTicket'}, function(data) {
         // полученный ответ выводим в блок, имеющий идентификатор randomTicket     
         // вывод блок будем сопровождать анимацией
         $('#randomTicket').fadeOut(300, function() {
           $(this).html(data).fadeIn(800);
         });
       });
     };
   });
   </script>
   

Демонстрация работы созданного кода

Проделанную работу продемонстрируем с помощью следующего видео ролика: https://www.youtube.com/embed/X2IU5qBd9fs