Налаштування 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 дні.