Modx карусель изображений на странице товара. Уроки MODx – Реализуем слайдер. Адаптивный jQuery слайдер контента bxSlider

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

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

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

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

Видео-обзор modSliderRevolution

Урок, в котором рассмотрим назначение дополнения 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 записи:

• Fieldname (имя поля) – title, Caption – Заголовок, Description – Описание фотографии.
• Fieldname (имя поля) – image, Caption – Изображение, Input TV Type – image.
• Fieldname (имя поля) – description, Caption – Описание.

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

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

• Header – Заголовок, Field (имя поля) – title, Column width (ширина колонки) – 100.
• Header – Файл изображения, Field – image, Renderer – this.renderImage.
• Header – Описание, Field – description, Column width (ширина колонки) – 200.

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

Создание 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]]

[[+description]]

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

Сегодня мы разберем как при помощи 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 со следующим кодом: