}
Зачем нам MIGX на сайте?
Если вам необходимо в каком-либо блоке на сайте вывести несколько элементов одного типа, не обязаетльно одинаковых по стилю, но очень схожих по своему назначению, то в большинстве случаев, для этих целей как нельзя лучше подходит бесплатный компонент MIGX, особенно, если вы заранее не знаете, сколько таких блоков-элементов будет на странице.
Помимо прочего данный компонент также позволяет добавлять и редактировать значения, хранимые в кастомных таблицах БД, но это выходит за рамки экспресс-руководства.
Первое, что пришло бы в голову: организовать такие элементы как набор заранее подготовленных TV (например, вы можете сделать заранее 20 TV для заголовков и 20 TV для описаний, но это крайне неоптимально и неудобно). Как раз, чтобы не заниматься такими глупостями, но при этом не тратить большое количество времени на создание дополнительных таблиц в БД и настройке админки, чтобы эти поля редактировать, был придуман MIGX с возможностью добавлять такого рода дополнительные поля:
Подготавливаем конфигурацию
После установки MIGX в админке появится новый одноименный пункт меню. Именно туда нам и нужно. На вкладке "MIGX" добавляем новую конфигурацию, нажав на "Добавить элемент".
Самое главное дальше, не испугаться такого количество вкладок и полей. Мы будем заполнять только необходимые и их не так много. Вкладки и поля, которые нам не пригодятся для примера выше, мы будем пропускать. Таким образом, у вас появится первый навык применения MIGX для простых списковых TV-полей. В дальнейшем вы сможете изучить MIGX более подробно для применения его в более сложных случаях.
Даем имя нашей конфигурации. Ее можно назвать произвольным образом. Главное, дайте ей осмысленное название, которое отражает ее назначение.
Добавляем поля всплывающего окна редактирования
На вкладке "Formtabs" мы можем настроить содержимое формы, которая будет открываться при добавлении нового элемента или редактировании существующего. Сначала мы добавляем вкладки формы (tabs), а затем на каждую вкладку добавляем поля.
Сначала добавляем новую вкладку:
Затем внутри новой вкладки добавляем поля один за одним, нажимая "добавить элемент":
В нашем случае нам требуется всего 2 поля:
- Для заголовка (поле типа text)
- Для описания (поле типа textarea–текстовая область или richtext–текстовый редактор)
Поле заголовка:
Если вы хотите добавить в окно редактирования значения поле, тип которого совпадает уже с каким-то ранее подготовленным дополнительным полем (TV), то вы можете использовать имя этого TV в поле Input TV. Например, у вас уже есть TV для ввода даты и времени под названием myDateTime, для этого вам достаточно будет в поле Input TV ввести "myDateTime" и нажать "Выполнено", оставив остальные поля пустыми.
В поле Input TV type вводится тип поля. Список типов можно посмотреть на странице документации modx.
После того, как мы выполнили добавление поля title, повторяем такую же процедуру для поля description, указав его тип как textarea или richtext
После этого считаем, что добавление полей для всплывающего окна добавления и редактирования записей мы завершили.
Теперь нужно определить, какие поля будут отображаться в таблице списка.
Добавляем колонки таблицы
В разделе "columns" настраиваются колонки таблицы, которые будут отображаться на месте TV в админке. Сюда добавляются, как правило, колонки, соответствующие полям из вкладки "Formtabs" и дополнительные колонки для прочих целей (например для вывода кнопок редактирования записи или отображающие какие-то сводные данные).
Нам необходимо добавить колонку для вывода поля title.
Если мы хотим иметь возможность редактировать значение прямо из таблицы, кликнув дважды на само значение, можно на вкладке Cell Editor указать тип редактора значений:
Аналогичную процедуру повторяем для поля description, указав в поле Field значение description. Затем, мы можем добавить для удобства еще одну колонку, в которой выведем три кнопки: Редактировать, Дублировать, Удалить.
Для этого добавляем еще одну колонку, задав ей заголовок "Действия", поле Field оставляем пустым, так как она не содержит никаких данных. А во вкладке "Renderer" нам необходимо выбрать функцию this.renderRowActions.
А для того, чтобы выбрать, какие именно действия необходимо отобразить в этой колонке, на вкладке Columnbuttons указываем те действия, которые хотим отобразить:
На этом можем считать, что наша первая конфигурация MIGX готова. Мы опустили рассмотрение многих полей, так как в данном кейсе они не используются, иначе бы данный мануал нельзя было назвать экспресс-руководством.
Сохраняем нашу конфигурацию и приступаем теперь непосредственно к созданию TV-поля.
Подробнее про MIGX
Кстати, почти такой же пример с подробным разъяснением способов его реализации я разбираю в курсе по созданию лендинга на MODx Revolution.
Добавление TV-поля
Здесь все максимально просто: вы создаете новое дополнительное поле точно так же, как делали это раньше, указав тип поля: migx, а в поле "Конфигурации" указав название нашей конфигурации, созданное на предыдущем этапе.
При этом стоит понимать, что название данного TV-поля и название конфигурации никак между собой технически не связаны. Поэтому они могут как одинаковыми, так и разными. Обычно, я создаю одну конфигурацию на одно TV-поле и названия даю им одинаковые, но вы вольны применять и другую концепцию.
Прицепив данное поле к соответствующему шаблону и сохранив его, вы увидите его теперь на вкладке дополнительных полей ресурса:
Отображение в шаблоне
Я применяю в своем коде синтаксис Fenom, в связи с этим представленный ниже код будет написан именно на нем.
При выводе значений из MIGX TV-полей стоит помнить, что данные таких полей хранятся в виде JSON-строки. Нам необходимо преобразовать эту строку в массив и затем в цикле вывести на странице, используя необходимые обрамления в виде html-тегов.
В моем случае, где требуется, чтобы первый элемент был выведен в увеличенном виде, а все последующие в виде одинаковых колонок, такой код мог бы выглядеть так:
MIGX представляет возможность вручную вставлять конфигурацию TV и каждого поля на форме редактирования в JSON-формате, но это всего лишь возможность, а не обязательное условие его использования
{var $elements = $_modx->resource.infoSectionElements | json_decode}
{if $elements}
{foreach $elements as $index => $element}
{if $index > 0}
{break}
{/if}
<section class="text-center" id="about">
<div class="container">
<div class="row">
<div class="col-md-10 col-lg-8">
<h2>{$element.title}</h2>
<p class="lead">
{$element.description}
</p>
</div>
</div>
</div>
</section>
{/foreach}
<section>
<div class="container">
<div class="row">
{foreach $elements as $index => $element}
{if $index == 0}
{continue}
{/if}
{if $index % 3 == 1 && $index > 3}
</div>
<div class="row">
{/if}
<div class="col-md-4">
<div class="feature">
<h4>{$element.title}</h4>
<p>
{$element.description}
</p>
</div>
</div>
{/foreach}
</div>
</div>
</section>
{/if}Все не так сложно
По итогу, для того, чтобы создать MIGX-поле, потребовалось совсем не много времени. Минимально необходимый набор действий заключается в:
- Настройке полей на форме, требуеющей на каждое поле несколько кликов и заполнение трех-четырех настроек
- Настройке колонок таблицы, требующей на каждое поле также несколько кликов и заполнения двух настроек
- Создании TV поля с указанием названия MIGX-конфигурации
Да, MIGX представляет возможность вручную вставлять конфигурацию TV и каждого поля на форме редактирования, но это всего лишь возможность, а не обязательное условие его использования. Так что, даже не разбираясь во всех тонкостях и возможностях MIGx вы можете успешно применять его на своих проектах.
Спасибо за внимание!
Вы должны авторизоваться, чтобы оставлять комментарии.