Configuration of extended search in Joomla
JBZoo search module in Joomla
In one of our articles we examined how to arrange fields in a search form. By default, a field will look like it was created initially. So if it is a radio-button, it will be displayed as radio-buttons in a filter. Usually it’s convenient but not always.
JBZoo gives you even more flexibility because each field has it’s own set of settings. This way you can easily create a useful extended search in Joomla for your catalogue without any programming knowledge.
Main settings of filter elements
Depending on the element (field) type it can have different set of settings. But nonetheless all fields have basic (common) settings. Let’s examine them.
Show label — whether to display element label in a filter or not. In the example below “Category”, “Form”, “Size” etc., are labels.
Alternative label — it is a text of a label. You can write custom label for your element here. Default value is a name of an element which were given to it during creation.
Filter template — allows you to set an appearance of an element in a filter form. For example, you added a simple text field and chosen a “Select” template for it. Now all available values of this field will be presented as a drop-down list on the website. You can also display this field as a set of checkboxes or radio-buttons.
Depending on the specific field, a list of possible templates could be different. Let’s examine templates available for a text field.
|
|
Auto — an element will use it’s own type. So for a text field it will be simple input field. |
|
|
Text field — in this case it’s the same as “Auto”. |
|
|
Range of numbers — this template creates two fields for numbers. For example, if you have a price field, users will be able to search for a product with a price between 1000 and 3000 USD or between 3200 and 4000 USD. Keep in mind that in this case this field should only contain numeric values, otherwise the filter will not work. |
|
|
Checkbox — a set of checkboxes. Values will be selected from the values of this field in existing items. |
|
|
jQuery.ui buttons — a set of stylized buttons based on jQuery UI. It works as a set of checkboxes but looks completely different. |
|
|
Radio-buttons — with this template elements will look like radio-buttons. |
|
|
Select — filter field will be displayed as a simple drop-down list. |
|
|
Select (jQuery.chosen) — it is a stylized list with an input field. When a user enters first letters he will be offered to select from an existing list. |
|
|
The range of numbers - slider — displays a slider with handles. |
|
|
Date — jQuery. UI datepicker widget will be used. The filter will work correctly only if the inputted values meet the standard which is set by the widget. For example, “2012-11-01” for the “November 11, 2012”. |
|
|
Date range — it is almost the same as a “Date” template. But there are two fields now so users are able to specify a range of dates. |
|
Hidden field — it is an invisible value of a filter that can’t be changed by users. For example, you can set a search by a specific category or by items which contain specific values. If you choose this template, don’t forget to specify a “Default value”. Then a filter will forcibly search by this value without user’s knowledge. |
|
|
|
Category list (only for the category field) — it is the same as a “Select” template but is used only for categories. |
|
|
Category list (jQuery.chosen) — it is the same as a “Select (jQuery.chosen)” template but is used only for categories. |
Default value
In order to make things easier for users, you can set a default values for a filter. In this case specific values will be already selected in the form. But a user will be able to change them and filter as he wants.
For example, if you want AMD processor to be selected initially, you should specify it as a “Default value”.
For the complex data you should use JSON format. For example, for the multiple select of several cities you should specify this for the “Default value”:
{0:'Chicago',1:'Detroit',2:'Boston'}
In order to set a range of numbers from 30 to 70, for example, you should specify this:
{'range':'30/70'}
Additional settings of a filter
|
|
Multiple select (yes/no) — if you choose “yes” then users will be able to select several values. In the example below a user have chosen several countries of manufacture. |
 |
Show count (yes/no) — if you choose “yes” then a number of matching items will be displayed next to a filter value. In the example below only 13 products have nVidia cards. |
 |
Autocomplete (yes/no) — it is applicable only for text or numeric input fields. When a user begins typing a word, a list of matching variants will be displayed automatically. This list is based on existing items. |
 |
Slider configuration — you can set a minimum and maximum values for a slider, a step by which a slider value will be changed. There is also an option to automatically set minimum and maximum values based on the actual values of this element in existing items. |
Settings for categories
List mode — how should a category list be displayed:
|
|
Simple — a simple drop-down list. |
|
|
Nested tree — displays category nesting. |
|
|
Parent categories — only main categories of the first level will be displayed. |
|
|
Child categories — only child categories will be displayed. |
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.