Начинаем работать с MIGX или для чего это нужно

Данный компонент в своей работе использую довольно-таки часто, а в некоторых ситуациях он оказывается просто незаменимым. Его очень удобно использовать в том случае, когда нужно создать TV-поле, в которое впоследствии можно будет добавлять данные, схожие по своей структуре несколько раз. Сама же структура создаётся за счёт создания своих внутренних полей, которые на самом деле являются ни чем иным, как строкой формата JSON. 

Где это применяется?

На самом деле, данному компоненту можно найти множество применений, в зависимости от того, какую задачу вам необходимо решить. В качестве примера мы рассмотрим такую типовую задачу, как создание галереи. Первое что приходит на ум обычно  - создать несколько полей типа "Изображение". И вроде бы проблемы в этом никакой нет, кроме одной - мы не знаем, сколько именно у нас изображений будет в нашей галерее. Можно конечно привязать к шаблону несколько TV одного и того же типа, но выглядеть это будет избыточно с точки зрения захламления лишними сущностями, которых в одном ресурсе будет скажем 20 и они будут все использоваться, а в другом - будут те же 20 полей, но при этом по факту будет использоваться лишь 5 из них. Ну и плюс в нагрузку к этому все прочие вытекающие отсюда неудобства. 

Вот здесь и приходит к нам на помощь компонент MIGX. Кстати, ближайший аналог по данному функционалу в Evo, является MultiTV, поэтому если вы уже когда-то работали с ним, то понять работу MIGX вам не составит никакого труда. Но даже если вы сейчас не до конца понимаете, для чего всё это нужно, то далее по тексту все вопросы отпадут сами собой. 

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

Настройка конфигурации MIGX

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

Затем отправляемся во вкладку MIGX и нажимаем на кнопку "Добавить элемент". На вкладке "Settings" вводим имя для нашей конфигурации, пусть это будет gallery. После чего выбираем вкладку Formtabs и нажимаем на кнопку "Добавить элемент" уже в ней. Здесь поле "Caption" отвечает за название вкладки, в которой у нас будут отображаться все поля. Но сама вкладка при этом отображается только в том случае, если создано 2 или более вкладки. 

Теперь нужно определить, сколько у нас вообще будет полей у каждого элемента галереи. Я решил что у меня будет 2 поля - "Название изображения" и "Изображение". Нажимаем "Добавить элемент".

Заполняем необходимые поля:
fieldname - image (должно быть уникальным), 
caption - "Картинка" (подсказка для пользователя).
Input Tv type - тип tv поля. Поскольку это картинка, то в данном случае нужно указать "image". Но по факту, можно использовать и другие типы полей, в зависимости от того, какой результат вы хотите в итоге получить: 

• textarea - текстовая область, 
• richtext - текстовый редактор, 
• listbox - список (одиночный выбор), 
• listbox-multiple - список (множественный выбор), 
• option - переключатели (radio), 
• checkbox - флажки (checkbox), 
• file - файл, 
• url - url, 
• email - электронная почта, 
• number - число,
• date - дата, 
• tag - тег.
  

После того, как все поля заполнены, нажимаем "Выполнить".

Точно так же, по образу и подобию создаём поле для названия изображения. Поля fieldname и caption задаём произвольно, а вот в поле Input Tv type указываем тип - "text". 

После того, как были заполнены значения для всех полей, нажимаем "Выполнено". С вкладкой Formtabs (создание и редактирование элемента в админке) мы разобрались. 

Теперь нужно будет разобраться с колонками, которые показываются при отображении всех элементов. 

Переходим во вкладку "Columns" и нажимаем кнопку "Добавить элемент". 

Для поля "Изображение" вводим такие данные: 
Header - "Изображение" (заголовок колонки)
Field - image (должно совпадать со значением поля fieldname из вкладки Formtabs). Это нужно для того, чтобы сопоставить колонку с отображаемым полем. 

Здесь же, переходим во вкладку "Renderer" и в выпадающем списке "Renderer" выбираем опцию - this.renderImage. Сейчас я не буду вдаваться в детали, скажу лишь что это необходимо для того, чтобы при добавлении картинки, у нас в админке отображалась сама картинка, а не путь к ней. Сохраняем и переходим к следующей колонке - заполняем по аналогии, только на этот раз, за отсутствием необходимости, не заходим во вкладку Renderer.

Подтверждаем изменения, нажав кнопку "Выполнено". Всё, мы создали нашу конфигурацию, дальше будет проще. 

Привязываем конфигурацию к обычному TV полю 

Создаём TV как обычно, только на этот раз в настройках на вкладке "Параметры ввода" указываем в качестве типа ввода - migx. А в поле "Конфигурации" указываем название нашей конфигурации. В моём случае, это gallery. 

Выводим данные migx поля

[[!getImageList?
  &tpl=`gal_item`
  &tvname=`gallery_inner`
  &docid=`1`
]]

tpl - это название чанка, шаблон для вывода изображения;

Пример чанка: 

<li><img src="[[+image]]" alt="[[+image_caption]]"></li>

tvname - как следует из названия, это само поле, которое связано с конфигурацией migx;
docid - ID документа, значение TV которого будем выводить.