Урок, в котором рассмотрим назначение дополнения MODX Revo MIGX.

Работу с MIGX разберём на примере, результатом которого станет возможность добавлять в удобной форме изображения к ресурсам. Вывод изображений связанных с ресурсом на страницу будем осуществлять посредством карусели (слайдера) Bootstrap 3.

Что такое MIGX?

MIGX — это компонент для MODX Revolution, который добавляет к переменным шаблона (TV параметрам) новый тип ввода с аналогичным названием (migx) и удобными инструментами для работы с ним. MIGX позволяет сохранить в одну TV-переменную целую таблицу данных. Это означает то, что с помощью MIGX и одного дополнительного поля (TV) можно с каждым ресурсом связать сложный набор данных. Для хранения данных в MIGX TV-переменной используется формат JSON.

Название MIGX расшифровывается как MultiItemsGridtv (МногоЭлементнаяСеткаTV) для MODX.

Для извлечения сложных элементов данных из дополнительного TV поля с типом MIGX можно использовать сниппет getImageList. Данный сниппет поставляется вместе с пакетом MIGX.

Установка MIGX

Процесс установки MIGX начинается c открытия в админке MODX Revolution страницы «Управление пакета» (Приложение -> Установщик) и нажатия в ней кнопки «Загрузить дополнения». На открывшейся странице в поле «Поиск» вводим название пакета (MIGX) и нажимаем клавишу Enter. После этого из представленных результатов выбираем искомое дополнение и нажимаем на кнопку «Загрузить». Возвращаемся на предыдущую страницу и завершаем процесс инсталляции с помощью кнопки «Установить».

В процессе установке необходимо определиться с местом расположения компонента MIGX в главном меню админки. Выбор тут осуществляется из 2 вариантов. Первый вариант (Top Nav) подразумевает размещения ссылки на компонент в качестве основного пункта меню, а второй (Extras/Components) – в элементе «Приложения».

Настройка расположения компонента MIGX в меню менеджера MODX Revo

Результат установки дополнения MIGX:

Расширения MODX, установленные в системе

MIGX — Создание карусели Bootstrap

В качестве примера рассмотрим применение компонента MIGX для создания карусели Bootstrap. Перед тем как переходить к созданию элемента определимся с перечнем основных полей, которые необходимы для формирования каждого слайда карусели.
Этот список будет состоять из следующих полей:

  • title — заголовок (название) слайда (изображения);
  • image – изображение;
  • description — описание изображения.

Создание MIGX элемента, состоящего из вышеперечисленных полей, осуществляется на вкладке «MIGX» страницы «Управление MIGX». Открытие страницы «Управление MIGX» выполняется с помощью пункта MIGX в главном меню менеджера или в раскрывающем списке «Приложения» в зависимости от настройки его расположения.

MODX — Управление MIGX

Создание нового MIGX элемента

Процесс разработки нового элемента MIGX осуществляется с помощью кнопки «Добавить элемент». После нажатия на эту кнопку открывается модальное окно «MIGX», состоящее из множества вкладок. Для большинства задач достаточно использовать только первых три: Settings (Основные параметры), Formtabs (вкладка для создания структуры) и Columns (вкладка для разработки таблицы, с помощью которой конечный пользователь будет управлять данными).

На вкладке «Settings» введём название элемента (например, photos) и надпись, которая будет заменять текст «Добавить элемент».

MODX — Ввод название MIGX-элемента

На вкладке «Formtabs» осуществляется создание полей. Другими словами она определяет структуру, которую конечные пользователи будут использовать для ввода своих данных. Чтобы добавить поля к MIGX необходимо нажать на кнопку «Добавить элемент» и в открывшемся диалоговом окне ввести название набора (Caption) и заполнить таблицу Fields.

MODX — Создание полей MIGX-элемента (вкладка Formtabs)

Ввод записей в таблицу MODX Revolution MIGX осуществляется с помощью кнопки, расположенной сразу же после заголовка «Fields».

В таблицу Fields внесём следующие 3 записи:

  • Fieldname (имя поля) – title, Caption – Заголовок, Description – Описание фотографии.
  • Fieldname (имя поля) – image, Caption – Изображение, Input TV Type – image.
  • Fieldname (имя поля) – description, Caption – Описание.

MODX MIGX — Создание поля title

Заключительный шаг – это ввод данных во вкладку «Columns». Данная вкладка определяет название столбцов колонок таблицы (внешний вид), с помощью которых пользователь осуществляет просмотр и ввод данных в соответствующую дополнительную TV-переменную MIGX ресурса (в данном случае TV-переменную, определённую MIGX-элементом photos).

Введём в таблицу Columns следующие сведения:

  • Header – Заголовок, Field (имя поля) – title, Column width (ширина колонки) – 100.
  • Header – Файл изображения, Field – image, Renderer – this.renderImage.
  • Header – Описание, Field – description, Column width (ширина колонки) – 200.

Добавление записей в таблицу осуществляется с помощью кнопки «Добавить элемент».

MODX MIGX — Добавление данных во вкладку конфигурации Columns

Создание TV-поля MIGX с конфигурацией photos

После создания MIGX-элемента (конфигурации) photos приступим к созданию дополнительного поля (TV) с типом ввода MIGX и конфигурацией photos.

Создание дополнительного поля в админке осуществляется на левой панели во вкладке «Элементы». Для этого напротив надписи «Дополнительные поля» нажмите на значок плюса и в открывшейся странице введите следующие данные:

  • На вкладке «Общая информация» в поле «Имя» значение photos (имя дополнительного поля);
  • На вкладке «Параметры ввода» в раскрывающемся списке «Тип ввода» выбрать пункт migx, а в поле «Конфигурации» ввести значение photos.
  • На вкладке «Доступно для шаблонов» выбрать те шаблоны, для которых (а точнее для ресурсов, у которых установлены данные шаблоны) это поле будет доступно.

Ввод данных в TV MIGX поле photos

Откроем любой ресурс, у которого доступно MIGX TV поле photos и введём в него, например, следующие данные:

MODX MIGX — Добавление данных в TV-поле photos ресурса

Вывод данных TV MIGX поля на страницу

Выводить данные на страницу будем с помощью сниппета getImageList, который поставляется вместе с дополнением MIGX.

Данные из TV MIGX поля photos визуально представим в виде карусели Bootstrap. Познакомиться с тем, какой необходимо получить на выходе HTML код можно используя статью Знакомство с каруселью Twitter Bootstrap.

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

<h1 class="h2 page-header text-center">[[*longtitle:empty=`[[*pagetitle]]`]]</h1>
<div id="carousel" class="carousel slide" data-ride="carousel" style="max-width:600px; margin-left: auto; margin-right: auto;"> <ol class="carousel-indicators"> [[getImageList? &tvname=`photos` &tpl=`tplCarouselIndicator` ]] </ol> <div class="carousel-inner" role="listbox"> [[getImageList? &tvname=`photos` &tpl=`tplCarouselItem` ]] </div> <a class="left carousel-control" href="#carousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Предыдущий</span> </a> <a class="right carousel-control" href="#carousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Следующий</span> </a>
</div>

Вышеприведённый код состоит из HTML разметки и 2 вызовов сниппета getImageList. Первый выводит индикаторы карусели, а второй – слайды, содержащие изображения. Данные сниппеты имеют 2 параметра. Параметр tvname предназначен для указания имени TV-переменной с MIGX данными, которые необходимо вывести на страницу. А параметр tpl определён для того чтобы задать шаблон (чанк), посредством которого будет формироваться каждая строка данных из MIGX TV-поля photo.

Содержимое чанка tplCarouselIndicator:

<li data-target="#carousel" data-slide-to="[[+idx:subtract]]" [[+idx:is=`1`:then=`class="active"`]]></li>

Содержимое чанка tplCarouselItem:

<div class="item [[+idx:is=`1`:then=`active`]]"> <img src="[[+image]]" alt="[[+title]]"> <div class="carousel-caption"> <h3>[[+title]]</h3> <p>[[+description]]</p> </div>
</div>

Результат отображения карусели на странице:

MODX — Использование MIGX для создания карусели из данных хранящихся в одной TV-переменной

Источник: itchief.ru