Слайдер через 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":"richtext"
  • Изображение: "inputTVtype":"image"
  • Радио: "inputTVtype":"option","inputOptionValues":"1==1||2==2"
  • Селект: "inputTVtype":"listbox","inputOptionValues":"1==1||2==2"

Смотри подробнее про вкладки формы в документации — 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 во вкладке формы.
Для нашего поля "Изображение" в 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\"}]"
}


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

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