Контактная информация

По всем интересующим вас вопросам связывайтесь при помощи контактной информации приведенной на этой странице!

telegram: @Accusser
skype: metsof
email: accusser@gmail.com

В социальных сетях...

Форма обратной связи

Авторизация

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

Сайдбар

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

06 июля 2018

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, в помощь придет такой сниппет:

[[*banner:migxitem=`1`]]
$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 в параметре:

[[*banner:migxitem=`1&tpl=tpl.Item`]]
$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\"}]"
    }
  ]
}]


Смотрите также:

MODX Дополнение Asset Manager MODX Revolution

Asset Manager MODX Revolution

Смотреть

MODX Quickstart Buttons Кнопки Быстрого Запуска MODX Revolution

Quickstart Buttons

Смотреть








Комментарии ()


    Услуги по MODX Revolution

    Посмотреть все услуги

    Оптимизация сайта

    Подробнее & Заказать

    Создание сайта на MODX Revolution

    Подробнее & Заказать

    Перенос сайта на MODX Revolution

    Подробнее & Заказать

    Продвижение сайта на MODX

    Подробнее & Заказать