Слайдер через MIGX и источник файлов для MIGX

С помощью MIGX можно создавать TV любого назначения. Для построения формы инпута и таблицы-превью заполненных полей используются правила в JSON-формате (сниппет сохраняет значение поля для ячейки в БД тоже в JSON).

Создание слайдера на MIGX

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

  • Заголовок
  • Описание
  • Ссылка
  • Изображение
  • Статус (активный/неактивный)

И так, создаем TV с именем, например "home_slider". Указываем тип "MIGX" (пакет MIGX должен быть уже установлен).

Далее настраиваем параметры.

Создание слайдера на MIGX

Вкладки формы — это форма добавления одного элемента слайдера (одного слайда) в админке:

[{
"caption": "Слайд",
"fields": [{
"field": "title",
"caption": "Заголовок"
},{
"field": "description",
"caption": "Описание",
"inputTVtype": "textarea"
},{
"field": "link",
"caption": "Ссылка"
},{
"field": "image",
"caption": "Изображение",
"inputTVtype": "image"
},{
"field": "active",
"caption": "Отображать на сайте?",
"inputTVtype": "listbox",
"inputOptionValues": "Да==1||Нет==0"
}]
}]

Здесь доступны интересные параметры:

inputTVtype — позволяет задать тип инпута согласно фреймворку ExtJS, на котором построена вся админка MODX, правда MIGX понимает не все типы.
inputTV — можно указать уже существующий TV инпут в качестве поля (нельзя использовать TV, уже используемый на странице). К примеру, можно указывать другие кастомные TV в связке с MIGX, например — https://modstore.pro/packages/photos-and-files/fastuploadtv.
inputOptionValues — это возможные типы TV, список доступных типов:

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

Смотри подробнее про вкладки формы в документации — https://docs.modx.com/extras/revo/migx/migx.backend-usage#MIGX.Backend-Usage-Step2.1FormTabs

Разметка колонок — это отображение TV полей MIGX в админке ресурса:

[{
"dataIndex": "title",
"header": "Заголовок",
"sortable": "true",
"width": "200"
},{
"dataIndex": "description",
"header": "Описание",
"sortable": "true",
"width": "200"
},{
"dataIndex": "link",
"header": "Ссылка",
"sortable": "false",
"width": "200"
},{
"dataIndex": "image",
"header": "Изображение",
"sortable": "false",
"renderer": "this.renderImage",
"width": "200"
},{
"dataIndex": "active",
"header": "Отображать на сайте?",
"sortable": "false",
"width": "200"
}]

Смотри подробнее про разметку колонок в документации — https://docs.modx.com/extras/revo/migx/migx.backend-usage#MIGX.Backend-Usage-Step2.2GridColumns

Вывод слайдера на сайте

На сайте слайдер выводится при помощи встроенного в MIGX сниппета getImageList:

[[getImageList?
&docid=`[[*id]]`
&limit=`6`
&tvname=`page_slider`
&where=`{"active":"1"}`
&tpl=`@CODE: <li><img src="[[+image]]" alt="[[+title]]"/><p>[[+description]]</p></li>`
]]

Все доступные параметры сниппета getImageList можно посмотреть в документации — https://docs.modx.com/extras/revo/migx/migx.frontend-usage#MIGX.Frontend-Usage-Properties.

Источник файлов для MIGX

Есть 2 рабочих способа задать источник файлов для MIGX:

1. Привязываем источник файлов к обычному TV и указываем эту TV во вкладке форм MIGX через inputTV (самый простой и работающий метод).
Например, мы создаем обычную TV с типом ввода "image", назвали ее "image_source", затем привязываем к ней нужный источник файлов и указываем ее в MIGX во вкладке формы (причем эту TV "image_source" можно не привязывать к шаблону, чтобы не нагромождать админку ресурса, MIGX в любом случае ее увидит).
Для нашего поля "Изображение" в MIGX будет следующее:

{
"field": "image",
"caption": "Изображение",
"inputTV": "image_source"
}

2. Указываем id источника файлов (пусть у нас он 5) для нужного поля в MIGX (в нашем случае это Изображение) через "sourceid".
Во вкладке формы для поля "Изображение" будет следующее:

{
"field": "image",
"caption": "Изображение",
"inputTVtype": "image",
"sourceFrom":"config",
"sources":"[{\"MIGX_id\":\"1\",\"context\":\"web\",\"sourceid\":\"5\"}]"
}

Проверка MIGX (getImageList) на пустоту

Бывает задача, когда getImageList нужно вывести в блок со стилями (отступы, заголовки, рамки, фон и т.п.) и если блок не заполнен, то полностью скрывать блок. Так как же проверить заполненность TV, если в TV с типом MIGX всегда пишется значение json-разметки, т.е. простым модификаторм :notempty=`` не проверить?

Выход прост - проверяем вывод самого getImageList через плейсхолдер [[+output]] в чанке-обертке и указываем чанк через параметр &wrapperTpl для getImageList.

Т.е. код вывода будет таким:

[[getImageList?
&docid=`[[*id]]`
&limit=`6`
&tvname=`page_slider`
&where=`{"active":"1"}`
&tpl=`@CODE: <li><img src="[[+image]]" alt="[[+title]]"/><p>[[+description]]</p></li>`
&wrapperTpl=`page_slider_wrapp`
]]

А сам чанк page_slider_wrapp в &wrapperTpl будет таким:

<div class="slider_wrapp">
<h3>Заголовок перед слайдером</h3>
[[+output]]
</div>

p.s. Кстати, плейсхолдер [[+output]] также применяется и во многих других сниппетах MODX (подробнее смотрите документацию конкретного сниппета).


Свяжитесь с нами

Нажимая на кнопку «Отправить», я даю свое согласие на обработку персональных данных в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006 и принимаю условия Пользовательского соглашения