Делаем каталог на CMS MODx ( Ditto + PHx )
Для работоспособности, приведённого ниже примера каталога для сайта на CMS MODx, необходимо установить плагин PHx
[248x340]Этот пример позволяет формировать структуру каталога автоматически, без какого либо участия со стороны администратора сайта. Редакторам остаётся лишь наполнить каталог добавляя папки ( дочерние ресурсы контейнеры) или простые документы ( дочерние ресурсы) .
Так как это решение базируется на ditto, то совсем не трудно развить этот пример до чего нибудь более интересного, например добавить теги или фильтрацию.
1) Создаём папку в дереве документов modx ( контейнер документов ), где у нас будет находиться каталог
2) Создаём шаблон для отображения каталога и для этого шаблона создаём две переменные ( tv )
cat - тип текст , значение по умолчанию - @CHUNK catalog
catimage - тип image ( поле для ввода пути к изображению ) , визуальный компонент- image.
3) создаём чанк catalog
-
-
[*isfolder:is=`1`:then=` -
<div class="catalog">[!Ditto? id=`cat[*id*]` &parent=`[*id*]` &display=`all` &tpl=`catalog_tpl` &filter=`isfolder,1,1` &noResults=`{{ditto_empty}}` &sortBy=`menuindex` &sortDir=`ASC`!]</div> -
-
<div class="catdocs"> -
[!Ditto? id=`doc[*id*]` &parent=`[*id*]` &paginate=`1` &display=`all` &tpl=`catalog_content_tpl` &filter=`isfolder,1,2` &noResults=`{{ditto_empty}}` &sortBy=`menuindex` &sortDir=`ASC`!] -
</div> -
`*] -
Содержимое чанка выполняется если текущий документ папка (текущий ресурс - контейнер). &noResults=`{{ditto_empty}}` - чанк из которого берётся содержимое в случае если не найдены дочерние документы. Можно обойтись пробелом. Первый запрос выводит только папки , второй только документы в текущей папке. То есть вначале - каталог , ниже содержимое категории. 4) Выводим картинку и название категории, ниже список подкатегорий. Cоздаём чанк catalog_tpl
-
-
<div class="block_category">
-
<span class="catimage">[+catimage+]</span><span class="category">
-
<a href="[(site_url)][~[+id+]~]">[+pagetitle+]</a><br />
-
<span class="subcategory">
-
[[Ditto? id=`sub[+id+]` &parents=`[+id+]` &display=`all` &save=`1` &tpl=`subcatalog_tpl` &filter=`isfolder,1,1` &noResults=`{{ditto_empty}}` &sortBy=`menuindex` &sortDir=`ASC` ]]
-
</span></span>
-
</div>
-
Выводим картинку и название категории, ниже список подкатегорий. 5) Формируем вывод подкатегорий . Создаём чанк subcatalog_tpl
-
-
<span><a href="[(site_url)][~[+id+]~]">[+pagetitle+]</a></span>
-
6) Создаём чанк catalog_content_tpl
-
-
<a href="[(site_url)][~[+id+]~]">[+pagetitle+]</a><br />
-
[+introtext+]<br /><br />
-
7) Добавляем CSS
-
-
.catalog{
-
display: block;
-
float: left;
-
width: 100%;
-
}
-
.block_category{
-
padding: 10px 10px 10px 5px;
-
margin: 5px;
-
display: block;
-
background-color: #E6F4F8;
-
height: 90px;
-
width: 300px;
-
vertical-align: top;
-
float: left;
-
-
}
-
.catimage{
-
float: left;
-
}
-
.category a{
-
font: bold 15px Verdana, Geneva, Arial, Helvetica, sans-serif;
-
text-decoration: none;
-
}
-
.subcategory a{
-
font: normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
-
-
}
-
-
.catdocs{
-
display: block;
-
float: left;
-
width: 100%;
-
}
-
В шаблон каталога вставляем вывод TV - [*cat*]
Пример того что получилось Основное достоинство данного решения - автоматическое формирование всей структуры каталога, просто добавляем дочерние документы и папки в общее дерево документов modx. Шаблон и переменные наследуются автоматически. Для картинок можно прикрутить directresize.
Чтобы вывести эту конструкцию на страницу вставляем вывод TV например так.
-
-
<body> -
[*cat*] -
</body> -
Но лучше так:
-
-
<body>
-
{{header}}
-
{{menu}}
-
[*longtitle*]
-
[*content*]
-
[*cat*]
-
{{bottom}}
-
</body>