MODX: MIGX — документация и примеры посадки блоков

MIGX MODX Revo MODX Revo

Сегодня обзорный урок — документация об очень полезном компоненте — MIGX. В рамках данного урока мы разберем все основные моменты работы этого компонента.

Что такое MIGX?

MIGX — это дополнение для MODX Revo, которое добавляет новый тип ввода дополнительных полей (TV/ТВ). Данный компонент предназначен для объединения ТВ — в много элементную сетку. Вместе с доп. полем MIGX, также идет сниппет getImageList который помогает извлекать элементы данных из многих TV. В общем этот компонент из ряда тех, которые должны быть обязательно установлены и советую с ним подружиться, так как он позволяет сделать очень многое.

Установка

Данный компонент находится в основном репозитории и процесс его установки обычный, как и у других пакетов.

Для MODX 2.8.x рекомендую скачивать стабильную pl версию MIGX 2.х.х с https://modx.com/extras/package/migx

Скачиваем стабильную версию MIGX

Скачать MIGX 2.13.0-pl с блога

Далее устанавливаем пакет в ручную — загрузить пакет с компьютера:

Загружаем пакет с пк

Устанавливаем

Основные моменты конфигурации

  • «formtabs» — вкладки модального окна, если присутствует только одна вкладка, то они скрываются;
  • «caption» — отображаемое название чего-либо(будь то вкладка или поле);
  • «field» — уникальное название поля формы;
  • «fields» — перечисление полей формы, находящиеся на данной вкладке, среди них:
    — «name» — текстовое поле «Название»
    — «url» — текстовое поле «Ссылка»
    — «image» — поле с выбором изображения — «Изображение»
    — «active» — список с одиночным выбором («Активный» или «Скрытый»).

Параметры ввода и рендера

  • this.renderImage — вывод изображения;
  • this.renderCrossTick — значки галочка\крестик для boolean полей;
  • this.renderClickCrossTick — значки галочка\крестик для boolean полей с возможностью изменения значения кликом (поддерживается для MIGXdb);
  • this.renderSwitchStatusOptions — изменение статуса кликом по полю (настраивается через Renderoptions);
  • this.renderChunk — можно указать чанк, который будет выводиться для этого поля;
  • this.renderDate — вывод даты.

Типы ввода / полей (inputTVtype)

  • autotag -Авто-метка;
  • text — Текст;
  • textarea — Текстовая область;
  • textareamini — Текстовая область (мини);
  • richtext — Текстовый редактор;
  • dropdown — Выпадающий список;
  • listbox — Список (одиночный выбор);
  • listbox-multiple — Список (множественный выбор);
  • list-multiple-legacy — Устаревший список множественного выбора;
  • option — Переключатели (radio);
  • checkbox — Флажки (checkbox);
  • image — Изображение;
  • file — Файл;
  • url — URL;
  • email — Электронная почта;
  • number — Число;
  • date — Дата;
  • tag — Тег;

Рендеры (Renderer)

  • this.renderImage — вывод изображения;
  • this.renderCrossTick — значки галочка\крестик для boolean полей;
  • this.renderClickCrossTick — значки галочка\крестик для boolean полей с возможностью изменения значения кликом (поддерживается для MIGXdb);
  • this.renderSwitchStatusOptions — изменение статуса кликом по полю (настраивается через Renderoptions)
  • this.renderChunk — можно указать чанк, который будет выводиться для этого поля
  • this.renderDate — используется для вывода даты

Плейсхолдеры getImageList

  • [[+fieldname]] — любое поле из конфигурации MIGX или из переданных параметров в сниппет
  • [[+idx]] — порядковый номер, начиная с 1
  • [[+_first]] — вернет 1, если это первая запись
  • [[+_last]] — вернет 1, если это последняя запись
  • [[+_alt]] — вернет 1, если это четная запись
  • [[+total]] — общее число элементов (можно изменить через &totalVar)
  • [[+property.name]] — выведет параметр с именем &name= в вызове getImageList.

Параметры getImageList

  • &tvname — название TV с типом ввода MIGX
  • &tpl — имя чанка для вывода каждой записи. Можно использовать @CODE:, @FILE:, @FIELD
  • &docid — можно указать ID документа, чей TV надо обработать. По умолчанию: [[*id]]
  • &value — JSON строка для обработки getImageList. Если указан, параметры &docid и &tvname будут проигнорированы. Можно использовать для вывода в getImageList еще одного вызова getImageList
  • &limit — количество записей для вывода. По умолчанию: 0
  • &offset — количество записей, которые необходимо пропустить. По умолчанию: 0
  • &totalVar — имя плейсхолдера, в котором содержится общее количество записей. По умолчанию: total
  • &randomize — если установить 1, результаты будут отсортированы в случайном порядке. По умолчанию: 0
  • &preselectLimit — вместе с параметров &randomize можно указать число записей, которые выведутся в любом случае. По умолчанию: 5
  • &where — JSON строка с условиями выборки, например: {«active:=»:«1»,«rating:>»:«5»}
  • &sort — JSON строка с условиями сортировки. Можно указывать несколько параметров: [{«sortby»:«age»,«sortdir»:«DESC»,«sortmode»:«numeric»},{«sortby»:«name»,«sortdir»:«ASC»}]
  • &toPlaceholder — сохранить вывод в плейсхолдер
  • &toSeparatePlaceholders — сохранить каждую запись в отдельный плейсхолдер.
  • &outputSeparator — разделитель между результатами
  • &wrapperTpl — чанк-обертка для вывода результатов. Принимает плейсхолдер [[+output]] для вывода результатов
  • &processTVs — включить режим обработки вывода TV параметров (для полей с inputTV). По умолчанию: 1

Посадка блоков на MIGX

Давайте посадим наш первый экран на MIGX (секцию hero):

Первый экран

Данный блок состоит из следующих полей: заголовок, подзаголовок, кнопка и изображение. Создадим их.

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

Чтобы создать конфигурацию для ТВ MIGX, нужно зайти в Пакеты -> MIGX и на вкладке MIGX нажать на Добавить элемент.

Добавляем элемент в MIGX

Переходим в MIGX и добавляем элемент

Откроется новое окно со множеством вкладок. В первой вкладке Settings, заполняем Name на английском (в будущем это будет название конфигурации для ТВ), а в поле Замена «Добавить элемент» пишем Заполнить блок (или добавить). Далее переходим во вкладку Formtabs.

создание конфигурации MIGX - вкладка Settings

На вкладке Formtabs, жмем по кнопке «Добавить элемент». Всплывет еще окно, в нем снова нажимаем по кнопке «Добавить элемент». И уже в 3м окне получается добавляем наше первое поле. Заполняем Fieldname — название поля на английском, Caption — название поля на русском, Description — при желании можно описать блок. Для обычного текстового блока достаточно заполнить Fieldname и Caption после чего можно жать по кнопке «Сохранить и закрыть».

создание конфигурации MIGX - вкладка formtabs

Третье окошко закроется, при этом второе останется и в нем вы увидите только что созданное поле. Жмем по кнопке «Добавить элемент» и добавляем еще одно обычное текстовое поле.

Создание второго поля конфигурации MIGX

Затем создаем таким же образом создаем 3е поле: name_buttons (Название кнопки), 4-е: link (Ссылка) и 5-е: image (Изображение) с imput Tv type = image.

Создание пятого поля конфигурации MIGX с типом ввода image

В конечном итоге получаем 5 полей, жмем «Сохранить и закрыть».

5 созданных полей

В filds они поместятся в 1 id — отредактировать их можно нажав правой кнопкой мыши и выбрать редактирование (появиться окно которое только закрыли), переходим на вкладку Columns.

Переходим во вкладку Columns

На данной вкладке мы получается делаем разметку колонок — то что вы будите видеть после заполнения созданных полей. Сюда нам нужно перенести либо все поля, либо их часть (в любой последовательности). Для этого жмем по кнопке «Добавить элемент». В сплывающем окне заполняем:

  • header — обычно равен Caption (ранее созданного поля)
  • Field — равен Fieldname (ранее созданного поля)
  • Column width — по желанию, можно указать ширину колонки, например поставить 50
  • renderer — для полей у которых есть рендеры (см. выше), указываем его, в данном случае нужно указать только для поля изображения = this.renderImage.

Сохранить и закрыть.

создание колонки для ссылки

Потом снова «Добавить элемент». Покажу колонку с рендерем.

добавляем колонку для поля image

Указываем рендер

Так создаем нужные колонки, после чего охраняем и закрываем.

Созданные колонки

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

С конфигурацию и ее разметку колонок создали. К стати ее всегда можно отредактировать (добавить поля, удалить поля, колонки, перемещать их последовательность и т.п.). Для этого щелкните правой кнопкой мыши по названию конфигурации, далее выберите редактировать, щелкаете ПКМ еще почему нужно — редактировать. Идем дальше.

