JBZoo category list module

7.5/10 rating (2 votes)

JBZoo Category List module is needed to display categories and items on a page as tabs or accordion. Below we’ll examine how to install and configure this module as tabs.

Installing the module

JBZoo Category List module should be already available in the Module Manager after you install JBZoo App. If for some reason you are unable to find it there, you just need to do some simple things.

Extension manager

Go to Extension Manager and click on the Discover tab there. At the top left corner click Discover.


Install discovered module

After the search finishes, added but not installed extensions should appear in the list. Our category module may be there too.

Mark a checkbox and press Install. After installation finishes, go to Module Manager and press New. Now our module should be in the list of available modules.

Creating new moduleJBZoo Cateory List module

Configuring JBZoo Category List module

Configuration of this module is pretty simple and typical for ZOO extensions. It can be divided in two stages.

1. Configuration of item templates

Item templatesTemplates are located in the Extension Layouts section of your item type.

Configuring template positionsBy default there are two templates: Default and Example. They are similar so there is no difference which one we’ll configure. These templates are configured in the same way like other ZOO and JBZoo templates simply by dragging elements to their positions with a mouse.

Template configuration can be finished now. Now we’ll configure the module itself.

2. Module configuration

Module configrationLet’s open module configuration. First three tabs (in Joomla 3 that is) are used for basic settings that almost all modules have. Here you can specify it’s name, position, assign menu items etc. On the Select the source tab there are settings of this particular module type.

Let’s examine every option:

  • Source (Parent) - all created JBZoo applications. When you choose an application, new tab with a list of categories will appear. There is one peculiarity here. In order to output some categories, you should choose their direct parent here. If all categories are top-level, then their direct parent is a Frontpage. Attention! This module doesn’t work recursively and is unable to use nested categories.
  • Item type. Different item types can be within one category so you can choose specific item types here.
  • Categories limit - limits the number of categories that you want to display in the module. If you set 0 then all categories will be displayed.
  • Items sorting - a field that will be used to sort items. There are two optional checkboxes here.
  • Items limit - same as categories limit. If you set 0, all items will be displayed.

Categories tree

So, for example, you have a following structure in your catalog and want to display all second-level categories.

In order to do this, use following settings in the Select the source tab:

  • Source (Parent): application - Product catalog, category - Product catalog.
  • Item type - product.
  • Categories limit - set 0 because we want to display all categories.
  • Items sorting - use a default value.
  • Items limit - same as categories - 0.

Now click on the Categories configuration tab:

Categories configuration

  • Categories sorting - how categories should be ordered.
  • Category image - whether to display/hide category image.
  • Image width - category image width in pixels.
  • Image height - category image height in pixels.
  • Category image alignment - image alignment.
  • Category teaser - whether to show/hide category description.
  • Number of items - displays a number of items in a category.

Use the default settings.

Next tab is Items configuration. It has only two options: Display items or not and Item image alignment. We want to remind that you can additionally configure item appearance in the module template configuration.

Next tab is Templates configuration. Choose a template for the module and for items. Since we already configured Default template for items, let’s choose it here. There are three templates for the module:

  • Default - default template. A category will be displayed first, then the items.
  • Accordion - jQuery accordion plugin is used. Category names and images are used as headers. Category description and its items are in the expandable blocks.
  • Tab - jQuery tabs plugin. Category names are used as headers. Category image and description, as well as its items are in the tabs.

Border option adds borders to the items blocks.

Last two tabs with settings are common for all modules. You can configure the caching and settings for Joomla template.

In the end there we’ll have a tabs with categories containing their items:

Example of the module on the website

Still gotta questions, who can help me?

Visit our special JBZoo tech support forum which is specifically meant for JBZoo so the priority of the response and its promptness are much better there than in any other place. With inactive account with a “Plus” sign in a tariff plan you can ask for support in one of these sections or use any of our contacts.