MODx Revo, использование MIGX в проектах на примере слайдера

MODx Revo, использование MIGX в проектах на примере слайдера

MIGX в MODx Revo достаточно мощный компонент, который позволяется реализовывать мульти-TV поля. Мало кто использует весь его функционал на все 100%. В данной статье мы с вами рассмотрим использование MIGX для создания TV.

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

MODX Revo - MIGX TV

Итак, нам будут нужны следующие поля:

  • Изображение
  • Текстовый редактор

Что ж приступим к созданию TV-параметра. Зададим ему имя – mainslider. По сути это будет его UID, по которому мы будем получать доступ к значениям параметра. Зададим подпись – “Слайдер изображений”, которая будет выводиться на странице редактирования ресурса. Так же вы можете задать поле описание, если в заполнении данного TV-параметра есть какие-то нюансы. Обычно я задаю описание для изображений: например, какие должны быть пропорции сторон или может нужно изображение определенного размера. Также я задам категорию для нашего TV, чтобы на странице редактирования ресурса поле ввода значений было на отдельной вкладке.

MODX Revo - MIGX TV

Далее начнется самое интересное. Задаем параметры ввода TV – migx, у нас обновятся поля и нам нужно заполнить следующее:

  • Вкладки формы
  • Разметка колонок

Вкладки формы.

Вкладки формы – это по сути поля в форме редактирования значений TV-поля и задаются они в форма JSON. В нашем случае, будет примерно так:


[{"caption":"Изображение", "fields": [
    {"field":"description","caption":"Описание","inputTVtype":"richtext"}, 
    {"field":"image","caption":"Изображение","inputTVtype":"image"}
  ]
}]

Я думаю, что не буду здесь рассказывать конкретно про формат JSON, в интернете достаточно много информации об этом. А остановлюсь я конкретно на допустимых парах свойство-значение. Итак, как видно, в массиве fields у нас содержатся поля для заполнения:

  • Field – это уникальное имя поля (если грубо, это аналог атрибута name у input или textarea)
  • Caption – это подпись поля
  • inputTVtype – это тип TV-параметра, в нашем случае richtext – это текстовый редактор, а image – изображение

Какие же еще бывают inputTVtype? Чтобы ответить на данный вопрос, нужно обратиться к документации MODx Revo:

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

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


“inputTVtype”:”option”,”inputOptionValues”:”ДА==1||Нет==0”

Также в качестве типа ввода можно указывать другой TV-параметр с помощью парметра inputTV вместо inputTVtype. Это бывает полезно для TV типа MIGX в MIGX.

Кроме того, для каждого поля вы можете указать описание как у TV с помощью параметра description.

Разметка колонок.

Разметка колонок – это обычная таблица, в которую вы можете вывести либо отдельный поля, либо все целиком. Заполняется она также в формате JSON, в нашем случае код будет следующий:


[{
  "header": "Описание", "sortable": "true", "dataIndex": "description"
},{
  "header": "Изображение", "sortable": "false", "dataIndex": "image","renderer": "this.renderImage"
}]

Давайте поясню, что значат эти параметры:

  • Header – заголовок в шапке таблицы
  • Sortable – возможность сортировки таблицы по данному столбцу
  • Dataindex – значение должно соответствовать полю Field во вкладках формы
  • Renderer – обработчик значение для вывода в таблице

Renderer можно задать и свой, но это уже отдельная статья. Стандартные обработчики:

  • this.renderImage
  • this.renderImageFromHtml
  • this.renderPlaceholder
  • this.renderFirst
  • this.renderLimited
  • this.renderCrossTick
  • this.renderClickCrossTick
  • this.renderSwitchStatusOptions
  • this.renderPositionSelector
  • this.renderRowActions
  • this.renderChunk
  • ImagePlus.MIGX_Renderer
  • this.renderDate
  • this.renderOptionSelector

Далее у нашего TV-параметра задаем параметры вывода – по умолчанию, доступно для шаблонов – указываем шаблон для ресурсов, в которых мы будем заполнять значения и сохраняем. На вкладке “Дополнительные поля” ресурса увидим следующую картину:

MODX Revo - MIGX TV

Если кликнем по кнопке “Добавить элемент”, то увидим модальное окно для заполнения данных:

MODX Revo - MIGX TV

После заполнения данных:

MODX Revo - MIGX TV

Вывод TV-параметра MIGX

Если мы будем выводить наш TV-параметр стандартными способами, то увидим, что значение является также в формате JSON:


[{"MIGX_id":"1","description":"<p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>","Изображение":"/assets/templates/clp/img/slide.jpg"},
{"MIGX_id":"2","description":"<p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>","Изображение":"assets/templates/clp/img/slide.jpg"},
{"MIGX_id":"3","description":"<p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>","Изображение":"assets/templates/clp/img/slide.jpg"}]

Поэтому нам нужно произвести рендеринг. Чтобы это сделать мы можем написать свой сниппет (parseJSON), например, такой:


$input = $modx->fromJSON($input);
$output = array();
if (!$input || empty($tpl)) return 'no stuff';
foreach ($input as $row) {
  $output[] = $modx->getChunk($tpl, $row);
}
return implode("\n", $output);

В данном коде мы преобразуем строку JSON в ассоциативный массив и передаем каждый элемент в функцию getChunk, которая формирует нам готовый HTML-код. Как вы, наверно, уже догадались данный сниппет нужно вызывать с двумя параметрами (input и tpl):


[[parseJSON? &input=`[[*mainslider]]` &tpl=`sliderTpl`]]

Чанк, в моем случае, будет следующий:


<div class="item">
<img src="[[+image]]" alt="">
	<div class="text">
		[[+description]]
	 </div>
</div>

В данном чанке плейсхолдеры image и description – это соответственно те поля, которые мы заполняли во вкладках формы (параметр field).

В комплекте с компонентом MIGX также идет сниппет getImageList, который также можно использовать для вывода MIGX TV.

В моем случае, это будет выглядеть примерно так:


[[getImageList?
&tvname=`mainslider`
&tpl=`sliderTpl`
]]

Что означают эти параметры, я думаю, ясно. Если вы используете сниппет getImageList в вызовах pdoResources или аналогичных сниппетов, то вам понадобится параметр docid, с помощью которого вы указываете с какого именно ресурса мы будем брать TV:


[[getImageList?
&tvname=`mainslider`
&tpl=`sliderTpl`
&docid=`[[+id]]`
]]

Вот, собственно, и все. А от себя мне хотелось бы пожелать вам удачи во всех начинаниях!

Оцените статью:

Проголосовало: 43

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