Документация MIGX

Здесь представлен перевод статей с rtfm.modx.com, а также добавлен из некоторых других источников. Если вы нашли ошибку или опечатку, напишите об этом в комментарии.

Что такое MIGX?

MIGX это специальный тип дополнительных полей (TV), созданный для того чтобы объединить несколько разных TV в один. Такая система объединенных полей очень сильно упрощает администрирование сайта, когда есть необходимость заполнять много информации. Поля ввода в MIGX могут быть всеми стандартными типами - Текст, цифра, выпадающий список, картинка, чекбокс и пр.

Пакет позволяет разработчику гибко настроить структуру и набор используемых полей ввода в рамках одного MIGX-поля.

Дополнение поставляется со снипппетом getImageList, который позволяет быстро и просто вывести данные из заполненного дополнительного поля MIGX

MIGX расшифровывается как MultiItemsGridtv for MODX

Как работает специльный тип дополнительных полей (TV) MIGX

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

Создание первого TV MIGX

Заготовка для конфигурации MIGX находится в директории /core/components/MIGX/examples/. В нижеследующем примере мы будем использовать заготовку "tabs.txt". Эта документация предполагает, что у вас установленно дополнение TinyMCE.

Файл tabs.txt содержит пример реализации простой галереи изображений. Галерея будет состоять из единого элемента, который объединяет в себе одно текстовое поле с редактором (описание изображения), одно поле изображения (само изображение), и короткую строку (заголовок). Все эти данные будут храниться в одном TV-поле.

Шаг 1: Создайте TV MIGX

  • Заполните название, заголовок и все остальное как у любого другого TV-поля.
  • Укажите к какому шаблону относится TV-поле
  • Укажите тип ввода - MIGX

Шаг 2: Настроить поля ввода MIGX
Шаг 2.1: Вкладки формы

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

Скопируйте содержимое tabs.txt в поле "Вкладки формы"

[
{
  "caption":"Info",
  "fields": [
    {
      "field":"title",
      "caption":"Title"
    },
    {
      "field":"description",
      "caption":"Description",
      "inputTVtype":"richtext"
    }
  ]
},
{
  "caption":"Image",
  "fields":[
    {
      "field":"image",
      "caption":"Image",
      "inputTVtype":"image",
      "sourceFrom":"MIGX"
    }
  ]
}
] 

Сейчас мы разберем этот JSON на составляющие чтобы понять что есть что.

  • Первый ключ "caption" отвечает за то какой заголовок будет у вкладки. В данном случае - "Info".
  • Второй ключ "fields" Содержит информаци о полях, доступных для редактирования в этой вкладке.
    • Первый ключ элемента fields - "field". Значение этого ключа соотвествует имени плейсхолдера при выводе данных через getImageList.
    • Второй ключ элемента fields - "caption". Это заголовок, который увидит пользователь, заполняющий данные в панели управления.
    • Третий ключ элемента fields - "inputTVtype". Позволяет указать тип TV (ДАТЬ СПИСОК)(по-умолчанию "text")
    • Во второй вкладке мы указали "inputTVtype":"image" для того чтобы можно было загружать изображения.
    • "sourceFrom":"MIGX" - если нужно чтобы изображения брались из предустановленного в настройках TV-поля источника файлов.

Ключи для "Вкладки форм"

Ключ Описание
field Имя плейсхолдера, которое можно будет использовать в шаблоне при выводе через getImageList.
caption Заголовок для поля ввода в панели управления.
description Описание поля ввода в панели управления.
inputTVtype Используется для определения типа ввода (по-умолчанию "text").
inputTV Название TV-поля, которые будет использовано. Например, можем создать ТВ "списко ресурсов", указать тут его название и получим список ресурсов внутри MIGX
default The default value of that field.

Шаг 2.2: Разметка колонок

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

Скопируйте содержимое columns.txt в поле "Разметка колонок"

[
{"header": "Title", "width": "160", "sortable": "true", "dataIndex": "title"},
{"header": "Image", "width": "50", "sortable": "false", "dataIndex": "image","renderer": "this.renderImage"}
]

Ключи для "Разметки колонок"

Ключ Описание
header Название столбца
sortable Можно ли сортировать столбец?
dataIndex Поле, которое вы хотите вывести в этом столбце (значение ключа "field" из Вкладки форм)
renderer Можно использовать средства визуализации для каждого столбца. Например, для того чтобы отображить миниатюры изображений в таблице, должна быть включена функция "this.renderImage".
Возможные значения параметра renderer:
this.renderimage
this.renderImageFromHtml
this.renderPlaceholder
this.renderFirst
this.renderLimited
this.renderCrossTick
this.renderClickCrossTick
this.renderSwitchStatusOptions
this.renderPositionSelector
this.renderRowActions
this.renderChunk
ImagePlus.MIGX_Renderer
this.renderDate
this.renderOptionSelector
editor Cell Editor:
For ingrid-editing, select an Editor for this column.
this.textEditor - simple Text-input
this.listboxEditor - shows a listbox with the input-options of that field

Ввод данных

Шаг 1: Установка

Убедитесь, что вы установили MIGX, настроили MIGX TV, применили его к шаблону, и создал ресурс с этим шаблоном.

Шаг 2: Ввод данных

  1. Зайдите в ваш ресурс, а затем перейдите на вкладку "Дополнительные поля". Вы должны увидеть новое дополнительное поле.
  2. Нажмите на кнопку "Добавить"
    Заполните поля, которые вы определили в настройках дополнительного поля. Если вы не видите никаких полей, убедитесь, что заполнили поле "Вкладки формы" соблюдая синтаксис JSON (Иногда при копировании примеров вы можете вставить неразрывные пробелы вместо обычных, в таком случае JSON не будет валидным)
  3. Нажмите кнопку "Готово"
  4. Нажмите кнопку "Сохранить", чтобы сохранить ресурс

Шаг 3: Изменение данных

Щелкните правой кнопкой мыши на любом элементе. Выберите либо Update, дублировать или удалить.

Шаг 4: Упорядочивание данных

Зажмите и перетащите элемент, чтобы изменить его положение в таблице.

Вывод данных через getImageList

Отображение элементов MIGX

В комплекте с пакетом MIGX поставляется сниппет getImageList, который подходит для вывода данных из заполненного TV MIGX. Не смотря на название он может быть использован не только для вывода изображений, но для всех типов данных. Это что-то вроде getResources, но специально для MIGX.

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

  • галерея изображений
  • слайдер с картинками или HTML
  • табличные данные
  • CSV или XML
  • Что угодно на самом деле

Пример использования getImageList

Давайте выведем изображения, которыми мы заполнили TV MIGX на шаге 2. Вставьте этот код там, где вы хотите увидеть картинки.

<ul>
 [[getImageList? 
  &tvname=`myMIGXtv`
  &tpl=`@CODE:<li>[[+idx]]<img src="[[+image]]"/><p>[[+title]]</p></li>
 `]]
</ul>

tvname - название TV-поля. tpl - шаблон вывода. В tpl вы можете указать как название чанка, так и строку кода. Убедитесь, что указали @CODE:, если решили использовать указать шаблон строчно. При использовании чанка достаточно указать только название этого чанка.

Вывод с использованием RezImgCrop:

<li>
 <img src="[[+image:rezimgcrop=`r-250`]]" alt="[[+title]]"/>
</li>

Вывод MIGX TV внутри шаблона getResources

<li>
 <a href="[[~[[+id]]]]">[[+pagetitle]]</a> 
 [[getImageList?
  &tvname=`myMIGXtv`
  &tpl=`thumbTpl`
  &limit=`1`
  &docid=`[[+id]]`
 ]]
</li>

Использование переменных из getResources в getImageList

Если вы хотите использовать переменные, поставляемые в шаблон getResources внутри шаблона getImageList вы можете передать эти данные в параметрах вызова getImageList. Вы можете задать произвольные имена этим параметрам, а вызывать их с помощью конструкции [[+property.myparam1]] в шаблоне getImageList.

[[getImageList?
  &tvname=`myMIGXtv`
  &tpl=`thumbTpl2`
  &docid=`[[+id]]`
  &limit=`1`
  &pagetitle=`[[+pagetitle]]`
  &originalResourceId=`[[+id]]`
]]
<li>
  <a href="[[~[[+property.originalResourceId]]]]">Показать еще изображения от [[+property.pagetitle]]</a>
</li>

Параметры сниппета getImageList

Ключ Описание
tvname Название дополнительного поля, которое нужно вывести
tpl Название чанка для вывода. Можно также использовать конструкции @CODE: или @FILE:. Если оставить поле пустым, то будет выведен массив (как через pront_r в php)
wrapperTpl Название чанка-обертки для результата работы сниппета. Принимает только один плесхолдер — [[+output]]. Как вывести getImageList только если он не пустой
docid ID ресурса, дополнительное поле которого нужно вывести. Пригодится при выводе в шаблоне getResources: &docid=`[[+id]]` [[*id]]
value Можно указать данные в формате JSON, вместо использования данных из TV-поля. Если указан, то docid и code{ignored} игнорируются.
limit Если не ноль, то указывает сколько выводить элементов 0
offset Кол-во элементов, которые нужно пропустить. 0
totalVar Плейсхолдер, содержащий общее количество элементов. Полезно при использовании getPage. total
randomize Укажите &randomize=`1` если хотите организовать вывод в случайном порядке 0
preselectLimit together with &randomize, this will preselect items from top to limit, for images you want to see in any case in ranomized output 5
where Отфильтровать элементы. Пример:
{"active:=":"1","rating:>":"5"}
sort Сортировка может быть по нескольким полям одновременно. Пример:
[{"sortby":"age","sortdir":"DESC","sortmode":"numeric"},
{"sortby":"name","sortdir":"ASC"}]
toPlaceholder Название плейсхолдера, в который следует поместить результат работы сниппета. К примеру есть указать &toPlaceholder=`MIGX`, то результат будет доступен в [[+MIGX]]. Примечание переводчика — почему-то этот плесхолдер не проходит проверку на пустоту. Чтобы решить эту проблему пользуйтесь wrapperTpl
toSeparatePlaceholders Разделяет результат работы сниппета на отдельные плейсолдеры. Например есть указать &toSeparatePlaceholders=`MIGX`, то результат ля каждого элемента будет сохранен в отдельном плейсхолдере: [[+MIGX.1]] [[+MIGX.2]] ......
placeholdersKeyField Применяется только в связке с &toSeparatePlaceholders. Пример: &placeholdersKeyField=`title` - получим [[+MIGX.firsttitle]] [[+MIGX.thirdtitle]] ......
outputSeparator Разделитель у элементов
toJsonPlaceholder output items as json into a placeholder, usefull when you want for example show randomized items on different places.
example: &toJsonPlaceholder=`jsonoutput` -> [[getImagelist? &value=`[[+jsonoutput]]`................]]
jsonVarKey example: &jsonVarKey=`MIGX_json` - this will use the value from $_REQUEST['MIGX_json'] as value, if any
useful together with the backend-preview-feature
MIGX_outputvalue

Доступные плейсхолдеры в шаблоне вывода getImageList

Ключ Описание
[[+fieldname]] Подставьте вместо 'fieldname' заданное вами значение поля
[[+idx]] Индекс текущего элемента. Начинается всегда с 1
[[+_first]] Содержит 1 если это первый элемент
[[+_last]] Возвращает 1 если это последний элемент
[[+_alt]] Возвращает 1 для каждого второго элемента
[[+total]] Возвращает общее кол-во элементов, можно заменить 'total' настройкой &totalVar
[[+property.name]] Можно использовать любые переданные параметры. К примеру если вы указали &docid=`20`, то [[+property.docid]] вернет 20

Продвинутое использование

Динамическая замена шаблона

Используя &tpl=`@FIELD:` можно установить любое поле шаблоном для вывода.

[[getImageList?
 &tvname=`myMIGXtv`
 &tpl=`@FIELD:mytplfield`
]]

Если вы определили поле "mytplfield" в настройках MIGX TV, getImageList будет использовать значение этого поля как шаблон для вывода данного элемента. Шаблон внутри поле "mytplfield" должен быть точно таким же, как содержание чанка, используемого обычно в &tpl=`chankname`.

Комментарии (5)

  1. Константин 12 апреля 2019, 00:58 # 0
    Добрый день!
    Создал тв поле с тремя текстовыми (field).
    При создании появляется модальное окно с тремя инпутами, в которые добавляется свой текст.
    После сохранения окно закрывается. В таблице тв полей видна только одна строка из трех.
    Вопросы:
    1) Как опять открыть модальное окно, чтобы отредактировать нужное поле?
    editor":«this.textEditor — редактирует только одну строку, что есть в таблице, а нужно все три.
    this.listboxEditor — появляется возможность выбора строки, но выпадающий список пуст.

    2) Как удалить созданное поле?
    1. Администратор 19 апреля 2019, 15:56 # 0
      Приветствую!
      Если я правильно понял, то проблема решается на очень простом уроне — вам нужно кликнуть правой кнопкой мыши по строке и там выбрать «Редактировать», или «Удалить».
    2. Павел 19 августа 2019, 04:46 # 0
      Не совсем понимаю, в каких единицах задаётся ширина? И по непонятной причине на некоторых сайтах при редактировании ресурса MIGX отображает только первую колонку и начинает отображать остальные только после редактирования одной из строк таблицы
      1. Администратор 24 марта 2023, 21:55 # 0
        Могу писать из под админа
        1. JustBirch 07 марта 2025, 02:33 # 0
          Добрый день. Возможно-ли создать MIGX поле с различными типа вывода. Что я имею ввиду.
          Принцып добавления нового элемента по типу различного TV, т.е допустим редактор хочет написать текст, потом он хочет добавить фото, далее видео с видео сервиса, принцып добавления блока как в WordPress.
          *Комментарий будет опубликован после проверки модератором

          Комментарии easyComm

          Евгений 17 апреля 2018, 20:54

          Что делать если в TV нет migx в выпадающем списке "Тип ввода"? MIGX установлен, но его нет в списке tv поля

          Администратор

          Может быть вы просто скачали MIGX пакет, но не установили его?...

          Похожие статьи

          Генератор настроек MIGX

          Документация на русском по MODX MIGX

          pdoPage и getImageList - Постраничная навигация MIGX

          Подсказки по работе и заготовки для MiniShop2

          Импорт и экспорт в MiniShop2. Реализация 1

          Как включить HTTPS (SSL) в MODX - Подробная инструкция

          Генерация YML для выгрузки в маркет

          Примеры работы с API MODX

          Примеры выборки where, optionFilters, innerJoin

          pThumb - ресайз изображений. Примеры использования.

          Расширение свойств товаров minishop2

          Добавить в письмо контактную информацию

          Сайт на обслуживании (выключить сайт)

          Примеры использования

          Вывести getImageList только если он не пустой

          Тип поля "Список ресурсов" (resourcelist) с ограничением по родителю (parents)

          Оформление и настройка easyComm. Комментарии и отзывы на сайте.

          Поиск на сайте с пакетом SimpleSearch

          Подсчет и вывод количества потомков ресурса в MODX

          Простая и симпатичная галерея fancybox

          Галерея. Вывести обложки альбомов и фотографии

          Вывод tv-параметров в формате -

          Отредактировать письмо о заказе - добавить ТВ поле, или что-то еще

          Quip для MODX. Более рабочий вариант

          Сниппет для вывода размера и расширения файла

          pdoResources Заготовки для работы

          Простой аудио-плеер HTML5

          Вывести список всех опций MiniShop2

          Слайдер Slick slider в контенте ресурса

          Как контролировать кэш CSS и скриптов

          Изменить цену на товар в зависимости от количества при добавлении в корзину minishop2

          Подключить MODX в стороннем PHP файле

          Простейшая авторизация

          Как создать ресурс процессором $modx->runProcessor('resource/create', $props)

          Красивое адаптивное меню под pdoMenu

          Сообщение о том, что сайт использует Cookie

          Массово обновить ТВ, или другое поле через базу

          Создать свою страницу в админке

          Изменить формат номера заказа

          Получить grandparent. Вывести родитель родителя

          Симпатичный список файлов, загружаемых к ресурсу через MIGX

          Установить шаблон по-умолчанию для новых, создаваемых ресурсов

          Вывести все доступные плейсхолдеры

          Отредактировать шаблон письма

          Создать источник файлов

          Общая сумма по каждому товару в корзине Minishop2

          Добавить скрипт перед тегом body

          Создать раздел с паролем на сайте MODX

          Фильтрация по TV параметрам в msProducts

          Что делать если ее приходит почта администратору

          Дата на русском

          FontAwesome - часто используемые иконки для шаблонов MODX

          Создать пакет с пользовательской таблицей

          Загрузка сниппета после загрузки страницы через AjaxSnippet

          Заготовки для работы

          Курсы валют с cbr.ru на PHP

          Обязательный чекбокс при оформлении заказа

          getResources заготовки

          Соответствие названия классов с названиями таблиц в MySQL

          Обработка остатков заказа в miniShop2

          Разбить вывод pdoResources на несколько колонок (блоков)

          Баннеры с использованием BannerY

          Обновить alias (псевдоним) у всех ресурсов

          CSS для постраничной навигации pdoPage

          Вывести время загрузки (формирования) страницы

          Счетчик посещений и скачиваний для сортировки ресурсов

          Расширить таблицу site_content (объект modResource) за 5 минут

          Вырезать кавычки — фильтр-сниппет MODX

          Бесплатная доставка от 5000 рублей в MiniShop2

          Динамическое поле emailSubject в FormIt

          Скрыть информацию о том, что сайт работает на MODX

          Отсортировать ресурсы по количеству комментариев Quip MODx

          Изменить цену на товар, если в корзине лежит товар из особой категории minishop2

          Создать редирект через autoRedirector API

          Cортировать по списку id в pdoResources и pdoTools

          Ответ для сервиса moneta.ru

          Вывести 404 ошибку по настройке TV MODX

          Email сделать не обязательным полем

          Как разместить исходный код сниппета на сайте, в документации

          Ускорить установку MODX revo до пары кликов

          Постраничная навигация — набор параметров и CSS PdoPage

          Сделать все элементы статичными для Git и IDE

          Не работает подгрузка товаров ajax mfilter2 на мобильном

          Сделать поле размер обязательным

          Настройка стилей для комментариев Tickets

          Подключить текстовой редактор к доп. полям ресурса

          Кастомный чанк для AdminPanel

          Динамическая замена шаблона ресурса - плагин

          Разместить корзину внутри блока с оформлением заказа

          xPDO Выборка из одной таблицы с зацепкой значения из другой

          Плагин для формирования замороженных URL с редиректом

          Приветственный экран / заглушка на сайт

          Вложенные условия в xPDO MODX

          Вывести список всех родителей в ТВ поле ресурса

          Как получить данные пользователя сразу после авторизации через API

          Вывести список всех емэйлов miniShop2

          Если getParentIds не работает в плагине

          Контролировать кэширование файлов CSS и JS MiniShop2

          Не приходят / не отправляются письма - в чем причина?

          Кэширование в MODX: использование $modx->cacheManager

          Наш сайт использует куки, нажмите «ОК» если вы не против
          OK