Modx карусель изображений на странице товара. Как создать слайдер в MODX Revolution с помощью MIGX TV? Elastislide – адаптивный слайдер — карусель

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

Требования:

  • MODX Revolution сайт.
  • Установлен MIGX пользовательский тип Переменных шаблона (через управление пакетов).
  • Слайдер или скрипт галереи, который бы мы хотели интегрировать. Я использовал FlexSlider студии WooThemes так как он подгоняет себя под ширину контейнера (что очень важно для отзывчивого дизайна!). Также он легко конфигурируем, поддерживает прокрутку на смартфонах и выглядит просто отлично без доработок.
  • Установленный сниппет phpthumbof через Менеджер пакетов для автообрезания изображений.
  • Какие-либо изображения!
Начинаем

В работе используется несколько частей. Вначале нужно установить MIGX TV и нам нужно взять эти данные из фронт-энда и заставить наш слайдер работать. Этот урок подразумевает использование FlexSlider, мы убедимся в том, что разметка – это то, что ему нужно, но также это должно быть очень легко адаптироваться под другие слайдеры.

Шаг 1: Установка MIGX TV для управления изображениями

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

  • Поле ввода для выбора изображения в файловой системе (или в 2.2 от ваших медиа источников).
  • Поле ввода текста для ввода подписи / тега / описания. FlexSlider отлично справляется с подписями, поэтому будем их и использовать.
  • Также я добавил ввод текста для "Set". Как мы позже увидим, я им воспользуюсь для бесконечного количества отдельных слайдеров, которые будут добавляться из любой точки ресурса..

Вы можете использовать другие поля, если хотите, но урок будет подразумевать именно те поля, которые я привёл выше.

Давайте перейдём к созданию TV. Вот слайдер с описанием изображений (для случая, если в миниизображении ничего не видно).

Создайте новую переменную шаблона во вкладке «Элементы» и дайте ей соответствующее название. Я назову её ws.images, если вы дадите ей своё название, то не забудьте заменить [[*ws.images]] на ваше название. Во вкладке Тип ввода (Input Options) выберите тип "migx" из выпадающего меню. Если вы не видите этот тип, то проверьте установили ли вы MIGX пакет через Управление дополнениями (Package Manager). Вы заметите, что несколько опций было добавлено внизу экрана, включая Вкладки формы (Form Tabs) и Разметка колонок (Grid Columns). Данное применимо к версии MODX >2.0, для более ранних версий рекомендую обновиться.

Обратите внимание: поля «Вкладки формы» (Form Tabs) и «Разметка колонок» (Grid Columns) должны быть заполнены корректными JSON строками. JSON – это в общем способ показа объектов, массивов или комбинаций ключ -> значение способом, который поддерживает почти любой язык программирования. Вот техническая спецификация и несколько примеров с официального сайта JSON.

Установка Вкладок формы

Форма позволяет использовать различные вкладки. Каждая вкладка имеет описание и несколько полей. Вы можете сделать много продвинутых вещей с этим, так как в большинстве случаев будете использовать одиночную вкладку, поэтому сейчас запомните просто на будущее. Вот JSON код для Вкладок формы (Form Tabs), который я использую:

[{"caption":"Image", "fields": [ {"field":"set","caption":"Set"}, {"field":"description","caption":"Description"}, {"field":"image","caption":"Image","inputTVtype":"image"} ] }]

Давайте пройдёмся по каждой строчке:

  • Первая – показывает открытие массива вкладок квадратной скобкой ([), и открывающийся объект вкладки фигурной скобкой ({). После этого мы определяем подпись (caption) поля Image. Обратите внимание, что нужно использовать двойные кавычки (" ") для свойств и их значений, одинарные могут привести к неожиданным результатам. Если у вас эти скобки попадутся в любых свойствах, значениях, экранируйте их слешем (\). После определения описания (caption) давайте продолжим и начнём определять массив «полей», открывая его квадратными скобками ([).
  • Мы определим наше первое поле как set. "field": “set”, значит, что мы хотим иметь в этом поле ввод обычного текста. “Caption”:”Set” – мы даём описание названия "set" – это будет название для ввода обычного текста. Далее дадим ему подпись "Set", которая будет показана в форме как метка поля.
  • Далее определим поле описания таким же образом
  • 4 строчка определяет изображение. Что здесь особенного – мы используем еще одну ТВ (с именем "image") как тип ввода. Это очень сильная особенность MIGX, которая позволяет вам использовать другие ТВ для построения вашей формы. В этом случае ТВ "image" очень проста: тип ввода – изображение, и в 2.2 вы можете назначать её к правильному медиа источнику. Вам не нужно связывать её с шаблонами как нужно делать в случае с обычной ТВ. Другой способ, сделать это (который я использую в других MIGX TV) – это сделать радио-боксы или селект-боксы.
  • Пятая строка закрывает массив полей. Также обратите внимание, что последняя строчка определяющая поле (изображение) не заканчивается запятой – это важно! Если вы поставите запятую в массиве, он JSON не будет обработан и ваша форма не будет работать.
  • Шестая строка закрывает объект-вкладку и весь массив вкладок.

Итак, таким образом мы создали "image" TV! У вас должна уже работать форма для заполнения данных, но для их показа нужна разметка…

Установка Разметки колонок Разметка колонок – это таблица на ТВ панели ресурса. Вам нужно определить заголовки для этой таблицы через опции ввода Разметки колонок. Вот (снова JSON) определение, что я использую: [{ "header": "Set", "sortable": "true", "dataIndex": "set" },{ "header": "Description", "sortable": "true", "dataIndex": "description" },{ "header": "Image", "sortable": "false", "dataIndex": "image","renderer": "this.renderImage" }]

Пройдёмся по каждой строке:

  • Открываем массив заголовков квадратными скобками ([) и заголовок пятой колонки фигурной скобкой ({).
  • Даём название заголовку "Set" указываем, что он может сортироваться (sortable) и указываем параметр "set", что отвечает определению Набор вкладок формы (Set Form Tabs), которые имеют "field":"set".
  • Конец Set / начало Description
  • Даём название заголовку "Description", сортируемый и сопоставляем его с полем description dataIndex.
  • Конец Description / начало Image
  • Дайте название заголовку "Image", несортируемый и сопоставьте его с полем dataIndex - image. Также определим рендерер, который в ExtJS позволит вам изменить вид выводимых данных. В данном случае "this.renderImage" рендерер автоматически возьмёт урл выбранного изображения и сформирует миниатюру вместо него.
  • Окончание объекта Image и массива заголовков.

После этого вы можете назначить эту MIGX TV к вашему шаблону и проверить результат работы. Не показывается разметка? Идите назад к вкладкам и убедитесь, что все значения заключены в двойные кавычки, а не одинарные и проверьте нет ли лишних запятых.

Информация Для проверки JSON используйте JSONLint .
  • Заполните данные
  • Выведите данные на сайт

Заполним произвольными данными нашу переменную шаблона ws.image


Если вы попытаетесь вывести эти данные как обычную ТВ, то увидите приблизительно следующее:

[{ "MIGX_id":"1","set":"set1","description":"кошка Марка, которая когда не спит, тайком ворует колбасу и ест","image":"demo/uroki/15/1.jpg" },{ "MIGX_id":"2","set":"set1","description":"барабака","image":"demo/uroki/15/2.jpg" },{ "MIGX_id":"3","set":"set1","description":"como esta nuevo","image":"demo/uroki/15/3.jpg" },{ "MIGX_id":"4","set":"set1","description":"этой книгой можно убить человека","image":"demo/uroki/15/4.jpg" }]

Это JSON массив с введенными полями и значениями!

Так как MIGX идёт в комплекте со сниппетом getImageList можете попытаться вывести данные с его помощью. Документацию по данному сниппету можете найти . Либо сделать свой сниппет (parseMIGXToGallery), который я использую для генерации разметки из &tpl чанка, базируясь на ТВ данных: