Отображение ресурсов в виде сетки с помощью Collections в MODX

Содержание:
  1. Назначение и основные принципы работы с MODX-дополнением Collections
  2. Создание табличного представления дочерних ресурсов
  3. Справка по полям страницы "Изменить вид"
  4. Комментарии

Урок, в котором познакомимся с дополнением CMS MODX Revo Collections.

Назначение и основные принципы работы с MODX-дополнением Collections

Collections (коллекции) - это компонент для CMS MODX Revolution, который скрывает показ дочерних ресурсов в дереве админки и организовывает их вывод в родительском объекте посредством таблицы. Другими словами он позволяет перевести стандартное представление дочерних ресурсов в табличный вид.

Осуществляет это действие компонент Collection только для тех родительских ресурсов, у которых в качестве типа установлено значение "Коллекция". Выставление данного значения осуществляется на вкладке "Настройки" из раскрывающего списка "Тип ресурса".

MODX Collections - Установка полю Тип ресурса значения Коллекция

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

MODX Collections - Отображение дочерних элементов ресурса в виде таблицы

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

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

Столбцы, определяющие вид таблицы, которая используется для отображения коллекции Видеоматериалы

Просмотр существующих коллекций или создание новых осуществляется на странице "Виды коллекций" (в главном меню выбрать Приложения -> Виды коллекций).

MODX Revo Collections - Виды коллекций

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

Установление ресурсу в качестве вида для отображения дочерних ресурсов коллекции Видеоматериалы

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

MODX Collections - Вложенные коллекции

Ещё одно достоинство компонента MODX Revolution Collections, как уже было отмечено выше, связано с тем, что он не отображает дочерние ресурсы в дереве админки. Это свойство компонента Collections позволяет не только очень сильно разгрузить дерево ресурсов, но и увеличить быстродействие админки в целом. Особенно это характерно для проектов насчитывающих очень большое количество ресурсов.

Кроме этого, дополнение Collection поддерживает режим Drag'n'Drop, который позволяет добавить в коллекцию ресурс, не имеющий детей, посредством простого перетаскивания.

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

Создание табличного представления дочерних ресурсов

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

Но перед тем как приступать к работе с компонентом Collections его нужно сначала установить в систему MODX Revo.

Основные шаги:

1. Создание новой коллекции для представления дочерних ресурсов в виде таблицы. Данный шаг выполняется на странице "Виды коллекций" (Приложения -> Виды коллекций). На этой странице отображаются все существующие коллекции компонента Collections. По умолчанию после установки уже доступна (подготовлена для использования) коллекция для статей блога под названием "Blog". Создание новой коллекции осуществляется с помощью кнопки "Новый вид". Например, создадим коллекцию "Видеоматериалы".

2. Настройка коллекции "Видеоматериалы". Осуществляется эта операция на странице "Изменить вид". На этой странице осуществляется как настройка общих параметров, так и таблицы, посредством которой будут выводиться и управляться дочерние ресурсы.

В качестве значений основных параметров укажем следующие значения:

  • название: видеоматериалы;
  • описание: коллекция для представления видеоматериалов на сайте (дата публикации, картинка к уроку, название видео, продолжительность видео);
  • задать как вид по умолчанию: нет;
  • размер страницы: 10;
  • поле сортировки: publishedon.
  • направление сортировки: По возрастанию.

Настройку столбцов, которые будут использоваться для формирования таблицы, произведём в нижней части страницы "Изменить вид".

Заголовок Название Ширина Рендерер
id (скрытый) id 20
Дата публикации publishedon 20 Collections.renderer.datetimeTwoLines
Изображение tv_imageVideo 15 Collections.renderer.image
Название pagetitle 100 Collections.renderer.pagetitleWithButtons
Длительность tv_durationVideo 20

При указании TV-полей необходимо использовать префикс tv_.

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

  1. Перейти на вкладку "Настройки" и выбрать из раскрывающего списка "Тип ресурса" пункт "Коллекция".
  2. На вкладке "Настройки" в разделе "Коллекции" выбрать из раскрывающего списка "Вид коллекции" необходимый вид (в данном случае "Видеоматериалы").

Справка по полям страницы "Изменить вид"

