Вывод TV поля migx одного ресурса на другом

В общем ничего удивительно, слайдер на BootStrap 5, с бекендом в MODX Revo и использованием MIGX. Код для копипасат.

Конечно немного хитровыебанный местами код, но зато быстро и многофункционально(:

Задача

Слайдер, который выводится на главной, с возможностями

• Добавлять фоновые картинки
• Добавлять заголовок
• Добавлять описание
• Добавлять ссылку на какую либо страницу
• Временно отключать слайды
• Возможность отключать слайдер

Установки

1. Подключаем BootStrap 5
2. Устанавливаем MIGX

Настройка MIGX и доп полей

Создаём простую галочку, чтобы можно было показывать или скрывать слайдер

• Название доп свойства bs_slider_show
• Тип вввода Флажки (checkbox)
• Возможные значения Да==1

Доп свойство для добавления картинок

• Название доп свойства bs_img
• Тип вввода Изображение

Доп свойство MIGX для добавления самих слайдов

Дополнение PageBlocks для MODX Revolution

• Название доп свойства bs_slider
• Тип вввода migx
• Вкладки формы:

Настройка чанков

bs_slider

Основной чанк со слайдером

[[*bs_slider_show:is=`1`:then=` >div data-bs-ride=»carousel»> >div > [[getImageList? tpl=`bs_slider_dots` ]] >/div> >div > [[getImageList? tpl=`bs_slider_img` ]] >/div> [[getImageList? tpl=`bs_slider_buttons` ]] >/div> `]]

bs_slider_img

Чанк с элементами слайда

[[+bss_active:ne=«:then=` [[+bss_href:ne=«:then=` `:else=` `]] [[+bss_title:ne=«:then=`

[[+bss_title]]

`]] [[+bss_description:ne=«:then=`

[[+bss_description]]

`]] `]]

bs_slider_dots

Точки навигации слайда

[[+bss_active:is=`1`:then=` `]]

Настройка Сниппетов

Хитрый фикс, дело в том что в BS слайдере отчёт для навигации по слайдам идёт с 0, а из MIGX можно вытащить индексы только с 1, спустя несколько попыток я пришёл к выводу снижать на 1 позицию через сниппет, не лучшая идея..

BootStrap 5 настройки

JavaScript

Для запуска и работы слайдера понадобитсья запихнуть в JS код

$(‘#carouselExampleIndicators’).carousel(< interval: false >)

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

Вывод слайдера

Теперь для вывода слайдера в нужном месте в шаблоне нужно ввести код

[[$bs_slider]]

И в настройка главной странице поставить галочку, выводить слайдер, и добавить демо слайды.

Источник: trywar.ru

Modx карусель изображений на странице товара. Создание слайдеров при помощи MIGX. Создаем MODx Evo слайдер

Сегодня мы разберем как при помощи MIGX создать Bootstrap слайдер. Перед началом изучения, рекомендую сначала посетить этот .

Создание MIGX конфигурации

Идем в управление MIGX и добавляем новый элемент с именем slider , в поле замены пишем «Добавить слайды » и переходим на вкладку «Formtabs ».

MIGX Modx | getimagelist

Примечание: По сути мы переносим элементы с Formtabs. Да так же можете заполнять поля Column width – ширину столбцов.

Для тех кто вообще не хочет париться, создаем пустую конфигурацию и экспортируем в нее следующий код:

Создание TV с конфигурацией MIGX

В дереве MODX на вкладке «Элементы », нажмите + напротив пункта «Дополнительные поля » и вводим следующее:

• «Имя» — slider; «Подпись» — Слайдер.
• Во вкладке «Параметры ввода» в «Тип ввода» выбираем migx, а в поле «Конфигурации» вводим slider .
• Во вкладке «Доступно для шаблонов» выбираем те шаблоны, для которых будет доступен ввод в это поле.

Ввод данных

Откроем документ, для которого присвоено поле slider с MIGX с конфигурацией и введём в него какие-нибудь данные.

Вывод bootstrap 3 carusel на страницу

Html разметка у нас стандартная getbootstrap.com/docs/3.3/javascript/#carousel-examples, переделаем ее под MIGX и в необходимое место в шаблоне пропишем следующий код:

Предыдущий Следующий

И создаем чанки:

tplsliderIndicator :

и чанк tplsliderItem со следующим содержимым:

[[+zagolovok]]

Вывод bootstrap 4 carusel на страницу

Как и в предыдущем случае, берем стандартную разметку getbootstrap.com/docs/4.1/components/carousel/ и переделываем ее, в итоге получаем

Предыдущий Следующий

Где чанк tplsliderIndicator имеет следующий код:

и чанк tplsliderItem со следующим кодом:

[[+zagolovok]]

Урок, в котором рассмотрим назначение дополнения MODX Revo MIGX.

Работу с MIGX разберём на примере, результатом которого станет возможность добавлять в удобной форме изображения к ресурсам. Вывод изображений связанных с ресурсом на страницу будем осуществлять посредством карусели (слайдера) Bootstrap 3.

Что такое MIGX?

MIGX — это компонент для MODX Revolution, который добавляет к переменным шаблона (TV параметрам) новый тип ввода с аналогичным названием (migx) и удобными инструментами для работы с ним. MIGX позволяет сохранить в одну TV-переменную целую таблицу данных. Это означает то, что с помощью MIGX и одного дополнительного поля (TV) можно с каждым ресурсом связать сложный набор данных. Для хранения данных в MIGX TV-переменной используется формат JSON.

Название MIGX расшифровывается как M ultiI temsG ridtv (МногоЭлементнаяСеткаTV) для MODX .

Для извлечения сложных элементов данных из дополнительного TV поля с типом MIGX можно использовать сниппет getImageList . Данный сниппет поставляется вместе с пакетом MIGX.

Установка MIGX

Процесс установки MIGX начинается c открытия в админке MODX Revolution страницы «Управление пакета» (Приложение -> Установщик) и нажатия в ней кнопки «Загрузить дополнения». На открывшейся странице в поле «Поиск» вводим название пакета (MIGX) и нажимаем клавишу Enter . После этого из представленных результатов выбираем искомое дополнение и нажимаем на кнопку «Загрузить». Возвращаемся на предыдущую страницу и завершаем процесс инсталляции с помощью кнопки «Установить».

В процессе установке необходимо определиться с местом расположения компонента MIGX в главном меню админки. Выбор тут осуществляется из 2 вариантов. Первый вариант (Top Nav) подразумевает размещения ссылки на компонент в качестве основного пункта меню, а второй (Extras/Components) – в элементе «Приложения».

Результат установки дополнения MIGX:

MIGX — Создание карусели Bootstrap

В качестве примера рассмотрим применение компонента MIGX для создания карусели Bootstrap. Перед тем как переходить к созданию элемента определимся с перечнем основных полей, которые необходимы для формирования каждого слайда карусели. Этот список будет состоять из следующих полей:

• title — заголовок (название) слайда (изображения);
• image – изображение;
• description — описание изображения.

Создание MIGX элемента, состоящего из вышеперечисленных полей, осуществляется на вкладке «MIGX» страницы «Управление MIGX». Открытие страницы «Управление MIGX» выполняется с помощью пункта MIGX в главном меню менеджера или в раскрывающем списке «Приложения» в зависимости от настройки его расположения.

Создание нового MIGX элемента

Процесс разработки нового элемента MIGX осуществляется с помощью кнопки «Добавить элемент». После нажатия на эту кнопку открывается модальное окно «MIGX», состоящее из множества вкладок. Для большинства задач достаточно использовать только первых три: Settings (Основные параметры), Formtabs (вкладка для создания структуры) и Columns (вкладка для разработки таблицы, с помощью которой конечный пользователь будет управлять данными).

На вкладке «Settings» введём название элемента (например, photos) и надпись, которая будет заменять текст «Добавить элемент».

На вкладке «Formtabs» осуществляется создание полей. Другими словами она определяет структуру, которую конечные пользователи будут использовать для ввода своих данных. Чтобы добавить поля к MIGX необходимо нажать на кнопку «Добавить элемент» и в открывшемся диалоговом окне ввести название набора (Caption) и заполнить таблицу Fields.

Ввод записей в таблицу MODX Revolution MIGX осуществляется с помощью кнопки, расположенной сразу же после заголовка «Fields».

В таблицу Fields внесём следующие 3 записи:

Заключительный шаг – это ввод данных во вкладку «Columns». Данная вкладка определяет название столбцов колонок таблицы (внешний вид), с помощью которых пользователь осуществляет просмотр и ввод данных в соответствующую дополнительную TV-переменную MIGX ресурса (в данном случае TV-переменную, определённую MIGX-элементом photos).

Введём в таблицу Columns следующие сведения:

Добавление записей в таблицу осуществляется с помощью кнопки «Добавить элемент».

Создание TV-поля MIGX с конфигурацией photos

После создания MIGX-элемента (конфигурации) photos приступим к созданию дополнительного поля (TV) с типом ввода MIGX и конфигурацией photos.

Создание дополнительного поля в админке осуществляется на левой панели во вкладке «Элементы». Для этого напротив надписи «Дополнительные поля» нажмите на значок плюса и в открывшейся странице введите следующие данные:

• На вкладке «Общая информация» в поле «Имя» значение photos (имя дополнительного поля);
• На вкладке «Параметры ввода» в раскрывающемся списке «Тип ввода» выбрать пункт migx, а в поле «Конфигурации» ввести значение photos.
• На вкладке «Доступно для шаблонов» выбрать те шаблоны, для которых (а точнее для ресурсов, у которых установлены данные шаблоны) это поле будет доступно.

Ввод данных в TV MIGX поле photos

Откроем любой ресурс, у которого доступно MIGX TV поле photos и введём в него, например, следующие данные:

Вывод данных TV MIGX поля на страницу

Выводить данные на страницу будем с помощью сниппета getImageList , который поставляется вместе с дополнением MIGX.

Приступ к реализации. Для этого откроем шаблон, установленный для данного ресурса, и в необходимое место вставим следующий код:

[[*longtitle:empty=`[[*pagetitle]]`]]

Предыдущий Следующий

Вышеприведённый код состоит из HTML разметки и 2 вызовов сниппета getImageList . Первый выводит индикаторы карусели, а второй – слайды, содержащие изображения. Данные сниппеты имеют 2 параметра. Параметр tvname предназначен для указания имени TV-переменной с MIGX данными, которые необходимо вывести на страницу. А параметр tpl определён для того чтобы задать шаблон (чанк), посредством которого будет формироваться каждая строка данных из MIGX TV-поля photo.

Содержимое чанка tplCarouselIndicator:

Содержимое чанка tplCarouselItem:

[[+title]]

Результат отображения карусели на странице:

Slider Revolution — один из самых популярных слайдеров, благодаря огромному спектру функций и простоте использования
от компании ThemePunch . Этот слайдер купили 273,441 + раз, и его используют 2500000+ сайтов во всем мире.

Ниже перечислены некоторые из основных преимуществ данного слайдера, заметно отличающего его от бесплатных и
большинства премиальных аналогов:

• Мощный визуальный редактор — настраивайте показ слайдеров под нужды вашего проекта через удобное меню, в котором
  каждая функция находится на своем месте. Строгая градация не позволит вам запутаться. Единственной трудностью в
  первое время станет желание попробовать их все.
• Контроль вариативности каждого слайда — планируемое отображение блоков на экране ПК, планшета и телефона
  показывается в визуальном редакторе. Вы можете изменять размер слайдов индивидуально для каждого устройства.
  Адаптивный шаблон не позволит картинкам и видео исказиться или занять большее пространство, чем требуется для
  удобного просмотра.
• Работа с социальными сетями и видео хостингами — Slider Revolution пятого поколения позволяет включать в слайдер
  данные Instagramm, Facebook, Flickr, Twitter, Vimeo и Youtube. Если размещение видео планируется на собственном
  сервере, вы можете воспользоваться языком HTML5. Части кода пропишутся автоматически.
• Высокая производительность и оптимизация слайдов — плагин работает быстро в режиме редактирования и уменьшает
  вес слайдера без потерь качества содержимого. Опасаться за долгую загрузку страниц вам не придется. Что особенно
  актуально по отношению к мобильным устройствам, находящимся вне доступа WiFi соединений.
• Огромное количество спецэффектов при переходе слайдов
• Множество эффектов анимации при выводе текста, видео и картинок
• Запуск видео автоматически при открытии сайта или вручную, на выбор, остановка слайдера при просмотре видео,
  перемотка и т.д.
• Большой выбор настроек навигации
• Вставка анонсов записей с ссылками прямо в слайдер, при этом он настроен на seo оптимизацию
• Поддержка и установка шрифтов Google Fonts
• Использование множество слоев (картинок, видео, надписей и ссылок) в одном слайде, их можно бесчисленно
  накладывать друг на друга, при этом создается реалистичное видео или любая презентация.

Запустите MigX внутри Snippet

Я создаю форму, которая содержит некоторые поля, созданные с помощью MigX, каждое поле содержит [[+ name]], [[+ id]].

Я называю это как обычно:

Теперь мне нужно обработать эти поля с помощью фрагмента, прежде чем отправлять все по электронной почте.

Вопрос в том:

как я могу сделать что-то подобное в отрывок?

Любая помощь будет приветствоваться, спасибо!

Решение

Использование «FormIt» -Extra позволяет обрабатывать поля внутри ловушки.
Для ссылки на другие: https://docs.modx.com/extras/revo/formit/formit.hooks/#FormIt.Hooks-CustomHooks

Другие решения

Других решений пока нет …

Источник: web-answers.ru