JBZoo Cascading Select - cascade (nested) SELECT elements

Related elements for ZOO

9.0/10 rating (2 votes)

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..

Cascade element in the item edit screen

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:

How to get to the application managerHow to choose JBZoo App

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

How to get to the item configuration

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

Location of the element in the Element LibraryMain settings of the element

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.

Item template layouts

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.

Dragging an element to a desired position

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.

Element configuration in an item template

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:

Displaying of an element in an item

Element configuration in a filter template

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

Filter templates

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

Element configuration in a filter template

“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.

Displaying of an element in a filterPlaceholder

Elements, Filter, Related

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.