Делаем каталог на CMS MODx ( Ditto + PHx )

Для работоспособности, приведённого ниже примера каталога на CMS MODx, необходимо установить плагин PHx
Пример структуры каталогаЭтот пример позволяет формировать структуру каталога автоматически, без какого либо участия со стороны администратора сайта. Редакторам остаётся лишь наполнить каталог добавляя папки ( дочерние ресурсы контейнеры) или простые документы ( дочерние ресурсы) .

Так как это решение базируется на ditto, то совсем не трудно развить этот пример до чего нибудь более интересного, например добавить теги или фильтрацию.

 

  

 

 

 
1) Создаём папку в дереве документов modx ( контейнер документов ), где у нас будет находиться каталог

2) Создаём шаблон для отображения каталога и для этого шаблона создаём две переменные ( tv )
cat - тип текст , значение по умолчанию - @CHUNK catalog
catimage - тип image  ( поле для ввода пути к изображению ) , визуальный компонент- image.

3) создаём чанк catalog 

  1.  
  2. [*isfolder:is=`1`:then=`
  3. <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>
  4.  
  5. <div class="catdocs">
  6. [!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`!]
  7. </div>
  8. `*]
  9.  

Содержимое чанка выполняется если текущий документ папка (текущий ресурс - контейнер).
&noResults=`{{ditto_empty}}` - чанк из которого берётся содержимое в случае если не найдены дочерние документы. Можно обойтись пробелом.
Первый запрос выводит только папки , второй только документы в текущей папке.
То есть вначале - каталог , ниже содержимое категории.

4) Выводим картинку и название категории, ниже список подкатегорий.
Cоздаём чанк catalog_tpl 
  1.  
  2. <div class="block_category">
  3. <span class="catimage">[+catimage+]</span><span class="category">
  4. <a href="[(site_url)][~[+id+]~]">[+pagetitle+]</a><br />
  5. <span class="subcategory">
  6. [[Ditto? id=`sub[+id+]` &parents=`[+id+]` &display=`all` &save=`1` &tpl=`subcatalog_tpl` &filter=`isfolder,1,1` &noResults=`{{ditto_empty}}` &sortBy=`menuindex` &sortDir=`ASC` ]]
  7. </span></span>
  8. </div>
  9.  
 Выводим картинку и название категории, ниже список подкатегорий.

5) Формируем вывод подкатегорий . Создаём чанк subcatalog_tpl 
  1.  
  2. <span><a href="[(site_url)][~[+id+]~]">[+pagetitle+]</a></span>
  3.  

6) Создаём чанк catalog_content_tpl 
  1.  
  2. <a href="[(site_url)][~[+id+]~]">[+pagetitle+]</a><br />
  3. [+introtext+]<br /><br />
  4.  

7) Добавляем CSS 
  1.  
  2.     .catalog{
  3.         display: block;
  4.         float: left;
  5.         width: 100%;
  6.     }
  7.     .block_category{
  8.         padding: 10px 10px 10px 5px;
  9.         margin: 5px;
  10.         display: block;
  11.         background-color: #E6F4F8;
  12.         height: 90px;
  13.         width: 300px;
  14.         vertical-align: top;
  15.         float: left;
  16.  
  17.     }
  18.     .catimage{
  19.         float: left;
  20.     }
  21.     .category a{
  22.         font: bold 15px Verdana, Geneva, Arial, Helvetica, sans-serif;
  23.         text-decoration: none;
  24.     }
  25.     .subcategory a{
  26.         font: normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
  27.  
  28.     }
  29.  
  30.     .catdocs{
  31.       display: block;
  32.       float: left;  
  33.       width: 100%;
  34.     }
  35.  

В шаблон каталога вставляем вывод TV - [*cat*]

Пример того что получилось
Основное достоинство данного решения - автоматическое формирование всей структуры каталога, просто добавляем дочерние документы и папки в общее дерево документов modx.
Шаблон и переменные наследуются автоматически. Для картинок можно прикрутить directresize.

 

 

Чтобы вывести эту конструкцию на страницу вставляем вывод TV например так. 

  1.  
  2. <body>
  3. [*cat*]
  4. </body>
  5.  
Но лучше так: 
  1.  
  2. <body>
  3. {{header}}
  4. {{menu}}
  5. [*longtitle*]
  6. [*content*]
  7. [*cat*]
  8. {{bottom}}
  9. </body>
  10.  

Последнее изменение документа: 23 Октябрь 2009
Showing comments 1 to 10 of 43 | Next | Last
Alex
Posts: 32
Comment
Re: Делаем каталог на CMS MODx ( Ditto + PHx )
Reply #43 on : Втр Январь 17, 2012, 09:10:55
Сделал все по уроку, но:
- не выводятся картинки;
- создаются только категории, сами товары не отображаются;
- не создаются названия категорий в заговоловках, когда переходишь в нее (((
Николай
Posts: 32
Comment
Re: Делаем каталог на CMS MODx ( Ditto + PHx )
Reply #42 on : Пнд Сентябрь 19, 2011, 13:06:20
У данного решения только одно ограничение - он не резиновый. Объем символов описания строго ограничен. Если ввести большое колиество они выходят за границы ширины и высоты и описания наползают друг на друга или едут.

Никак не могу найти решение для каталога в 2 колони с произвольным количеством ячеек, чтобы соседние ячейки выравнивались по высоте, не подскажите?((
Regina
Posts: 32
Comment
Ditto
Reply #41 on : Птн Июнь 10, 2011, 07:54:45
Помогите, Плиз.
никак не могу настроить разбивку по страницам....

Для разбивки нужно чтоб ditto был кешируемый, если его делать таковым то каталог не работает, как быть??
Alex
Posts: 32
Comment
Re: Делаем каталог на CMS MODx ( Ditto + PHx )
Reply #40 on : Пнд Ноябрь 22, 2010, 12:25:42
никак не могу настроить разбивку по страницам
помогите
Alex
Posts: 32
Comment
Re: Делаем каталог на CMS MODx ( Ditto + PHx )
Reply #39 on : Вск Ноябрь 21, 2010, 22:37:22
Спасибо все работает
только как сделать разбивку по станицам
добавил параметры вот так


все равно не работает
sslesar
Posts: 32
Comment
Re: Делаем каталог на CMS MODx ( Ditto + PHx )
Reply #38 on : Сбт Ноябрь 20, 2010, 21:31:19
<base href="**"></base> звездочки убрать
sslesar
Posts: 32
Comment
Для тех, у кого слетает CSS
Reply #37 on : Сбт Ноябрь 20, 2010, 21:28:12
Для тех у кого слетает CSS/
Нужно проверить, чтобы в <head> шаблона стояло
<base href=""></base>
Ashok
Posts: 32
Comment
оформление страница продукта
Reply #36 on : Срд Сентябрь 29, 2010, 22:47:32
чанк catalog_content_tpl показывает список документов в папке. а как следать так чтобы если открыть документ (т.е. нажимаем <a href=""></a>), то на странице продкута были доступны другие параметры TV (например стоимость, размер) и оформить страницу по готовому чанку (например чанк product_tpl - где уже написано в каком месте фото, прайс, описание и т.д. данного документа показываются).
IZE
Posts: 32
Comment
Re: Делаем каталог на CMS MODx ( Ditto + PHx )
Reply #35 on : Чтв Август 19, 2010, 08:31:05
В принципе тоже самое реализовал на Modx Revo, единственно в чем сложность щас - дак это в чанке сatalog ибо PHx нет для Revo, пробовал через плагинчик If, но чет не то получатся. + в Ditto почему-то криво работают фильтры. Кто-нить пробовал еще на Revo подобное реализовывать?
IZE
Posts: 32
Comment
Re: Делаем каталог на CMS MODx ( Ditto + PHx )
Reply #34 on : Пнд Август 16, 2010, 07:01:21
Есть подобный пример для Modx Revo?
Showing comments 1 to 10 of 43 | Next | Last

Write a comment

  • Required fields are marked with *.

If you have trouble reading the code, click on the code itself to generate a new random code.