Создание MIGX TV

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

Создание TV

На вкладке Параметры ввода, в поле «Тип ввода» выбираем migx и прописываем название созданной ранее конфигурации.

Указываем тип ввода и название конфигурации

Далее идете на вкладку «Доступно для шаблонов», выбираете главный шаблон (он пока 1), ну и можете указать источник файлов (img — есть нюансы, о них ниже) и сохраняем.

Заполняем созданное TV с конфигурацией MIGX

Переходим в ресурс с указанным шаблоном, переходим во вкладку «Дополнительные поля», заполняем наше мултиполе и сохраняем ресурс.

Заполняем блок

В дальнейшем можно редактировать поля, нажав правой кнопкой мыши в любое место сетки (колонок) и выбрать Редактировать.

Сетка Migx и редактирование данных в ней

Осталось лишь вывести его (заменить статический код на динамический).

Вывод поля MIGX в шаблоне

У нас код данной секции сейчас выглядит так (отметил на нем что нужно разметить):

Hero section

Нам в эти места нужно прописать поля в таком формате: [[+name_polya]], должен получится такой код:

<section id="hero" class="hero d-flex align-items-center">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 d-flex flex-column justify-content-center">
          <h1 data-aos="fade-up">[[+h1]]</h1>
          <h2 data-aos="fade-up" data-aos-delay="400">[[+h2]]</h2>
          <div data-aos="fade-up" data-aos-delay="600">
            <div class="text-center text-lg-start">
              <a href="[[+link]]" class="btn-get-started scrollto d-inline-flex align-items-center justify-content-center align-self-center">
                <span>[[+name_buttons]]</span>
                <i class="bi bi-arrow-right"></i>
              </a>
            </div>
          </div>
        </div>
        <div class="col-lg-6 hero-img" data-aos="zoom-out" data-aos-delay="200">
          <img src="[[+image]]" class="img-fluid" alt="[[+h1]]">
        </div>
      </div>
    </div>
</section>

Весь этот код вырезаем в отдельный чанк, пусть будет называться как и TV: hero, соответственно сохраняем данный чанк. А на месте этого кода пишем вот такую конструкцию:

[[getImageList? &tvname=`hero` &tpl=`hero`]]

где tvname название ТВ в MIGX, а tpl — чанк с разметкой кода с выводом TV.

Если вы пошли по пути разработки на шаблонизаторе fenom, то упрощённый вызов будет таким:

{set $rows = json_decode($_modx->resource.hero, true)}
{foreach $rows as $row}
    и здесь весь код блока размеченный полями вот так: {$row.h1} {$row.h2} {$row.link} {$row.name_buttons} {$row.image}
{/foreach}

Код чанка с выводом полей на fenom

При таком подходе можно не создавать лишних чанков. В конечном итоге у вас должен измениться контент в заполненном блоке.

Первый экран сайта

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

Фикс путей до изображений при использовании источников файлов.

Первый путь, это зайти в созданное TV поле, и во вкладке Источник файлов, указать Filesystem, сохранить TV. Затем получается перезаполнить поле с изображением (при редактировании ресурса).

Второй путь, добавить в чанк путь источника перед изображением:

access/img/{$row.image}

Для информации, прям точно также сажается

Такой же набор полей (только 2 заголовка),

Дополнительная информация

Быстрое создание однотипных конфигураций

К примеру следующий следующий блок в шаблоне:

Блок 2

сажается как и первый, и у него прям такой же набор полей (+ 1 доп поле). Чтобы не бегать по вкладкам и не создавать каждое поле руками, можно создать новую пустую конфигурацию с именем секции.

Создание пустой конфигурации MIGX

После этого из нужной готовой конфигурации копируем поля, для этого нажимаем по ней правой кнопкой мыши и выбираем пункт «Экспорт/Импорт». Всплывет окошко в котором вы увидите Json код, выделяем и копируем его, закрываем.

Экспорт и импорт кода

Теперь так же щелкаем по пустой конфигурации — «Экспорт/Импорт», в сплывающем окне удаляем весь Json и на его место вставляем только что скопированный, сохраняем и закрываем.

Импортируем поля

Готово, все добавлено, мы с экономили пару минут)).

Конфигурация перенесена

Обрезка изображений

К примеру требуется резать изображения до определенного размера при помощи сниппета pthumb, тогда в вызов нужно добавлять такую конструкцию.

{foreach $rows as $row} 
{set $thumb = $_modx->runSnippet('!pthumb', [
'input' => 'img/' ~ $id ~ '/' ~ $row.image,
'options' => 'w=373&h=230&zc=1&q=71'
])}
<img src="{$thumb}"><p>{$row.description}</p> 
{/foreach}

Вывод TV поля MIGX одного ресурса на другом

Часто на сайтах есть сквозные блоки, которые выводятся на многих страницах, чтобы не заполнять одно и тоже на разных ресурсах, можно вывести заполненные поля с одного ресурса на другом, для этого добавьте в вызов параметр docid — id ресурса где заполнено поле.

[[getImageList? &docid=`1` &tvname=`hero` &tpl=`hero`]]

вывод при помощи fenom:

{set $rows = 1 | resource : 'hero' | fromJSON}
{foreach $rows as $row} 
поля {$row.image} {$row.h1} и т.д.
{/foreach}

Сортировка в getImageList в обратном порядке

Иногда нужно вывести результаты в обратном порядке. А всеми известного параметра sortdir в MIGX нет. Но зато есть параметр reverse, который позволяет изменить порядок вывода элементов на обратный относительно того, как они забиты в админке. Пример:

[[getImageList? &tvname=`hero` &reverse=`1` &tpl=`hero`]]

Заключение

Сейчас мы разобрали всю документацию по MIGX и все основные моменты с которыми можете столкнутся. Произвели натяжку довольно простого блока, по факту мы можем посадить как минимум половину блоков на главной или вообще все если у вас одностаничник.

В следующем уроке, покажу как сажать сложные блоки на MIGX (Input TV type — migx и Configs название конфигурации) и затем покажу как можно сделать на базе MIGX редактор блоков (Migx внутри Migx). В общем чем дальше тем интереснее.

Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( 8 оценок, среднее 4.88 из 5 )
Web-Revenue.ru
Добавить комментарий

  1. Александр

    Приветствую!
    Как сделать в MIGx публикацию фото, например, в слайдере, чтобы в админке просто выключить или включить. Добавляю поле listbox, ставлю рендер this.renderSwitchStatusOptions, onClick switchOption, а где поставить публиковать или нет, то есть выключить из подборки временно?

    Ответить
    1. Алексей автор

      Привет. Скорее всего примерно так: в чанке вывода будет условие [[+listbox:is=`1`:then=`код`]] — если отмечена галка, то выводим какой то код, если нет, то нет)

      Ответить
  2. Юрий

    Здравствуйте! Если можете, подскажите, пожалуйста, как вывести элементы поля MIGX в обратном порядке, если использовать способ вывода через Fenom и foreach?
    Дело в том, что сделал поле MIGX для добавления отзывов. В таблицу новый отзыв добавляется в конце. А на сайте нужно выводить отзывы так, чтобы на первой позиции отображался более свежий отзыв. Т.е. нужно делать вывод в обратном порядке.

    Ответить
    1. Алексей автор

      Здравствуйте. Обновил статью — ответ в ней как сделать при условии что вывод обычный. С помощью json пока не подскажу — не под руками сайтов на Fenom)

      Ответить
  3. Юрий

    Очень прощу помочь! Вопрос касается этого «Если вы используете источник файлов не по умолчанию, то картинки у вас не выведутся». Моя ситуация, видимо, похожа. Сделал дополнительное поле с простой картинкой (не MIGX), для которой использую источник не по-умолчанию. Пытаюсь вывести с помощью pdoResources ресурсы с этой картинкой, у которой источник не по-умолчанию, но ничего не получается. В чанке вывода ресурса не пойму, как правильно вручную указать путь до источника. Если делаю для поля картинки источник по умолчанию, то все работает…
    А источник для картинки делал такой, при котором для ресурса автоматически создается папка с именем идентичным айдишнику ресурса, для хранения файлов. Наверное, вы знаете про данный способ создания источника файлов

    Ответить
    1. Алексей автор

      Здравствуйте. С pdoResources нет проблем с путями до источника файлов, хотя может быть такая проблема, если нет тега base, то картинки будут иметь скорее всего нерабочий путь, решение прописать тег base, либо указывать параметр при вызове pdoResources &scheme=`full`. В общем смотрите какой путь формируется, а от туда уже и решение найдется

      Ответить