Шаблоны материалов JBZoo — принцип работы и кастомизация

Данная статья является кратким и емким описанием того, где и как правильно редактировать шаблоны материалов JBZoo. При этом в будущем у вас не будет проблем с обновлением приложения. Т.е. все описанное ниже — это не хак, а обычное дело при кастомизации внешнего вида вашего сайта. Настоятельно рекомендуется прочитать статью об основах кастомизации JBZoo. Внимание! Далее в статье путь media/zoo/applications/jbuniversal/templates/catalog/ будет заменен на .../.

Где лежат шаблоны материалов?

Файлы разметки для материалов могут быть двух типов — общие или индивидуальные для типа материала. Шаблонизатор сначала проверяет существование папки для типа .../renderer/item/<ПСЕВДОНИМ ТИПА МАТЕРИАЛА>/.

Если не находит, то берет шаблоны по умолчанию из директории .../renderer/item/.

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

Какой файл за что отвечает?

Шаблоны:

• full.php — детальная страница материала.

• teaser.php — если материал отображается как элемент категории.

• related.php — связанные материалы (по умолчанию).

• subcategory_item.php — если материал отображается как элемент подкатегории.

• compare.php — сравнение товаров (должен быть пустой), важен факт существования.

• submission.php — шаблон формы подачи материалов.

• favorite.php — для списка избранного.

• feed.php — текст описания для RSS.

Системные файлы:

• metadata.xml — название шаблонов и их описание. Отображается в панели управления.

• positions.config — файл хранит настройки всех позиций для всех шаблонов всех типов материалов в Zoo. Лучше файл не изменяйте, иначе только на свой страх и риск. Этим по умолчанию занимаются сами Zoo и JBZoo.

• positions.xml — описание всех позиций для всех шаблонов (подробнее смотрите ниже).

• index.html — стандартная заглушка Joomla на случай, если htaccess не работает.

Каждый шаблон материала Zoo должен в себе содержать только основную разметку, детали дизайна и возможно какой-то общий текст. В разметку включаются позиции, в которые потом вставляются необходимые элементы. Это как раз то, что вы настраиваете в панели управления.

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

<?php if ($this->checkPosition('position-name')) : ?>
<ul><?php echo $this->renderPosition('position-name', array('style' => 'list')); ?></ul>
<?php endif; ?>

array(’style’ => ’list’) — это необязательный аргумент, через который можно указать стиль вывода каждого элемента.

Доступны следующие стили позиции:

• default — по умолчанию выводится как есть (не обязательно указывать).

• block — обрамление тегами <div>.

• comma — обрамление тегами <span> и разделение через «,».

• hyphen — разделение через короткое тире (минус).

• inline — обрамление тегами <span>.

• list — обрамление тегами <li> для создания списка.

• paragraph — обрамление тегами <p> для создания параграфов.

• pipe — разделение через символ «|».

• submission.block — обязательно указывать для позиций формы подачи материалов.

Как добавить свой стиль для элементов позиции?

Примеры можно найти тут components/com_zoo/renderer/element/

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

.../renderer/element/

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

.../renderer/item/<ПСЕВДОНИМ ТИПА МАТЕРИАЛА>/positions.xml

В нем вы увидите следующее:

<?xml version="1.0" encoding="utf-8"?>
<renderer>
   <positions layout="full">  <!-- начало блока шаблона full, описание его позиций -->
      <position name="title">Title</position> <!-- Системное название позиции задается в атрибуте name, в теге указывается имя позиции для панели управления -->
      <position name="image">Image</position>
      <position name="company">Company</position>
      <position name="list">List</position>
      <position name="text">Text</position>
   </positions>
   <positions layout="related"> <!-- Тоже самое, но указывается что шаблон можно использовать для связных элементов -->
      <position name="title">Title</position>
      <position name="photo">Photo</position>
      <position name="rating">Rating</position>
      <position name="contacts">Contacts</position>
   </positions>
</renderer>

Измените позиции на свое усмотрение. Вставьте код позиции в шаблон, например так:

<?php if ($this->checkPosition('position-name')) : ?>
    <?php echo $this->renderPosition('position-name'); ?>
<?php endif; ?>

Зайдите в панель управления и перетащите на нужную позицию свои элементы. Каждый элемент может иметь свои настройки рендеринга.

Как изменить файл metadata.xml?

.../renderer/item/<ПСЕВДОНИМ ТИПА МАТЕРИАЛА>/metadata.xml

<?xml version="1.0" encoding="utf-8"?>
<metadata>
   <layout name="full"> <!-- тип шаблона, в атрибуте name-->
      <name>Full</name> <!-- Имя шаблона для панели управления -->
      <description>Full layout</description> <!-- Описание шаблона для панели управления -->
   </layout>
   <layout name="teaser" type="related"> <!-- тоже самое, в атрибуте type можно указать особенность использования шаблона (related, feed, submission, compare) -->
      <name>Teaser</name>
      <description>Teaser layout</description>
   </layout>
</metadata>