Привет сообществу!
В данной заметке вы узнаете, что такое Multiple Formtabs и как создать конфигурацию с разным набором данных. Ну и конечно же создадим с вами слайдер у которого будут разные типы слайдов, а в конце вас ждёт очень интересная история которую я долго не решался кому либо рассказать (если конечно вам интересно, но история интересная - поверьте). И так, примеры слайдов:
- Изображение на фоне
- Видео на фоне
- Сплошной цвет на фоне
- Вкладка 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
в массиве)
- Вкладка 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
- Вкладка 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. Добавляем два элемента
- Заголовок
- Вкладка Column
- Header - Заголовок
- Field - header
- Вкладка Cell Editor
- Editor - this.textEditor
- Вкладка Column
- Описание
- Вкладка Column
- Header - Описание
- Field - description
- Вкладка Cell Editor
- Editor - this.textEditor
- Вкладка Column
Идём и быстро создаем 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]]
А вызов должен выглядеть так:
[]
Ну а на 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
Сегодня небольшая статья о том как в MODX создать слайдер при помощи пакета BanerY. Данный пакет можете загрузить и установить с репозитория .
Создание слайдера при помощи BanerYИ так есть статичный слайдер, пусть это будет обычный bootstrap слайдер, с вот такой разметкой:
Заголовок
Описание
ЗаголовокОписание
ЗаголовокОписание
Previous NextЦель создать управляемый слайдер из этой разметки. Приступим.
Начнем пожалуй с создания слайдов в BannerY, для этого заходим в Приложения — BannerY — Позиции и создаем позицию (к примеру home-slider).
После этого переходим во вкладку Баннеры и нажимаем на кнопку Новый банер. Откроется окно создания нового банера.
Заполняем все:
- Название, его можно будет вывести при помощи [[+name]].
- Выбираем изображение — [[+image]].
- Указываем URL куда переходить — [[+url]].
- Заполняем описание — [[+description]] — сюда к стати можно зарядить не только текст, но и обычный html, и это круто.
- Ну и выбираем позицию (создали ее ранее).
И так создаем нужное количество слайдов.
Теперь нужно вышеприведенную разметку разбить на чанки и подогнать код в чанках под синтаксис BanerY
Создаем чанк для отдельного слайдера с классом active , пусть будет slide и внедряем в него синтаксис:
[[+name]]
[[+description]]
Подробнее
Теперь копируем тот чанк и задаем ему имя slide2 и удаляем класс active
[[+name]]
[[+description]]
Подробнее
Ну и остается по сути только вывести слайды.
[]
В итоге получаем следующее:
[] Previous Next
Все) Вот так просто создать слайдер на modx при помощи BanerY.
Да к стати его документация находится вот здесь: docs.modx.pro/components/bannery/snippet
Сегодня мы разберем как при помощи MIGX создать Bootstrap слайдер. Перед началом изучения, рекомендую сначала посетить этот .
Создание MIGX конфигурацииИдем в управление MIGX и добавляем новый элемент с именем slider , в поле замены пишем «Добавить слайды » и переходим на вкладку «Formtabs ».
- Fieldname – zagolovok, Caption – Заголовок.
- Fieldname – slide, Caption – Слайд, Input TV Type – image.
- Fieldname – opisanie, Caption – Описание.
- Fieldname — idstranici, Caption – Укажите id документа на который ссылаться.
- Header – Заголовок, Field – zagolovok.
- Header – Слайд, Field – slide, Renderer – this.renderImage.
- Header – Описание, Field – opisanie.
- Header – id документа, Field – idstranici.
Примечание: По сути мы переносим элементы с Formtabs. Да так же можете заполнять поля Column width – ширину столбцов.
Сохраняем (выполнить).
Для тех кто вообще не хочет париться, создаем пустую конфигурацию и экспортируем в нее следующий код:
{ "formtabs":[ { "MIGX_id":1, "caption":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u044b", "print_before_tabs":"0", "fields":[ { "MIGX_id":1, "field":"zagolovok", "caption":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a", "description":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u043b\u0430\u0439\u0434\u0430", "description_is_code":"0", "inputTV":"", "inputTVtype":"", "validation":"", "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config", "sources":"", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos":1 }, { "MIGX_id":2, "field":"slide", "caption":"\u0421\u043b\u0430\u0439\u0434", "description":"", "description_is_code":"0", "inputTV":"", "inputTVtype":"image", "validation":"", "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config", "sources":"", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos":2 }, { "MIGX_id":3, "field":"opisanie", "caption":"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435", "description":"", "description_is_code":"0", "inputTV":"", "inputTVtype":"", "validation":"", "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config", "sources":"", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos":3 }, { "MIGX_id":4, "field":"idstranici", "caption":"\u0423\u043a\u0430\u0436\u0438\u0442\u0435 id \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f", "description":"", "description_is_code":"0", "inputTV":"", "inputTVtype":"", "validation":"", "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config", "sources":"", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos":4 } ], "pos":1 } ], "contextmenus":"", "actionbuttons":"", "columnbuttons":"", "filters":"", "extended":{ "migx_add":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u044b", "disable_add_item":"", "add_items_directly":"", "formcaption":"", "update_win_title":"", "win_id":"", "maxRecords":"", "addNewItemAt":"bottom", "media_source_id":"", "multiple_formtabs":"", "multiple_formtabs_label":"", "multiple_formtabs_field":"", "multiple_formtabs_optionstext":"", "multiple_formtabs_optionsvalue":"", "actionbuttonsperrow":4, "winbuttonslist":"", "extrahandlers":"", "filtersperrow":4, "packageName":"", "classname":"", "task":"", "getlistsort":"", "getlistsortdir":"", "sortconfig":"", "gridpagesize":"", "use_custom_prefix":"0", "prefix":"", "grid":"", "gridload_mode":1, "check_resid":1, "check_resid_TV":"", "join_alias":"", "has_jointable":"yes", "getlistwhere":"", "joins":"", "hooksnippets":"", "cmpmaincaption":"", "cmptabcaption":"", "cmptabdescription":"", "cmptabcontroller":"", "winbuttons":"", "onsubmitsuccess":"", "submitparams":"" }, "columns":[ { "MIGX_id":1, "header":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a", "dataIndex":"zagolovok", "width":100, "sortable":"false", "show_in_grid":1, "customrenderer":"", "renderer":"", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" }, { "MIGX_id":2, "header":"\u0421\u043b\u0430\u0439\u0434", "dataIndex":"slide", "width":100, "sortable":"false", "show_in_grid":1, "customrenderer":"", "renderer":"this.renderImage", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" }, { "MIGX_id":3, "header":"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435", "dataIndex":"opisanie", "width":200, "sortable":"false", "show_in_grid":1, "customrenderer":"", "renderer":"", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" }, { "MIGX_id":4, "header":"id \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430", "dataIndex":"idstranici", "width":50, "sortable":"false", "show_in_grid":1, "customrenderer":"", "renderer":"", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" } ], "category":"" }
Создание TV с конфигурацией MIGXВ дереве MODX на вкладке «Элементы », нажмите + напротив пункта «Дополнительные поля » и вводим следующее:
- «Имя» — slider; «Подпись» — Слайдер.
- Во вкладке «Параметры ввода» в «Тип ввода» выбираем migx, а в поле «Конфигурации» вводим slider .
- Во вкладке «Доступно для шаблонов» выбираем те шаблоны, для которых будет доступен ввод в это поле.
Откроем документ, для которого присвоено поле slider с MIGX с конфигурацией и введём в него какие-нибудь данные.
Вывод bootstrap 3 carusel на страницуHtml разметка у нас стандартная getbootstrap.com/docs/3.3/javascript/#carousel-examples, переделаем ее под MIGX и в необходимое место в шаблоне пропишем следующий код:
Предыдущий Следующий
И создаем чанки:
tplsliderIndicator :
и чанк tplsliderItem со следующим содержимым:
[[+zagolovok]]
[[+opisanie]]
Подробнее Вывод bootstrap 4 carusel на страницуКак и в предыдущем случае, берем стандартную разметку getbootstrap.com/docs/4.1/components/carousel/ и переделываем ее, в итоге получаем
[] [] Предыдущий Следующий
Где чанк tplsliderIndicator имеет следующий код:
и чанк tplsliderItem со следующим кодом: