MIGX в MODX Revo: создания сложных TV-полей через json (пример)
Порой бывает недостаточно простых TV-полей для решения конкретных задач. К примеру, нам нужно создать слайдер, в котором каждый слайд содержит картинку, заголовок и подзаголовок (Да и вообще может содержать ещё больше разных полей).
То есть у одного слайда три поля и самих слайдов может быть сколько угодно.
Для решения этих задач будем использовать компонент MIGX, который позволяет создавать сложные TV-поля в Json формате.
Для начала загрузите и установите этот компонент через «Установщик» в админке сайта.
Создайте новое TV-поля типа «Migx»
Появятся дополнительные вкладки. Заполняем их.
Вкладки формы:
[{"caption":"Image", "fields":
[
{"field":"set","caption":"Заголовок"},
{"field":"description","caption":"Описание"},
{"field":"image","caption":"Изображение","inputTVtype":"image"}
]
}]
Разметка колонок:
[
{"header": "Заголовок", "sortable": "true", "dataIndex": "set"},
{"header": "Подзаголовок", "sortable": "true", "dataIndex": "description"},
{"header": "Изображение", "sortable": "false", "dataIndex": "image","renderer": "this.renderImage"}
]
Возможные значение inputTVtype
:
- text - простое текстовое поле
- textarea - мультистрочное текстовое поле
- richtext - текстовый редактор
- image - изображение
- checkbox - чекбоксы
- option - radio кнопки
- listbox - список (одиночный выбор)
Вывод MIGX через сниппет getImageList
Данный сниппет идёт в сборке с MIGX.
В «&tvname» мы указываем имя TV, а в &tpl
Шаблон вывода (чанк).
Затем создали пару слайдов. Далее остаётся вывести наш слайдер. Для этого используем сниппет компонента MIGX «getImageList».
[[!getImageList?
&tvname=`slider_main`
&tpl=`@CODE:
<li>
<h2>[[+set]]</h2>
<h3>[[+description]]</h3>
<img src="[[+image]]" />
</li>`
]]
Вывод MIGX через Fenom
Для тех, кто использует Fenom не нужны никакие сниппеты, выводим так:
{set $rows = json_decode($_modx->resource.slider_main, true)}
{foreach $rows as $row}
<h2>{$row.set}</h2>
<h3>{$row.description}</h3>
<img src="{$row.image}" />
{/foreach}
Пояснение: по сути TV с типом MIGX это json-поле, через Fenom мы можем преобразовать его в массив и вывести в цикле, без всяких сниппетов.
Мой пример вызова для слайдера с обрезкой изображений
По этому примеру проще всего понять, как лучше выводить слайдер, при этом у каждой картинки есть описание и ссылка. При этом изображение обрезается, чтобы картинки не "плясали", для обрезки я использую компонент pthump.
{if $_modx->resource.slider_main}
<section id="slidermain">
<ul>
{set $rows = json_decode($_modx->resource.slider_main, true)}
{foreach $rows as $row}
<li>
{if $row.link}<a href="{$row.link}"/>{/if}
{set $image = $_modx->runSnippet('!pthumb', [
'input' => $row.image,
'options' => 'h=300&w=600&zc=C',
])}
<img src="{$image}" style="width: 100%" title="{$row.title}" />
{if $row.link}</a>{/if}
</li>
{/foreach}
</ul>
</section>
{/if}
Источник файлов для картинок
Если вам нужно, чтобы поле "изображение (image)" имел источник файлов не Filesystem, а другой, то прописываем в json-параметр sourse, дя этого поля.
[{"caption":"Image", "fields":
[
{"field":"image","caption":"Изображение","inputTVtype":"image","sources":"[{\"MIGX_id\":\"1\",\"context\":\"web\",\"sourceid\":\"4\"}]"}
]
}]
Где в sourceid указываем id нужного источника файлов.
Вы можете добавлять сколько угодно полей и причем разного типа. Полная официальная документация компонента здесь.
Примеры полей
Чекбокс (активность)
// Вкладки формы
{"field":"active", "caption":"Активен", "inputTVtype":"checkbox", "inputOptionValues":"Да==1","default":"1"}
// Разметка колонок
{"header": "Активен", "dataIndex":"active", "show_in_grid":1, "renderer":"this.renderCrossTick"}
Select (Выбор из списка)
// Вкладки формы
{"field":"filter","caption":"Фильтр","inputTVtype":"listbox","inputOptionValues":"первый==1||втоорой==2||третий==3"}
// Разметка колонок
{"header": "Фильтр", "sortable": "true", "dataIndex": "filter"}
Оставить комментарий