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

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

Информация ниже поможет вам избежать лишней головной боли при обновлении и кастомизации каталога

Где лежат шаблоны?
media\zoo\applications\jbuniversal\templates\catalog\renderer\*

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


Как правильно подключить свои стили CSS и скрипты JS ?
Создайте новые файлы (регистр важен!)
media\zoo\applications\jbuniversal\assets\css\jbzoo.<ПСЕВДОНИМ (АЛИАС) КАТАЛОГА>.css
media\zoo\applications\jbuniversal\assets\js\jbzoo.<ПСЕВДОНИМ (АЛИАС) КАТАЛОГА>.js

Так же можно подключить отдельный CSS для формы поиска

media\zoo\applications\jbuniversal\assets\js\jbzoo.filter.<АЛИАС ШАБЛОНА ФОРМЫ>.js
media\zoo\applications\jbuniversal\assets\css\jbzoo.filter.<АЛИАС ШАБЛОНА ФОРМЫ>.css

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

Есть ли рекомендации по работе с CSS ?
При работе с 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 по следующему адресу (регистр важен!). Иконка размером 64x64px
media\zoo\applications\jbuniversal\assets\app_icons\<ПСЕВДОНИМ (АЛИАС) КАТАЛОГА>.png


Как изменить шаблон JBZoo, но при этом не потерять возможность обновиться без лишней головной боли?
Допустим мы хотим сделать свой шаблон категории. Он лежит тут.
media\zoo\applications\jbuniversal\templates\catalog\renderer\category\_default.php
Чтобы сделать свой шаблон для каталога
скопируйте файла "_default.php" в эту же папку и назовите его "<ПСЕВДОНИМ (АЛИАС) КАТАЛОГА>.php"
Теперь он подключиться автоматически, можете менять его на свое усмотрение и не бояться что он сотрется при обновлении.

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

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

Таким образом можно для каждой категории сделать свой шаблон.
Примечание. Не все шаблона имеют столько вариантов, т.к не у всех сущностей есть алиас или ID.
Точно для всех будет работать

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

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

Как изменить враппер вокруг каждого материала?
У каждого материала может быть враппер, который добавляет множество классов для удобства верстки.
Сам тег задается в настройках каталога



По умолчанию - <div>