Основные принципы кастомизации в JBZoo и Zoo

Важно помнить, что JBZoo — это конструктор контента, который позволяет кликами мышки решить 80% задач при создании каталога на сайте. Для решения остальных 20% скорее всего нужно будет изменять шаблоны. Совершенно не нужно этого бояться, при создании сайтов это обычная рутина.

Все шаблоны лежат в media/zoo/applications/jbuniversal/templates/catalog/renderer/. Ниже в статье часть пути media/zoo/applications/jbuniversal/ будет заменена на …/

Далее познакомьтесь со схемой шаблона категории.

Откуда берется внешний вид для каталога JBZoo?

Сам JBZoo практически не навязывает никаких стилей. Все что идет в комплекте CSS — это вид базовых вещей (колонки, некоторые отступы, опциональные рамки, кнопки и т.д.). Все они объявлены в этом файле .../assets/css/jbzoo.css

Большинство стилей будет использоваться из вашего основного шаблона Joomla. Этому способствует семантическая верстка всех шаблонов (т.е. если это заголовок, то он будет в h1, подзаголовок h2, тексты в параграфах, таблица через table и т.д.).

Подключение своих стилей CSS и скриптов JavaScript

Создайте новые файлы (регистр важен!):
.../assets/css/jbzoo.<ПСЕВДОНИМ (АЛИАС) КАТАЛОГА>.css
.../assets/js/jbzoo.<ПСЕВДОНИМ (АЛИАС) КАТАЛОГА>.js

Псевдоним каталога можно посмотреть или изменить в настройка приложения

Также можно подключить отдельный CSS для формы поиска:
.../assets/js/jbzoo.filter.<АЛИАС ШАБЛОНА ФОРМЫ>.js
.../assets/css/jbzoo.filter.<АЛИАС ШАБЛОНА ФОРМЫ>.css

Файлы подключаться автоматически, только если это требуется приложению на текущей странице и если они не пустые. Рекомендуется использовать английские псевдонимы каталогов без спец символов (латиница, цифры и знак минуса «-»).

Рекомендации по работе с CSS и JavaScript

При работе с CSS все свои селекторы начинайте с класса .jbzoo-app-<ПСЕВДОНИМ (АЛИАС) КАТАЛОГА>

Например так:

.jbzoo-app-flat .photo-agent {
    float:left;
    margin-right: 10px;
}

JBZoo сгенерирует очень много классов на все случаи жизни для удобства разработки. Рекомендуем использовать дивную верстку (теги <div>).

При работе с JavaScript:

1. Используйте jQuery. Заворачивайте свой код в следующую конструкцию:

jQuery(function($){
    // Ваш код, будет доступен jQuery через переменную "$"
});

2. Не используйте несколько jQuery подключений на странице. Тот что подключит компонент Zoo — обычно последняя версия. Иначе рискуете сломать все виджеты на сайте.

Чтобы заменить иконку каталога в панели управления, создайте файл PNG (регистр важен!). Иконка должна быть размером 64×64px

.../assets/app_icons/<ПСЕВДОНИМ (АЛИАС) КАТАЛОГА>.png

Изменение шаблонов JBZoo без хаков

Допустим мы хотим сделать свой шаблон категории. Он лежит тут.

.../templates/catalog/renderer/category/_default.php

Чтобы сделать свой шаблон для каталога скопируйте файл _default.php в эту же папку и назовите его <ПСЕВДОНИМ (АЛИАС) КАТАЛОГА>.php

Теперь он подключится автоматически, можете менять его на свое усмотрение и не бояться, что он сотрется при обновлении.

Допустимые имена файлов шаблона

Вопрос тесно связан с предыдущим. Например, для категорий можно использовать следующие имена (В порядке приоритета)

• <ПСЕВДОНИМ КАТАЛОГА>.<ПСЕВДОНИМ КАТЕГОРИИ>.php

• <ПСЕВДОНИМ КАТАЛОГА>.<ID КАТЕГОРИИ>.php

• <ПСЕВДОНИМ КАТАЛОГА>.php

• _default.php

Таким образом, можно для каждой категории сделать свой шаблон.

Примечание. Не все шаблоны имеют столько вариантов, т.к. не у всех сущностей есть алиас или ID.

Точно для всех будет работать вариант <ПСЕВДОНИМ КАТАЛОГА>.php.

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

Как изменить враппер вокруг каждого материала?

У каждого материала может быть тег-враппер, который добавляет множество классов для удобства верстки. Сам тег задается в настройках каталога (по умолчанию — <div>).