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.
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..
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.
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:
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:
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:
Values from the “Default value” field will be already chosen by default when a page is loaded.
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.
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.