Поля, с помощью которых задаются общие настройки коллекции:

  • Название - имя коллекции.
  • Описание - поле, которое позволяет сохранить поясняющую информацию об назначении этой коллекции.
  • Задать как вид по умолчанию. Значение "Да" будет означать то, что данная коллекция будет устанавливаться в качестве вида дочерних ресурсов по умолчанию.
  • По умолчанию для шаблонов - указывает, что этот вид необходимо использовать по умолчанию при создании новой коллекции, если она имеет указанный MODX шаблон. При необходимости вид коллекции можно изменить. Осуществляется это посредством раскрывающего списка, расположенного на вкладке ресурса "Настройки" в секции "Коллекции".
  • Поле сортировки - указывает имя поля, которое будет по умолчанию определять порядок вывода (сортировку) записей (ресурсов) таблицы.
  • Направление сортировки - задаёт направление сортировки по умолчанию.
  • Размер страницы (при пагинации) - определяет, какое количество дочерних ресурсов может быть выведено на одной странице.
  • Разрешить массовые действия - добавляет в таблицу флажки для множественного выбора ресурсов и массовые действия, которые можно применить к этому выбору.
  • Разрешить перетаскивание - позволяет помещать ресурсы, не имеющие детей, в коллекцию, путём их перетаскивания с помощью мыши.
  • Место расположения контента - позиция, в которой необходимо располагать стандартное поле ресурса content.
  • Надпись вкладки - настройка названия вкладки, в которой будут отображаться дочерние ресурсы.
  • Пункты контекстного меню - название элементов, которые необходимо отобразить в контекстном меню (вызывается контекстное меню посредством нажатия правой кнопки мыши в области принадлежащей таблицы).
  • Кнопки - список, содержащий названия кнопок, которые необходимо отобразить рядом с заголовком ресурса (если используется соответствующий ренедерер).

Элементы, посредством которых задаются настройки коллекции:

  • Выбор типа ресурса – добавить к кнопке "Создать дочерний ресурс" выпадающий список, с помощью которого можно выбрать тип создаваемого ресурса.
  • Тип дочерних ресурсов по умолчанию - устанавливает, какой тип ресурса использовать по умолчанию при создании дочерних ресурсов.
  • Шаблон дочерних ресурсов по умолчанию - указывает, какой шаблон необходимо устанавливать дочерним ресурсам во время их создания по умолчанию.
  • Надпись кнопки создания дочерних ресурсов - задание необходимой надписи кнопки "Создать дочерний ресурс".
  • Разрешённые типы ресурсов - указывает, какие типы ресурсов (через запятую) можно создавать с помощью выпадающего списка кнопки "Создать дочерний ресурс", если параметр "Выбор типа ресурса" установлен в положение "Да".

Название элементов, которые используются при создании столбцов таблицы:

  • Заголовок (строка или ключ переменной словаря MODX) - название колонки в таблице.
  • Название - имя поля ресурса из modResource, TV переменная (префикс tv_, имя TV не должно содержать точку), или любой псевдоним Tagger (префикс tagger_).
  • Скрытый. Если установить переключатель в положение "Да", то этот столбец не будет отображаться в таблице.
  • Сортировка. Если перевести данный параметр в состояние "Да", то пользователю будет предоставлена возможность сортировки таблицы в соответствии со значениями этого столбца.
  • Ширина - ширина столбца.
  • Редактор - (строка) Xtype или (объект) JSON валидный редактор, с помощью которого пользователь сможет редактировать данные прямо в таблице.
  • Рендерер - имя функции, которая будет использоваться для визуального отображения данных поля в ячейке таблицы.
  • Позиция - порядковый номер столбца в таблице.

В качестве редакторов таблицы может использоваться любой корректный Xtype (строка) или объект JSON.

По умолчанию доступны следующие виды редакторов:

  • textfield (для текстовых полей).
  • textarea (для текстовых областей).
  • modx-combo-boolean (для установки логического значения "Да" или "Нет").
  • numberfield или {"type": "number field", "allowDecimals": false, "allowNegative": false} (для числовых полей).

