Объеденяем TV в MODX REVO
21/03/2016
Просмотры: 3224

MIGX TV для ускорения работ

При создании веб проектов на CMF MODX REVO постоянно требуется использование переменных данных, что на практике реализовывается посредством присвоения значений к созданным TV's.

Для большинства задач хватает 2-3 переменных, но в некоторых случаях требуется намного большее количество, что влечет за собой увеличение количества обращений к базе данных и как следствие замедляет загрузку страниц. 

Именно для таких случаев удобно использовать табличные TV's, посредством приложения MIGX.

MIGx TV для решения различных задач

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

К примеру если у вас используется 10 tv для каждого ресурса и вы делаете выборку для отображения анонса 10 ресурсов, то это уже 100 запросов к базе данных. Такое количество запросов крайне нежелательно на вашем сайте. 

MODX revo migx tv для группировки TV параметров

Сейчас работаю над проектом онлайн каталога организаций на MODX REVО. Добрался до создания карточки предприятия, в которой необходимо создать приличное количество полей, такие как: адрес, телефон, логотип, e-mail и т.д. 

Также необходимо в дальнейшем реализовать возможность фильтрации ресурсов по значениям данных TV, соотвественно будет большое количество запросов. Снизить нагрузку сайта, а также создать более удобное оформление карточки предприятия в админке я планирую используя табличные TV MIGX.

Поставленная задача:

MODX revo migx tv для группировки TV параметров

По требованию заказчика необходимо реализовать карточку предприятия с контактными данными. Причем данные будут разделены на основные и дополнительные. Основные данные будут размещены для всех предприятий, а дополнительные на платной основе. 

Для удобства работы администратора сайта, будем создавать отдельно карточку с основными данными и карточку с дополнительными данными. Для этого создадим 2 MIGX TV, что позволит не только объеденить TV, но и значительно снизить количество запросов. Итак, приступим к реализации.

Реализация поставленной задачи:

Для заголовка мы создадим вывод параметра [*pagetitle], останутся 4 основных переменных:

  1. Логотип организации
  2. Адрес организации
  3. Контактный телефон организации
  4. Контактный e-mail организации

Создание простых TV в MODX REVO

Создаем для каждой переменной обычные TV, с указанием типа ввода (для логотипа изображение, для всех остальных текст по умолчанию). НЕ используем параметр ДОСТУПНО ДЛЯ ШАБЛОНОВ, не ставим галочку, эти TV не должны быть привязаны к какому либо шаблону.

Я создал 4 TV с именами согласно их назначению:

  1. logo_cat
  2. address_cat
  3. phone_cat
  4. mail_cat

Для logo_cat установил параметры ввода - изображения, для всех остальных оставил по умолчанию-текст.

Создание простых TV в MODX REVO

Создание MIGX TV для группировки простых TV

Теперь необходимо сгруппировать в одну таблицу все созданные ранее переменные. для этого как вы уже догадались, мы будем использовать MIGX. Его необходимо предварительно установить, выбрав в списке приложений MIGX. На этапе установки данного приложения будет предложен выбор типа данного приложения, необходимо выбрать - TOP/NAV.

После того как приложение установлено, можно переходить к непосредственному созданию MIGX TV.

Для более удобного администрирования сайта в дальнейшем я стараюсь давать релевантные названия, соотвественно в нашем случае я создам TV с именем company_base_data, что подразумевает основные данные, которые будут размещаться бесплатно.

Создаем новый TV параметр, даем ему имя и выбираем в списке ПАРАМЕТРЫ ВВОДА - MIGX.

Создаем новый TV параметр

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

Создание MIGX TV

В поле ВКЛАДКИ ФОРМЫ мы присвоим TV таблицам, а во втором поле мы создадим список формирования полей для заполнения в административной панели нашего веб сайта на CMF MODX REVO.

Вкладки формы MIGX TV

Необходимо использовать JSON код для заполнения данной формы. Нам необходимо присвоить TV переменные полям в таблице, для дальнейшего использования.

1
2
3
[
{
"caption":"Основные данные организации","fields":[
{"field":"logo","caption":"Логотип организации","inputTV":"logo_cat"} ]}
]

