Flexible templates

Website appearance is known to be quite an important thing and even sometimes crucial. Its design should be appealing and smart for users to feel free on your website and willing to read articles and buy things.

The question is: how to make a desired appearance without any experience? Or if you do have an experience, how to minimize required development? JBZoo template system is a perfect solution.

How categories may look like

Even though it’s not obvious, one way or another some of the most important webpages are categories. Here are some typical examples of the categories: news, product catalogs, real estate, FAQ sections, tables etc. Each element of the list is a preview to some item, while not always obvious. This is the reason why we have paid so much attention to the settings of the category appearance. To create a whole bunch of things on your website, you don’t have to work with code or even make a layout which greatly simplifies your task and increase development speed. To provide proofs, let’s just explore these powerful settings.

Main elements of categories

Category elements

Each category has a smart set of options which is almost always enough to display anything you need including:

  • Title
  • Subtitle
  • Teaser text
  • Image
  • Description

 

Description includes any content of the category. It can be designed whatever using an editor (for example, you can add an additional image, write a part of the text in italics etc.).

What category settings does JBZoo have?

JBZoo enables you to define settings of the whole catalog or a specific category. You can read more about this in the special article.

Hiding unnecessary things

Hiding unnecessary elements of a category

If you wish, you can hide unnecessary elements of a template such as a teaser, images etc.

For example, in this screenshot all elements of a category except a title are hidden.

Separation by columns

All items and categories can be divided into required number of columns. In the examples below products are divided into 2 columns, while their categories are divided into 3.

Products layout in two columnsCategories layout in three columns

Image position

To change an image position, you don’t have to necessarily change a code, having a ready-to-use option to align an image - to the left, to the right or in the center. Automatic image resizing will be helpful as well, assisting you to adjust an image of a random size to fit your design.

Images are aligned to the leftImages are aligned to the rightImages are centered

Sorting

You can sort out products by any random item field. You just need to specify a field and the sorting direction in the control panel, for example, to order by price, from the lowest one to the greatest or vice versa.

Sorting by custom fields

If you need to sort by the second parameter, JBZoo can do this as well. Take in account, If some items have an equal value for different objects, they will be sorted by the second parameter within these groups, which is handy for large websites or tables.

In the example in this screenshot we sorted real estate objects - first by the “Sale” tag, then by the number of bathrooms in the house and you can observe two groups of items, each of them sorted by the number of bathrooms.

It should be noted that all sortings are performed using database queries and are perfectly optimized. So you shouldn’t worry about the performance of your website.

Pagination

Pagination

Of course, you cannot fit all items on one page. For you convenience we have provided a smart pagination. If you wish, you can completely disable it and configure the sorting so that only most popular products are shown. As a result, you will have a simple list of popular selected products.

Page templates

Pagination

Being a frame of the page, template defines what kind of information is displayed on the website.

You don’t have to edit template files to display specific field on the page. You just need to drag this field to the desired position, just like in this screenshot to your right.

Find out more about JBZoo templates respectively.

Embedded widgets

Usually widget is an interactive part of the page which does not require reloading and can dynamically display information. Widgets are often used to increase ergonomics and convenience of the website.

To begin with, JBZoo is fully compatible with the Widgetkit component. It has a lot of beautiful and fancy widgets to fit any taste, each one with specific settings. We have also embedded some other widgets in JBZoo itself:

Tabs Accordion Sorting tables
Tabs
By simply dragging elements with a mouse you can place any of them in the tabs.
Accordion
With its help you can create a menu from a list of properties or a group of fields of a large form
Table sorting
We have added special buttons to quickly sort a table in ascending or descending order.

Technical convenience for development

If you look at the source code of our demo website, you will easily find out that its HTML has classes for almost all occasions. Their names are thoroughly thought over and generated on-the-fly, so you can easily find out what they are responsible for.

Each application has its own class wrapping all its pages. So you can effortlessly customize your catalogs without any interference. Almost all classes have jb or jbzoo prefixes in their names, which guarantees that if you install your template on a website with JBZoo, the classes of our application will not override template classes.

Page html example

Let’s examine responsibility of some classes on the small snippet of HTML:

  1. element-radio belongs to all “radio-button” elements. Same as element-date belongs to date elements.
  2. first means that this element is the first one on a list. There is also a “last” class, which is assigned to the last element.
  3. jbtable class wraps list of properties in a table layout.
  4. Almost every element or object has a unique identifier. By means of it you can pinpoint a single object and assign its own styles.
  5. jbzootabs class is applied to all JBZoo tabs widgets.

If you are against such ideas, you can override any part of the template and completely replace all HTML output. The code is well-structured, the files are put to different folders and named accordingly to their role. Each file of the template is responsible for its specific place on the website, so they are independent from each other and the whole website is flexible and convenient for a developer.