Все для создания и продвижения сайтов

Верстка, программирование, SEO

MIGX в MODX Revo: создания сложных TV-полей через json (пример)

Порой бывает недостаточно простых TV-полей для решения конкретных задач. К примеру, нам нужно создать слайдер, в котором каждый слайд содержит картинку, заголовок и подзаголовок (Да и вообще может содержать ещё больше разных полей).

MIGX в MODX Revo: создания сложных TV-полей через json (пример)

То есть у одного слайда три поля и самих слайдов может быть сколько угодно.

Для решения этих задач будем использовать компонент 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 в MODX Revo: создания сложных TV-полей через json (пример)

Вывод 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"}
Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.