JBZoo Cascading Select - cascade (nested) SELECT elements

The quality of a website depends heavily on its convenience and simplicity. Its appearance should be light and unobtrusive and filters for finding content should be convenient. Filters can have various forms: slider, radio buttons, checkboxes etc. In this article we’ll talk about JBZoo Cascading Select element. It is used not only as a filter but it is also displayed within a content. Now we’ll describe this element in more detail and explain how it can be configured.

What are related (cascade) elements?

Cascade (nested) select is a complex element for ZOO that consists of several interrelated “select” elements where values of the next one depend on what was selected in the previous one.
For example, you can make such set of data as “Country — City — Street”. After a country is selected, a list of its cities are loaded in the second “select”. If a city is chosen, then the third “select” is filled with the list of streets of this city. Sometimes such element is much needed, that’s why we decided to add it to ZOO component..

Advantages:

• Nesting is unlimited, the chain of “selects” can be infinite;
• List of values is arbitrary and is set from the control panel;
• This element can be easily searched.

How to add JBZoo Cascading Select element in the ZOO item type?

Go to the “cog-wheel” tab in the control panel and choose “JBZoo App” in the application manager:

Find an item type that you want to configure. If you’ll hover mouse cursor over it, “Edit Elements” link should appear. Click it.

Choose “JBZoo Cascading Select” from the element library to the right. New element will appear on the left side.

Type a name for a filter in the “Name” field. It will be displayed on the website.

In the next field you can type a short “Description” that will be available only for administrator.

“Access level” determines who will be able to see this element on the website.

Below you can set a “Repeatable” option. It means that this element can be used multiple times within one item.

In the “Titles for each level” field you should type the titles of all levels that you need in a column.

In the “Item list” field you should type the contents of your SELECTs in a column. For example, all countries, cities and streets in such order: firstly goes a country name, next one is a city name, and the last one is a street name. After that you should repeat this for a next country etc. Each level is separated by additional hyphen

After you have finished the configuration, press “Save & Close” at the top.

Element configuration in the item template

Find your item type and in the “Template Layouts” column you’ll see item templates. Specify which one will have this element, for example, in the “Full” template.

Find your element in the “Custom” section to the right and drag it to the desired position. Click on a pencil icon to configure an element.

If you select “Yes” in the “Show Label” option, then the name of this element will be displayed on the website.

“Alternative Label” is a text for the label. You can set it if the default one is inappropriate for this template. Default label is a name that was specified during the creation of an element.

“Separated by” option determines what will separate repeatable elements. For example, if you select “div”, then each element will be wrapped in a “div”.

“Separator for the chain” determines a symbol that will separate words from different levels. In our example it is a hyphen.

For the “Display” option you can choose one of three variants of displaying repeatable elements:

• “all” (all elements will be displayed);
• “first” (only the first element will be displayed);
• “all without first” (all elements except the first one will be displayed).

In the “Template” option you can choose whether the whole chain will be displayed or only the last level.

In the result you can have an output that looks similar to this:

Element configuration in a filter template

Find your item type and choose one of the templates for “JBZoo Search”, for example, “Default”.

Drag your element into any position to the left and click a pencil icon to configure it.

“Show label” option determines whether the name of an element will be displayed in a filter or not.

If you specify an “Alternative Label” then it will be displayed instead of the default name.

In the “Filter template” option you can choose how an element will be displayed:

• “auto” (assumes automatic selection of the template as a cascade select);
• “cascade select” (displayed as a list of related elements);
• “text field” (full-text search in the element, nesting does not matter);
• “hidden field” (if this option is selected, the value from the “Default value” option will be used. For example, if you set Russia as a default value, then a filter will only return items within this country. This field is not displayed on the website).

Values from the “Default value” field will be already chosen by default when a page is loaded.

“Placeholder” tip.

If you choose “Text field” in the “Filter template” option, then this text will be inside. When an element is in a focus, this text will disappear. When a field loses focus and is empty, then the placeholder appears again.