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

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

MODX Revolution - Вывод случайной статьи на странице
MODX Revolution - Вывод случайной статьи на странице

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

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

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

Схема, описывающая процесс вывода случайной статьи на страницу
Схема, описывающая процесс вывода случайной статьи на страницу

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

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

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

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

MODX Revolution - Создание сниппета ajaxSnippet
MODX Revolution -  Создание сниппета ajaxSnippet
<?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);
}

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

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

MODX Revolution - Изменение шаблона Пост
MODX Revolution -  Изменение шаблона Пост
  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":
    MODX Revolution - Изменение чанка chunk.footer
    MODX Revolution -  Изменение чанка 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>
    

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

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