Документация 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`.

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

  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
        Могу писать из под админа
        *Комментарий будет опубликован после проверки модератором

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        getResources заготовки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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