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

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

MIGX (Multi-Items Grid for MODX) — Extra для создания повторяемых групп полей внутри одного TV-параметра. Аналог Paragraphs в Drupal или повторителей в ACF/WordPress. Редактор может добавлять сколько угодно блоков произвольной структуры: слайды, преимущества, шаги, галереи, прайс-листы.

Установка

Package Manager → найти migx → установить. Дополнительно: MIGX устанавливает компонент в менеджере и добавляет тип поля для TV.

Создание MIGX конфигурации

Компоненты → MIGX → Конфигурации → Создать.

Пример: конфигурация «Слайдер» (slider):

{
  "formtabs": [
    {
      "caption": "Слайд",
      "fields": [
        {
          "field": "image",
          "caption": "Изображение",
          "inputTV": "migx_image",
          "inputTVtype": "image"
        },
        {
          "field": "title",
          "caption": "Заголовок",
          "inputTVtype": "text"
        },
        {
          "field": "subtitle",
          "caption": "Подзаголовок",
          "inputTVtype": "textarea"
        },
        {
          "field": "link",
          "caption": "Ссылка кнопки",
          "inputTVtype": "url"
        },
        {
          "field": "btn_text",
          "caption": "Текст кнопки",
          "inputTVtype": "text",
          "default": "Подробнее"
        }
      ]
    }
  ],
  "columns": [
    {"header": "Изображение", "dataIndex": "image", "renderer": "this.renderImage", "width": 80},
    {"header": "Заголовок", "dataIndex": "title"}
  ],
  "actionbuttons": "add,edit,remove,moveup,movedown",
  "window_title": "Слайд"
}

Привязка к TV

Элементы → Переменные шаблонов → Создать:

• Тип ввода: migxdb или migx
• Конфигурация MIGX: slider
• Имя: hero_slider

Вывод через сниппет migxLoopCollection

[[migxLoopCollection?
    &classname=`migxresourcecrops`
    &MIGX_outputSeparator=``
    &tpl=`@INLINE
    <div class="slide swiper-slide" style="background-image:url([[+image]])">
        <div class="slide__content">
            [[+title:notempty=`<h2 class="slide__title">[[+title]]</h2>`]]
            [[+subtitle:notempty=`<p class="slide__sub">[[+subtitle]]</p>`]]
            [[+link:notempty=`<a href="[[+link]]" class="btn">[[+btn_text:default=`Подробнее`]]</a>`]]
        </div>
    </div>
    `
    &tv=`hero_slider`
    &docid=`[[*id]]`
]]

Вывод через pdoTools + getImageList

[[!pdoField?
    &docid=`[[*id]]`
    &tv=`hero_slider`
    &tpl=`sliderItem`
    &outputSeparator=``
]]

Или через нативный MIGX сниппет getImageList:

[[!getImageList?
    &tvname=`hero_slider`
    &docid=`[[*id]]`
    &tpl=`sliderItem`
    &toPlaceholder=`slides`
]]
[[+slides]]

Сложные MIGX с вложенными данными

MIGX поддерживает JSON внутри JSON — реализация сложных структур:

// Конфигурация "Услуги с иконками"
{
  "formtabs": [{
    "fields": [
      {"field": "icon", "caption": "Иконка SVG", "inputTVtype": "textarea"},
      {"field": "title", "caption": "Название", "inputTVtype": "text"},
      {"field": "description", "caption": "Описание", "inputTVtype": "textarea"},
      {"field": "features", "caption": "Особенности (через ;;)", "inputTVtype": "textarea"}
    ]
  }]
}

[[getImageList?
    &tvname=`services_list`
    &docid=`[[*id]]`
    &tpl=`@INLINE
    <div class="service-card">
        <div class="service-card__icon">[[+icon]]</div>
        <h3>[[+title]]</h3>
        <p>[[+description]]</p>
        [[+features:notempty=`
        <ul>
            [[+features:explode=`;;`:each=`<li>[[+v]]</li>`]]
        </ul>
        `]]
    </div>
    `
]]

Сроки

Создание и настройка MIGX-конфигурации для 3–5 типов повторяемых блоков (слайдер, преимущества, прайс) — 1–2 дня.