info@enterin.ru +7 (910) 973-41-19 Россия, г. Ярославль

MigX Modx Revo - быстрый старт. Примеры MigX.

Дата публикации: 17 августа 2019

Решил написать данную шпаргалку для компонента MigX, возможно больше для себя, но если кому-то будет полезна данная заметка, будет приятно. Изначально разбирал данный компонет, на сайте "IT Шефа", так что если тут не понятно, разбирайте там.

Пример - 1. Вывод таблицы с информацией о датах заезда и датах выезда.

Пример - 2. Добавление Картинок в каталог при помощи MigX

Пример 1 - Вывод таблицы с информацией о датах заезда и датах выезда.

В итоге получим, в админ панели, в ресурсе, в закладке "дополнительные поля" - это

И на сайте - это

Дата заезда Дата выезда Название смены Стоимость путевки
04.08.2019 25.08.2019 Пираты карибского моря 10000 руб.
01.09.2019 30.09.2019 Подземелье драконов 25000

Шаг - 1

Скачаиваем и устанавливаем MigX

Шаг - 2

После установке видим его тут, или в выпадающем пункте Приложения, кто как установит.

Шаг - 3

Создаем ТВ-шку с именем DateSmen

Шаг - 4

В закдадке параметры ввода, выбираем тип ввода migx. В кофигурации пишем addSession - Это поле соединяет наш ТВ с MigX

Шаг - 5

Заходим в компонет MigX, и нажимаем вкладку MIGX. Далее - Добавить элемент

Шаг - 6

Тут нам потребуется заполнить вкладку Settings. В поле Name прописываем название элемента addSession Заметьте, тоже что указали в кофигурации TV-шки. Ну и для удобства заменяем фразу "Добавить элемент" на "Добавить смену". Нажимаем - Выполнено. Элемент migx создан и связан с нашим tv

Шаг - 7

На элементе нажимаем ПКМ - редактировать. Нажимаем закладку Formtabs, далее Добавить элемент

Шаг - 8

Это кнопка "Добавляем смену" - которая появится в админке, на нужном ресурсе.

Теперь нужно добавить столбцы таблицы, в которые будем вводить данные, через админку. Жмем Добавить элемент.

Шаг - 9

Заполняем поля отмеченные на рисунке.

Поскольку это поле "ДАТА", для удобства ввода, прокручиваем страницу чуть ниже и ставим "date" в полях Input TV и Input TV type.

Шаг - 10

В итоге после добавления нужных столбцов будущей таблицы имеем это. Мы создали поля куда будем вводить данные.

Шаг - 11. Создаем поля для админке, где будут видны введенные данные.

Для этого в закладке Columns жмем добавить элемент.

Шаг - 12

Добавляем нужные элементы, как на картике. Можно для красоты добавить ширину столбца. Я поставил 500.

Шаг - 13

Добавив все элементы. Это столбцы нашей будущей таблицы. Получаем это. Жмем Выполнено.

Шаг - 14

Если все сделали правильно, видим что у нас появился элемент с названием addSession.

После совершенных действий, мы можем вводить данные в админке и видеть результат

Шаг - 15. Вывод информации на страницу сайта.

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

Жмем добавить смену, и заполняем все поля. Жмем выполнить.

Шаг - 16

Получили строку таблицы.

Шаг - 17

Выводим информацию на страницу. Для это используем компонент getImageList, который установился вместе с migx

DataSmen - tv который мы создали на 3-ем шаге

tpl.Session - чанк с помощью которого будем выводить строки таблицы

Шаг - 18

Создаеем чанк tpl.Session со следующим кодом. Все сохраняем и смотрим результат.

Результат трудов.

Дата заезда Дата выезда Название смены Стоимость путевки
04.08.2019 25.08.2019 Пираты карибского моря 10000 руб.
01.09.2019 30.09.2019 Подземелье драконов 25000

Пример - 2. Добавление Картинок в каталог при помощи MigX

Шаг - 1

Создаем TV параметр. Заполняем все поля, которые указаны на картинках. Делаем доступным данный TV для нужного нам шаблона. Жмем сохранить.

Шаг - 2

Заходим в MigX. Жмем кнопку добавить элемент и создаем элемент addImage (название такое же как в поле "конфигурация" нашего TV). Далее сохраняем данный элемент и жмем на нем ПКМ, редактировать.

Шаг - 3

Вкладка Settings - меняем стандартную надпись "Добавить элемент" на "Добавить картинку"

Шаг - 4

Вкладка Formtabs - жмем добавить элемент и создаем элемент UrlImage с полями: Fieldname - UrlImage, Caption - Выберите картинку, Input TV type - image. Жмем выполнено.

Шаг - 5

Вкладка Columns (то как выглядит добавленная картинка). Жмем добавить элемент. Заполняем поля: Header - Изображение, Field - UrlImage, Column width - нужную ширину колонки.
В этой же вкладке переходим в закладку Renderer и в списке выбираем this.renderImage и жмем выполнено.

Шаг - 6

Выводим результат на страницу

imageTvMigX - tv который мы создали на 3-ем шаге

tpl.addImage - чанк с помощью которого будем выводить строки таблицы

[[getImageList? 
    &tvname=`imageTvMigX`
    &tpl=`tpl.addImage`
]]

Содержание чанка. Я вывел через phpthumbof, чтобы фотки обрезались автоматически.

<a href="[[+UrlImage]]" data-fancybox="gallery" data-caption="">
<img class="zametka-img-migX" src="[[phpthumbof? &input=`[[+UrlImage]]`  &options=`h=220&w=300&zc=TL`]]" />
</a>

Результат трудов

+1

Выбрать другую заметку

  1. Подбор шин по марке авто - Каталог продукции
  2. Пример - Подбор шин по марке автомобиля ModX revolution
  3. Загрузка страницы с заданным скроллингом по середине
  4. Якорные ссылки с плавной прокруткой - Пример
  5. Перенос сайта на другой хостинг Modx revo
  6. Перенос дампа MySQL 5.7 в MySQL 5.5
  7. Документация getProducts
  8. mFilter2 - быстрый запуск
  9. mSearch2 - быстрый запуск
  10. Автоматическое определение года - PHX Modx Revo, Вывод названий месяцев на русском
  11. Документация fastField Modx Revo - плагин для получения поля другого ресурса.
  12. MODX Revolution - Каталог ядра в открытом доступе
  13. Привязать картинку к ячейке excel
  14. Обновление MODX Revolution
  15. Перевод с http на https, сайт на ModX Revo, хостинг beget.
  16. pdoMenu - Как исключить определенные пункты меню
  17. Как вывести количество дочерних элементов modx revo - один из вариантов
  18. MigX Modx Revo - быстрый старт. Примеры MigX.
  19. Запрет на индексацию ссылок или текста
  20. Не выводить текущую новость через getProducts ModX revo
  21. Font boosting и проблемы со шрифтом в мобильных браузерах