В первой строке мы присваиваем название нашей форме, которое будет отображаться в админке (Основные данные организации), а также начинаем разметку полей.

Во второй строке Размечаем первое поле. Присваиваем имя для поля - LOGO, подписываем заголовок для админки - ЛОГОТИП КОМПАНИИ, а также указываем название простого TV параметра, который будем использовать для передачи значения.

Для создания еще одного поля, просто ставим запятую и также как во второй строке создаем имя для поля, пишем название для админке и указываем простое TV.

Добавляем поле с адресом организации (TV - address_cat)

1
2
3
4
5
6
[
{"caption":"Основные данные организации","fields":[
{"field":"logo","caption":"Логотип организации","inputTV":"logo_cat"},
{"field":"address","caption":"Адрес организации","inputTV":"address_cat"}
]}
]

Так добавляем все поля, присвоив необходимые TV к полям.

Вот что получилось у меня:

1
2
3
4
5
6
7
8
[
{"caption":"Основные данные организации","fields":[
{"field":"logo","caption":"Логотип организации","inputTV":"logo_cat"},
{"field":"address","caption":"Адрес организации","inputTV":"address_cat"},
{"field":"phone","caption":"Телефон организации","inputTV":"phone_cat"},
{"field":"mail","caption":"E-mail организации","inputTV":"mail_cat"}
]}
]

Вывод MIGX TV в админке MODX REVO для заполнения

После того как мы создали поля в таблице, нам необходимо вывести панель администрирования значениями MIGX TV. Для этого переходим к следующей вкладке - РАЗМЕТКА КОЛОНОК.

1
2
3
[
{"header":"Логотип","width":"250","sortable":"true","dataIndex":"logo","renderer":"this.renderImage"}
]

Формируем код в таком виде. Указываем заголовок, ширину колонки (в данном случае 250px), указываем значение поля, которому присвоили логотип LOGO, а также указываем, что можно сортировать поля по очередности отображения ("sortable":"true").

Это делаю всегда, что позволит при необходимости изменить порядок отображения полей (адрес, телефон, лого организации), мы сможем поменять порядок отображения. Например нам потребуется вначале вывести e-mail предприятия, а не адрес.

В этом случае мы сможем просто взять и перетянуть поле с названием e-mail вверх и поставить его первым. очень удобно, поэтому рекомендую для всех полей всегда прописывать возможность сортировки полей.

Для вывода следующего поля - адреса организации, прописываем еще одну строку, не забываем ставить запятую после каждой строки:

1
2
3
4
[
{"header":"Логотип","width":"250","sortable":"false","dataIndex":"logo","renderer":"this.renderImage"},
{"header":"Адрес организации","width":"250","sortable":"true","dataIndex":"address"}
]

В данной строке мы указали название колонки и указали какое поле необходимо вывести (address).

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

У меня получился такой код:

1
2
3
4
5
6
[
{"header":"Фотография","width":"250","sortable":"false","dataIndex":"image","renderer":"this.renderImage"},
{"header":"Адрес организации","width":"250","sortable":"true","dataIndex":"address"},
{"header":"Телефон организации","width":"250","sortable":"true","dataIndex":"phone"},
{"header":"E-mail организации","width":"250","sortable":"true","dataIndex":"mail"}
]

Администрирование сайта с использованием MIGX TV

После сохранения, переходим на редактирование ресурса, с шаблоном, к которому привязана наша MIGX TV и видим поле с кнопкой, при нажатии по которой открывается диалоговое окно, в котором присутствуют все созданные нами поля:

Администрирование сайта с использованием MIGX TV

Вывод данных MIGX TV в ресурсе MODX REVO

MIGX TV имеет в своем комплекте готовый сниппет для вывода присвоенных значений. Сниппет делает выборку на основе названия полей, в нашем случае это:

1
2
3
4
[[+logo]]
[[+address]]
[[+phone]]
[[+mail]]

Для организации выборки, необходимо прописать код:

1
2
3
4
[[!getImageList?
&tvname=`company_base_data`
&tpl=`company_data`
]]

Указываем название MIGX TV, а также tpl для вывода информации из полей, используя указанные выше сниппеты.

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

Урок вышел довольно длинный, надеюсь вы смогли получить ту информацию, которая необходима вам для реализации собственных проектов.