Modx карусель изображений на странице товара. Большой и страшный

Привет сообществу!

В данной заметке вы узнаете, что такое Multiple Formtabs и как создать конфигурацию с разным набором данных. Ну и конечно же создадим с вами слайдер у которого будут разные типы слайдов, а в конце вас ждёт очень интересная история которую я долго не решался кому либо рассказать (если конечно вам интересно, но история интересная - поверьте). И так, примеры слайдов:

  • Изображение на фоне
  • Видео на фоне
  • Сплошной цвет на фоне
Внимание! В этот раз не надо убирать от экранов детей и беременных женщин, ведь это какая-та дискриминация по возрастному и половому признакам! Вот как это будет Еще одно объявление! Я часто буду ссылаться на первый урок, дабы не повторяться, так что настоятельно рекомендую ознакомиться с Зачем? Давайте фантазировать: Попадает вам проект, где к примеру, на главной странице есть слайдер у которого несколько типов слайдов, у одного на фоне видео, у другого картинка, а у третьего например сплошной цвет. Не будете же вы создавать один набор полей (одну конфигурацию) и запихать (пардон за лексикон) в него все эти поля и рассказывать менеджеру как нужно с этим жить и быть. Это не серьезный подход! ? (Надеюсь кто нибудь поймёт)За дело Мы поняли с вами «зачем», теперь давайте узнаем «как». Если вы уже ознакомились с первым уроком, то нам нужно перейти на страницу компонента MIGX и создать 3 конфигурации. Предварительно установите ColorPicker от Jako (но это не принципиально) :Всё, что не указано мной, пропускайте! Конфигурация solid (Сплошной цвет)
  • Вкладка Settings
    • Name - solid
    • Add new Category - Slider
  • Вкладка Formtabs
    • Fields Fields создаем 3 поля
    • Цвет фона:
      • Fieldname - bgcolor
      • Caption - Выберите цвет фона
      • Input TV type - ColorPicker (или тот который вы
        используете)
    • Заголовок:
      • Fieldname - header
      • Caption - Заголовок слайда
    • Описание:
      • Fieldname - description
      • Caption - Описание слайда
      • Input TV type - textarea
    • Multiple Formtabs Field - type (Данное значение будет названием ключа в
      массиве вывода. По умолчанию: MIGX_formname)
    • - Со сплошным цветом на фоне (Текст
      данной конфигурации в списке выбора)
    • - solid (Значение того самого поля type
      в массиве)
Конфигурация video
  • Вкладка Settings
    • Name - video
    • Category - Slider
  • Вкладка Formtabs
    • Fields - Создаем 1 вкладку и в поле Fields опять же создаем 3 поля, только уже одно из этих полей другого типа. Мне стоит тут уточнить, что количество полей и их типов в разных конфигурациях может быть разной настолько, насколько ограничена ваша фантазия… А я знаю, что у вас с фантазиями всё в порядке?
    • Видео (т.е. файл):
      • Fieldname - video
      • Caption - Загрузите видео
      • Input TV type - file
    • Заголовок:
      • Fieldname - header
      • Caption - Заголовок слайда
    • Описание:
      • Fieldname - description
      • Caption - Описание слайда
      • Input TV type - textarea
    • Multiple Formtabs Field - type
    • Multiple Formtabs Optionstext - С видео на фоне
    • Multiple Formtabs Optionsvalue - video
Конфигурация sliderПо умолчанию будет принимать изображение и будет являться этакой главной конфигурацией.
  • Вкладка Settings
    • Name - slider
    • Category - Slider
    • Замена «Добавить элемент» - Добавить слайд
    • Form Caption
    • Window Title - Добавить/редактировать слайд
  • Вкладка Formtabs
    • Fields - Создаем 1 вкладку и в поле Fields опять же создаем 3 поля
    • Изображение:
      • Fieldname - image
      • Caption - Загрузите изображение
      • Input TV type - image
      • Указываете нужный вам источник файлов, я описал данную задачу в первом уроке
    • Заголовок:
      • Fieldname - header
      • Caption - Заголовок слайда
    • Описание:
      • Fieldname - description
      • Caption - Описание слайда
      • Input TV type - textarea
    • Multiple Formtabs - Вот тут и та самая магия, нам нужно выбрать созданные в предыдущих шагах конфигурации и в том числе тот который мы сейчас создаем, т.е. выбираем video, solid и slider Конфигурации slider не будет в списке, потому как она по факту еще не создана, так что вам нужно будет пройти оставшиеся пункты, сохранить конфигурацию, открыть данную конфигурацию еще раз на редактирование и уже на этот раз в списке она будет доступна slider
      Еще одно уточнение: сортированы будут конфигурации именно по тому порядку, по которому вы выбрали, т.е. по умолчанию при добавлении нового слайда будет выбрана та которая будет первой в списке
    • Multiple Formtabs Label - Выберите тип слайда (Тут указывается текст
      который пользователь будет видеть рядом со списком выбора типа слайда)
    • Multiple Formtabs Field - type
    • Multiple Formtabs Optionstext - С изображением на фоне
    • Multiple Formtabs Optionsvalue - image
  • Вкладка Columns
    • Поле Columns. Добавляем два элемента
    • Заголовок
      • Вкладка Column
        • Header - Заголовок
        • Field - header
      • Вкладка Cell Editor
        • Editor - this.textEditor
    • Описание
      • Вкладка Column
        • Header - Описание
        • Field - description
      • Вкладка Cell Editor
        • Editor - this.textEditor
Как вы уже заметили, в двух первых конфигурациях мы не создавали так называемые колонки для вывода в панели управления, т.е. при редактировании самого TV параметра. Колонки эти нужно создавать в последней, т.е. в той конфигурации которая будет указана в TV и у которой в поле Multiple Formtabs во вкладке Formtabs будут перечислены все конфигурации которые нам нужны, в том числе и эту же саму конфигурацию
Идём и быстро создаем TV с типом ввода migx , в поле Конфигурации пишем название нашей конфигурации, т.е. slider , назначаем нужные шаблоны и открываем на редактирование ресурс, ну или же его создаем. Если мы всё сделали верно, то мы должны увидеть следующую картину:Изображение кликабельно и если же вы уже смотрели гифку по ссылке в начале заметки, то эта она самая

Очень быстро заполняем данные и перейдем к выводу наших слайдов.

Как вывести? Ввод данных это хорошо, ну а как быть с выводом? - не волнуйтесь товарищи, всё будет. Для вывода у нас опять же 2 хороших варианта и оба эти варианта мы рассматривали в , это родной MIGX-у сниппет getImageList и всемогущий fenom . Давайте глянем как выглядят наши данные:getImageListВызовем сниппет без указания параметра tpl, для того чтобы увидеть сырые данные:

[] Array ( => 14 => image => files/avatar.png => Это слайд с изображением => Ну короче описание) [_alt] => 0 [_first] => 1 [_last] => => 1 => slider) Array ( => 15 => video => files/Моё домашнее позорно.MOV => А это уже видео => Да, действительно! [_alt] => 1 [_first] => [_last] => => 2 => slider) Array ( => 16 => solid => ff0000 => А тут красный-прекрасный цвет => Мне нравится! [_alt] => 0 [_first] => [_last] => 1 => 3 => slider)

fenom {$_modx->resource.slider| fromJSON | print} Array ( => Array ( => 14 => image => files/avatar.png => Это слайд с изображением => Ну короче описание)) => Array ( => 15 => video => files/Моё домашнее позорно.MOV => А это уже видео => Да, действительно!) => Array ( => 16 => solid => ff0000 => А тут красный-прекрасный цвет => Мне нравится!))
Как мы видим, в наших массивах, кроме всего прочего, затесался ключ type с теми значениями, которые мы с вами указывали при создании конфигураций.

Для того чтобы вывести наш слайдер с помощью getImageList , нам нужно создать 3 чанка с названиями наших значений ключа type , т.е.: image , video и solid . Далее поймете почему.

Примеры чанков:

// Чанк image [[+header]]

[[+description]]

// Чанк video [[+header]]

[[+description]]

// Чанк solid [[+header]]

[[+description]]


А вызов должен выглядеть так:

[]

Мы тут берем значения из массивов каждого слайда, потому и мы создавали три чанка названия которых совпадают со значениями полей Multiple Formtabs Field
Ну а на fenom всё выглядит намного проще:

{var $slider = $_modx->resource.slider| fromJSON} {if $slider} {foreach $slider as $slide} {switch $slide["type"]} {case "image"} {$slide["header"]}

{$slide["description"]}

{case "video"} {$slide["header"]}

{$slide["description"]}

{case "solid"} {$slide["header"]}

{$slide["description"]}

{/switch} {/foreach} {/if}

Итог и обещанная история Как мы видим, MIGX справляется с данной задачей если и не сказать «превосходно», но как минимум «хорошо». Еще раз повторю, что вас MIGX не ограничивает в количествах конфигураций, вкладок в каждой конфигурации и в количестве полей в них. А примеры, как вы уже надеюсь поняли, довольно простые для того чтобы вам также было просто ознакомиться с данным функционалом. И еще кое-что важное: в чанках при выводе настоятельно рекомендую проверять на заполненность полей и всегда учитывать, что данные могут быть или не заполнены или по каким-то причинам могут не прийти и потому используйте phx фильтры для синтаксиса MODX или условия в fenom.

Всем спасибо за внимание, пожелал бы всем удачи, но не буду, ведь как говорят: «Удачи желают неудачникам», потому желаю вам счастья и здоровья что-ли, ну а кому интересно, далее история.

Как-то к нам в гости приехали мои родственники, среди них мой племянник (сын сестры) из соседней страны и два моих племянника (Мы почти все ровесники). Загородный дом, солнечная Средняя Азия, небольшая гора и река рядом. Той же ночью мы вчетвером решили прогуляться вдоль этой самой реки и по началу всё было спокойно, причин для волнения не было. Проводили время достаточно весело, рассказывали истории (подчас страшные и жуткие), шутили, ну и всё в таком духе. Но в один момент, я заметил, что один из моих племянников побледнел и это не просто словесный оборот или приукрашивание, ведь такого страха и недоумения на лице человека я никогда не видел до и после данного случая. Он не отрывая глаз смотрел в том направлении, куда я был повернут спиной, т.е. он смотрел будто на что-то или на кого-то позади меня, но не прям позади и близко, мне казалось, что он смотрит куда-то вдаль. Было жутко и я спросил у него: - Что случилось? А он…

Данный абзац должен будет делать вид будто у истории в данной заметке есть продолжение, но на самом деле я просто вас немного обманул, надеясь на то, что смогу немного развеселить вас от технического, скучного и большого текста и у вас поднимется настроение. А история сама реальна и очень интересна. Вот теперь точно всем спасибо за внимание!

UPD:
Если чё я Баха!?

Если вдруг кому-то захочется поблагодарить рублём, то так уж и быть: Карта Сбербанка +79609354545

В этом занятии мы рассмотрим основы 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 чанка, базируясь на ТВ данных: