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

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

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

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

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

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

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

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

[{
  "caption": "Item",
  "fields": [{
    "field": "title",
    "caption": "Title"
  }, {
    "field": "description",
    "caption": "Description",
    "inputTVtype": "textarea"
  }, {
    "field": "link",
    "caption": "Link"
  }, {
    "field": "image",
    "caption": "Image",
    "inputTVtype": "image"
  }, {
    "field": "active",
    "caption": "Active?",
    "inputTVtype": "listbox",
    "inputOptionValues": "Yes==1||No==0"
  }]
}]

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

inputTV - можно указать уже существующий TV инпут (нельзя использовать TV, уже используемый на странице) в качестве поля (устаревший параметр), вместо него разработчик рекомендует использовать inputTVtype, который позволяет задать тип инпута согласно фреймворку ExtJS, на котором построена вся админка MODX. Правда MIGX понимает, пока что, не все типы.

inputOptionValues - это возможные значения TV.

Список доступных типов для актуальной версии MIGX:

{"inputTVtype":"text", //текст
"inputTVtype":"textarea", // текстовое поле
"inputTVtype":"richtext", // редактор текста
"inputTVtype":"image", // изображение
"inputTVtype":"option","inputOptionValues":"1==1||2==2", // радио
"inputTVtype":"listbox","inputOptionValues":"1==1||2==2" // селект}

Разметка колонок - это превью для заполненных полей, которое будет отображаться во вкладке "Дополнительные поля" ресурса.

[{
  "header": "Title",
  "sortable": "true",
  "dataIndex": "title"
}, {
  "header": "Description",
  "sortable": "true",
  "dataIndex": "description"
}, {
  "header": "Link",
  "sortable": "false",
  "dataIndex": "link"
}, {
  "header": "Image",
  "sortable": "false",
  "dataIndex": "image",
  "renderer": "this.renderImage"
}, {
  "header": "Active?",
  "sortable": "false",
  "dataIndex": "active"
}]

Вывести наш слайдер можно встроенным сниппетом getImageList:

[ [!getImageList? 
  &tvname=`slider`
  &limit=`6`
  &docid=`[[+id]]`
  &tpl=`@CODE: <li><img src="[[+image]]" alt="[[+title]]"><p>[[+description]]</p></li>`
]]

Показываем только активные слайды:

[ [!getImageList? 
  &tvname=`slider`
  &where=`{"active":"1"}`
  &tpl=`@CODE: <li><img src="[[+image]]" alt="[[+title]]"><p>[[+description]]</p></li>`
]]

В некоторых задачах удобнее написать свой парсер, все что нужно - разобрать json -строку, которую содержит TV c типом "migx".

Модификатор для единичного вывода элементов

Если стоит задача выводить шаблонный блок на разных участках страницы, или просто вывести один из набора элементов тв-инпута типа MIGX, в помощь придет такой сниппет:

$tpl = 'tpl.ParallaxBanner';
if (isset($options)){
  $key = intval($options) - 1;
}else{
  $key = 0;
}
$data = $modx->fromJSON($input);
$data = $data[$key];
$output = $modx->getChunk($tpl,$data);
return $output;

tpl я указал внутри сниппета чтобы не засорять параметрамы вызов. Здесь мы выводим первый элемент из набора.

Более продвинутый вариант с передачей TPL в параметре:

$tpl = 'tpl.ParallaxBanner';
if (isset($options)){
  $options = explode('&tpl=',$options);
  $key = intval($options[0]) - 1;
  $tpl = $options[1];
}else{
  $key = 0;
}
$data = $modx->fromJSON($input);
$data = $data[$key];
$output = $modx->getChunk($tpl,$data);
return $output;

Задаем доступ к конкретному источнику файлов

Для источника с id "sourceid" конфигурация будет иметь вид:

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