Рендереры (функции), посредством которых осуществляется представление данных дочерних ресурсов в полях таблицы:

  • this.rendYesNo - Да/Нет (1/0), используется для вывода логических значений.
  • Collections.renderer.qtip - отображает значения поля в виде подсказки (при наведении). Обычно используется для вывода полей, содержащих большое количество символов.
  • Collections.renderer.pagetitleWithButtons - заголовок (pagetitle) ресурса (в h2 элементе) со ссылкой "Редактирование" и кнопками для обновления (update), просмотра (view), удаления (delete), публикации (publish).
  • Collections.renderer.pagetitle - заголовок (pagetitle) ресурса (в h2 элементе) со ссылкой "Редактирование".
  • Collections.renderer.pagetitleLink - заголовок (pagetitle) ресурса со ссылкой "Редактирование" (текст заголовка меньше чем h2).
  • Collections.renderer.datetimeTwoLines - выводит поле, содержащее дату и время в 2 строки. На первой строке отображает дату, а на второй - время. Отображение даты и времени форматируется в соответствии с системными настройками MODX Revolution.
  • Collections.renderer.datetime - выводит дату и время на одной строке. Отображение даты и времени форматируется в соответствии с системными настройками MODX Revolution.
  • Collections.renderer.image - выводит поле, содержащее изображение, в виде миниатюры.

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

Saha
Saha
Здравствуйте, для вывода новостей на сайте используется Collections пункт news Пункт меню Новости. Нажимаем новости все нормально все новости выводятся из коллекции. К примеру хочу добавить новую коллекцию называю ее oborudovanie получаем news/oborudovanie/ все новости из коллекции выводятся. Но когда я открываю все новости то получатся что у меня oborudovanie выводятся как новость
тоесть название созданной коллекции отображается как новость
Алексей
Алексей
Добрый день. Я назначил collection корневой папке каталога, а туда вложены папки (разделы) с товарами(ресурсами). Сейчас выводятся только папки, чтобы увидеть товары, нужно заходить в разделы. Подскажите можно ли вывести в один список все ресурсы из вложенных папок?

Спасибо
Игорь
Игорь
А как-то можно вывести в коллекции изображение, но так, чтобы его можно было прям из коллекции загружать (без перехода в ресурс). Что-то ничего нигде не нахожу такого варианта. Если что, готов за такое заплатить даже.
Amsterdam
Amsterdam
Александр доброго дня!

Не могу понять, как редактировать выводимые данные ресурса прямо из таблицы? Что бы не заходить внутрь. Например, изменить заголовок по двойному клику на него, или по нажатию на кнопку.

Сейчас, любое редактирование перебрасывает на страницу дочернего ресурса, и преследуемая цель по редактированию не заходя на страницу ресурса, не реализуется
Amsterdam
Amsterdam
Понял — в поле «редактор» вставляем textfield. А возможно ли сделать вывод заголовка в таблице как Collections.renderer.pagetitleWithButtons, то есть с кнопками и в h2, но что бы по клику не проваливалось на редактирование страницы?
Дмитрий
Дмитрий
Здравствуйте, я вывел поле — категории в collection(это тв — список множественный выбор) prntscr.com/qf3mnq, как теперь его сделать редактируемым не заходя внутрь, я так понимаю в редакторе нужно что типо этого {«xtype»:«superboxselect»… }, но не до конца понял как это сделать, вообщем неполучаеться, подскажите или может есть более простое решение для массового редактирования категорий?
Сергей
Сергей
Добрый день.
Есть ли информация как изменить форму быстрого создания ресурса?
Дмитрий
Дмитрий
Здравствуйте, помогите решить проблему с этим дополнением, установил его на сайт, все работает норм, кроме, того что вывел поле цена и оно доступно для быстрого редактирования в админке, поле редактируется, но обновленное значение не сохраняется, выдает ошибку
ext-all.js:21 Uncaught RangeError: Maximum call stack size exceeded
    at encodeString (ext-all.js:21)
    at doEncode (ext-all.js:21)
    at doEncode (ext-all.js:21)
    at Object.encode (ext-all.js:21)
    at encodeArray (ext-all.js:21)
    at doEncode (ext-all.js:21)
    at doEncode (ext-all.js:21)
    at doEncode (ext-all.js:21)
    at doEncode (ext-all.js:21)
    at doEncode (ext-all.js:21)

Скрин: prntscr.com/p53y7u
Скрин настроек вида коллекции: prntscr.com/p5401o
Александр Мальцев
Александр Мальцев
Привет! Версия случайно не 3.7.0? Если так, то откатывайся на Collections версии 3.5.0. Если откатиться нельзя, то скачай версию 3.5.0 с github, а затем установи её в MODX через загрузку пакетов.
Дмитрий
Дмитрий
привет, да имено 3.7.0! поставил 3.5.0 prntscr.com/p6svx4, всеравно ошибка также Uncaught RangeError: Maximum call stack size exceeded
at encodeString (ext-all.js:21)
at doEncode (ext-all.js:21)
at doEncode (ext-all.js:21)
at doEncode (ext-all.js:21)
at doEncode (ext-all.js:21)
at doEncode (ext-all.js:21)
at doEncode (ext-all.js:21)
at Object.encode (ext-all.js:21)
at encodeArray (ext-all.js:21)
at doEncode (ext-all.js:21)

скрин: prntscr.com/p6st51
Александр Мальцев
Александр Мальцев
Тогда не знаю, у меня в Collection версии 3.5.0 tv-поля редактируются. Попробуйте как вариант очистить кэш MODX, зайти в админку используя режим инкогнито в браузере, и выполнить ещё раз редактирование tv-поля.
Дмитрий
Дмитрий
вот именно так и сделал и в режиме инкогнито зашел и все работает норм, спасибо за подсказку!!!
Сергей Сергеевич
Сергей Сергеевич
Подскажите, а можно как-то вывести изображение загруженное в ресурс с помощью ms2gallery?
Димыч
Димыч
В настройках коллекции добавляете столбец для фото, в свойства отображения в поле «Сниппет-рендерер» ставите сниппет, к примеру

<?php
$imgName = $modx->getOption('value', $scriptProperties, '');
$row = $modx->getOption('row', $scriptProperties, '');
$img = $modx->runSnippet('ms2gallery', array(
	'tpl' => 'collection-img',
	'limit' => '1',
    'resource'=> $row['id'],
));
return $img;
Чанк collection-img

<img src="{$files[0].small}" class="img-responsive">
Димыч
Димыч
это лишнее — $imgName = $modx->getOption('value', $scriptProperties, '');
Владимир
Владимир
Доброго времени суток. Подскажите как настроить под себя фильтр на странице коллекции.
А именно: есть тв-поле, которое рендерится в таблицу коллекции и хочется сделать возможность фильтровать по этому значению( так как это тв поле имеет фиксированные 4 значения ), но по дефолту можно фильтровать только — опубликованные/снятые с публикации/ удаленные. скрин для уточнения ниже
Андрей Шевяков
Андрей Шевяков
Добрый день!
Не выводит изображение.

Скрин:

Настройки:

url картинки выводится без site_name.ru/…
У изображений свой Источник файлов.
В чем может быть проблема?
Александр Мальцев
Александр Мальцев
Попробуйте настроить источник, там есть параметры baseUrl и baseUrlRelative.
Alex DOM
Alex DOM
У меня тв с картинкой подвязан под отдельный медиа источник, поэтому я захожу:
Системные настройки → collections
Там есть Путь к изображению визуализации с ключем collections.renderer_image_path и прописываю ему значение baseUrl из медиа источника
Юрий
Юрий
Добрый день! Возникла проблема с выводом картинки в списке, сделал как Вы писали prntscr.com/fiqpvu
Но после этого вообще скрылись все ресурсы в коллекции. В чем может быть причина?
Серый
Серый
Извиняюсь, заметил опечаточку:
Название — имя поля ресурса из modResource, TV переменная (префикс tv_, имя TV не должно содержать точку), или любой псевдоним Tagger (префикс tagger_).
Точней будет так: «Или любой псевдоним (alias) ГРУППЫ Tagger`a»
taras
taras
Спасибо.
А как вывести на сайт коллекцию?
Александр Мальцев
Александр Мальцев
Вывод осуществляется также как и любых других ресурсов. Можно писать свои сниппеты или использовать pdoResources или getResources.
Например, вывести pagetitle ресурсов можно с помощью pdoResources так (в parents указываете родительский id ресурса):
[[!pdoResources?
  &tpl=`@INLINE <p>[[+idx]] <a href="/[[+uri]]">[[+pagetitle]]</a></p>`
  &parents=`13`
]]
taras
taras
Не подскажешь можно ли в pdo каждые 4 итама вставлять div class=«clearfix»?
Александр Мальцев
Александр Мальцев
Можно использовать параметр &tpl_n4=`...`. Указанный в параметре чанк будет использоваться для вывода каждого 4 ресурса.
Егор
Егор
Спасибо! Хорошая статья, все наглядно и понятно.
Единственно, немного вначале запутался, не мог найти где искать кнопку «Изменить вид».
Нашел потом в списке видов коллекций на виде нужно нажать правой кнопкой мыши и уже там выбрать этот пункт.