General principles and concepts of JBZoo customization

It is important to remember that JBZoo is a content constructor. It allows you to solve 80% of catalogue creation tasks simply by mouse clicking. To solve other 20% you will probably need to modify templates. There are some recommendations below.
 
Information below will save you from a lot of trouble during update and customization of your catalogue.
 
 
Where are templates located?
media\zoo\applications\jbuniversal\templates\catalog\renderer\*
 
 
What affects JBZoo appearance?
JBZoo by itself almost doesn't apply any style. All that comes with its CSS is an appearance of some basic elements (columns, some margins, optional borders, buttons etc.).
Most styles will be applied from your main Joomla template. Semantic layout of all templates contributes to this (if it's a heading then it's h1, subheading is h2, texts are in paragraphs, table is table etc.).
 
 
How to properly include your CSS and JavaScript?
Create new files:
media\zoo\applications\jbuniversal\assets\css\jbzoo.<CATALOGUE ALIAS>.css
media\zoo\applications\jbuniversal\assets\js\jbzoo.<CATALOGUE ALIAS>.js
 
Also, you can include additional CSS for a search form:
media\zoo\applications\jbuniversal\assets\js\jbzoo.filter.<FORM TEMPLATE ALIAS>.js
media\zoo\applications\jbuniversal\assets\css\jbzoo.filter.<FORM TEMPLATE ALIAS>.css
 
These files will be loaded automatically (if the application needs them on the current page) if they are not empty. It is recommended to use only English letters without whitespaces or special symbols as catalogue aliases.
 
 
Are there any recommendations for working with CSS?
When you work with CSS, begin all your selectors with ".jbzoo-app-<CATALOGUE ALIAS>" class.
For example:

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

JBZoo will generate a lot of different classes for a convenient work with layout. Your layout should be based on divs.
 
 
Are there any recommendations for working with Javascript?
1. Use jQuery. Wrap your code in this structure:

jQuery(function($){
    // Your code. It will be accessible through "$"
});

2. Don't use several jQuery includes on one page. The one which is loaded by ZOO is usually the latest version. Otherwise, you risk breaking all widgets on your website.
 
 
How to change catalogue icon in the control panel?
Create a 64x64px PNG file in this location:
media\zoo\applications\jbuniversal\assets\app_icons\<CATALOGUE ALIAS>.png
 
 
How to change JBZoo template while keeping an ability to update painlessly?
For example, we want to make our own category template. It is located here:
media\zoo\applications\jbuniversal\templates\catalog\renderer\category\_default.php
To make a custom template for the specific catalogue, copy this file to the same folder and name it <CATALOGUE ALIAS>.php.
Now it will be loaded automatically. And you can modify it however you wish without worrying that it will be overwritten during update.
 
 
What other file names are allowed?
This question is closely related with the previous one.
For example, you can use following names for categories (ordered by priority):

• <CATALOGUE ALIAS>.<CATEGORY ALIAS>.php
• <CATALOGUE ALIAS>.<CATEGORY ID>.php
• <CATALOGUE ALIAS>.php
• _default.php

This way each category can have its own template.
 
Notice
Not all templates have so many variants because not all entities have alias or ID.
Following definitely works with everything:

• <CATALOGUE ALIAS>.php
• _default.php

Can I use one template in several places at the same time without copying it like in the previous example?
Yes. In order to do this, you can explicitly select it in the category or catalogue settings.
 
 
How to change a wrapper around each item?
Each item may have a wrapper which adds a lot of classes for your convenience. This tag is set in the catalogue settings:
 

 
It is div by default.

Сообщение отредактировал SmetDenis: 20 September 2013 - 23:38