воскресенье, 8 марта 2015 г.

Collections в ModX. Обзор возможностей, конфигурация для интернет магазина

Collections - дополнение для modx, создающее отдельную вкладку на странице редактирования ресурса для отображения дочерних ресурсов в виде подробной таблички с выводом и удобными возможностями изменения всех нужных полей(и основных и дополнительных).

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

Как зайти в менеджер видов:

При первом запуске в менеджере увидите стандартный вид "Blog", а на моем скрине вы также можете увидеть созданый мной "Products". Вы можете отредактировать имеющийся вид или создать новый.

На скрине ниже видно окно настроек вида

Мультивыбор "По умолчанию для шаблонов" позволяет автоматически устанавливаться данному виду для указанных шаблонов при выборе Типа ресурса "Коллекция". То есть мы заходим в редактирование ресурса, устанавливаем во вкладке "Настройки" Тип ресурса в "Коллекция" и после сохранения у нас появляется новая вкладка "Дочерние ресурсы", в которой и располагается табличка с видом "Products" если у ресурса шаблон "Подкатегория".
Поле "Размер страницы" устанавливает количество строк таблицы при постраничном выводе;
В "Поле сортировки" установлено значение menuindex, чтобы можно было управлять порядком вывода ресурсов(по средством перетаскивания или через столбец "Позиция", как у меня);
Остальные поля кроме таблицы столбцов думаю в объяснении не нуждаются.
В табличке же мы конфигурируем столбцы: их отображение и динамические редакторы(которые позволяют прямо в теле таблицы редактировать поля ресурсов)
Ниже я представлю свою конфигурацию, которую я обычно использую для интернет магазинов:
Заголовок
Название
Ширина
Редактор
Рендерер
Изображение
tv_image
20
-
Collections.renderer.image
Название
pagetitle
100
textfield
Collections.renderer.pagetitle
Описание
description
50
textarea
Collections.renderer.qtip
Цена
description
15
numberfield
h2
Опубликован
published
20
modx-combo-boolean
this.rendYesNo
Позиция
menuindex
15
numberfield
-

"Название" в этой таблице означает имя поля ресурса(основного или дополнительного). Для того чтобы использовать дополнительное поле нужно использовать приставку tv_ (это вовсе не часть имени доп. поля).
"Редактор" указывает как поле будет редактироваться прямо в табличке (редактор вызывается двойным кликом на поле). 
В случае pagetitle, в нашем случае, нужно кликать на свободное место в ячейке, так как рендерер установлен в "Collections.renderer.pagetitle", а он формирует ссылку на редактирования ресурса, поэтому не стоит нажимать на саму надпись заголовка если хочешь его оперативно отредактировать.
Судя по документации Collections у нас имеются такие редакторы в распоряжении:
  • textfield - однострочный текстовый редактор;
  • textarea - многострочный текстовый редактор;
  • modx-combo-boolean - рендедит "Да" или "Нет" в зависимости от того поле true или false соответственно;
  • numberfield - числовой редактор;
  • {“type”:”number field”,”allowDecimals”:false,”allowNegative”:false} - конфигурация для тонкой настройки (подробного разбора возможностей ни в документации ни в исходниках ни в интернетах не смог найти, буду благодарен если кто-то подскажет)
"Рендерер" указывает как поле должно отображаться в таблице. На момент написания статьи имеются такие возможности как:
  • this.rendYesNo - выбор булевого значения: Да/Нет;
  • Collections.renderer.qtip - при наведении показывает многострочный блок с текстом;
  • Collections.renderer.pagetitleWithButtons - заголовок размера h2 с кнопками редактирования, просмотра, удаления и публикации;
  • Collections.renderer.pagetitle - заголовок размера h2 со ссылкой на редактирование ресурса
  • Collections.renderer.pagetitleLink - тоже самое только меньше размером
  • Collections.renderer.datetimeTwoLines - вывод даты и времени(дата на первой, время на второй строке)
  • Collections.renderer.datetime - дата и время в одну строку
  • Collections.renderer.image - вывод изображения (странно что его нет в документации, хотя удивляться нечему она у них раскидана по блогам)
Есть возможность создать свой Рендерер с помощью JS функции, которая примет значение поля и должна будет вывести содержимое в том виде, в котором вы хотите.
Я создал для себя функцию h2, как вы можете видеть в моей табличке конфигурации. 

Поместил эту функцию в файл assets/js/collections.js и указал в Настройках системы путь до моего файла с функциями:

Так-же разработчики добавили возможность указать сниппет для рендера, но в настоящее время с ним проблема в редактирование полей через "Редактор", в частности при использовании сниппета таким образом:

Редактор предлагает редактировать <h2>Значение</h2>, и даже при удалении этих лишних тегов в редакторе и сохранении - на месте значения поля появляется пустое место, в общем советую использовать JS функции.

Во вкладке "Настройки коллекции" вы можете настроить еще много полезной шелухи, а во вкладке "Настройки подборки" можно немного настроить поведение при Типе ресурса "Подборка", в котором так-же табличкой отображаются не дочерние ресурсы а любые сторонние, которые можно привязать через соответствующее окошечко.

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

Каталог
---Деревянные сувениры
------Елочные игрушки
------Деревянные открытки
---Полиграфия
------Наборы открыток

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

Источники:
https://github.com/modxcms/Collections - репозиторий Collections на Github http://rtfm.modx.com/extras/revo/collections - официальная документация
http://modx.com/blog/2014/09/30/collections-easily-customizable-admin-views-for-content-types/ - блог, дополняющий документацию
http://www.bxr.cz/blog/collections-3/ - еще один блог, дополняющий документацию

Комментариев нет:

Отправить комментарий