info@enterin.ru
Россия, г. Ярославль
| info@enterin.ru |
Россия, г. Ярославль
|
Дата публикации: 17 августа 2019
Решил написать данную шпаргалку для компонента MigX, возможно больше для себя, но если кому-то будет полезна данная заметка, будет приятно. Изначально разбирал данный компонет, на сайте , так что если тут не понятно, разбирайте там.
В итоге получим, в админ панели, в ресурсе, в закладке "дополнительные поля" - это
И на сайте - это
| Дата заезда | Дата выезда | Название смены | Стоимость путевки |
|---|---|---|---|
| 04.08.2019 | 25.08.2019 | Пираты карибского моря | 10000 руб. |
| 01.09.2019 | 30.09.2019 | Подземелье драконов | 25000 |
Скачаиваем и устанавливаем MigX
После установке видим его тут, или в выпадающем пункте Приложения, кто как установит.
Создаем ТВ-шку с именем DateSmen
В закдадке параметры ввода, выбираем тип ввода migx. В кофигурации пишем addSession - Это поле соединяет наш ТВ с MigX
Заходим в компонет MigX, и нажимаем вкладку MIGX. Далее - Добавить элемент
Тут нам потребуется заполнить вкладку Settings. В поле Name прописываем название элемента addSession Заметьте, тоже что указали в кофигурации TV-шки. Ну и для удобства заменяем фразу "Добавить элемент" на "Добавить смену". Нажимаем - Выполнено. Элемент migx создан и связан с нашим tv
На элементе нажимаем ПКМ - редактировать. Нажимаем закладку Formtabs, далее Добавить элемент
Это кнопка "Добавляем смену" - которая появится в админке, на нужном ресурсе.
Теперь нужно добавить столбцы таблицы, в которые будем вводить данные, через админку. Жмем Добавить элемент.
Заполняем поля отмеченные на рисунке.
Поскольку это поле "ДАТА", для удобства ввода, прокручиваем страницу чуть ниже и ставим "date" в полях Input TV и Input TV type.
В итоге после добавления нужных столбцов будущей таблицы имеем это. Мы создали поля куда будем вводить данные.
Для этого в закладке Columns жмем добавить элемент.
Добавляем нужные элементы, как на картике. Можно для красоты добавить ширину столбца. Я поставил 500.
Добавив все элементы. Это столбцы нашей будущей таблицы. Получаем это. Жмем Выполнено.
Если все сделали правильно, видим что у нас появился элемент с названием addSession.
После совершенных действий, мы можем вводить данные в админке и видеть результат
Заходим в ресурс на котором должна выводиться наша табличка. Выбираем вкладку Дополнительные поля, видим результаты нашей предыдущей работы.
Жмем добавить смену, и заполняем все поля. Жмем выполнить.
Получили строку таблицы.
Выводим информацию на страницу. Для это используем компонент getImageList, который установился вместе с migx
DataSmen - tv который мы создали на 3-ем шаге
tpl.Session - чанк с помощью которого будем выводить строки таблицы
Создаеем чанк tpl.Session со следующим кодом. Все сохраняем и смотрим результат.
| Дата заезда | Дата выезда | Название смены | Стоимость путевки |
|---|---|---|---|
| 04.08.2019 | 25.08.2019 | Пираты карибского моря | 10000 руб. |
| 01.09.2019 | 30.09.2019 | Подземелье драконов | 25000 |
Создаем TV параметр. Заполняем все поля, которые указаны на картинках. Делаем доступным данный TV для нужного нам шаблона. Жмем сохранить.
Заходим в MigX. Жмем кнопку добавить элемент и создаем элемент addImage (название такое же как в поле "конфигурация" нашего TV). Далее сохраняем данный элемент и жмем на нем ПКМ, редактировать.
Вкладка Settings - меняем стандартную надпись "Добавить элемент" на "Добавить картинку"
Вкладка Formtabs - жмем добавить элемент и создаем элемент UrlImage с полями: Fieldname - UrlImage, Caption - Выберите картинку, Input TV type - image. Жмем выполнено.
Вкладка Columns (то как выглядит добавленная картинка). Жмем добавить элемент. Заполняем поля: Header - Изображение, Field - UrlImage, Column width - нужную ширину колонки.
В этой же вкладке переходим в закладку Renderer и в списке выбираем this.renderImage и жмем выполнено.
Выводим результат на страницу
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>