DJ-Catalog2 filters elements
Contents
- Dj-Catalog2 filters elements for YOOtheme
Dj-Catalog2 filters elements for YOOtheme
DJ-Catalog2-YooTheme integration plugin comes with additional elements that can be useful for building an e-commerce website. There are 3 different groups of additional elements for YOOtheme: DJ-Catalog Filters, DJ-Catalog2 and DJ-Extensions.
DJ-Catalog Filters
-
button - button to save or reset selected filters
-
checkbox - allows you to filter your product by extra fields in checkbox
-
colors - allows you to filter products by color
-
filter range - allows you to filter products by their range
-
radio - allows you to filter products by extra fields in radio field type
Below you can see an example of how product filtering can look on the front end.
Filters elements - button
Button element allows you to approve or reset filtering.
Button options
To add button simply add new item.
![dj-catalog2 integrator with yootheme additional elements filters button options](/component/ajax/?p=image&src=%7B%22file%22%3A%22images%2Fdokumentacja%2Fdj-catalog2_integrator%2Fdj-catalog2_yootheme_integrator_dynamic_additional_yootheme_elements_filters_button.png%22%2C%22thumbnail%22%3A%22%2C%2C%22%7D&hash=e9257e4b)
- add item content name and optionally pic an icon from the icon library
- go to settings
- select button style
- select button type
- select icon alignment
![dj-catalog2 integrator with yootheme additional elements filters button settings](/component/ajax/?p=image&src=%7B%22file%22%3A%22images%2Fdokumentacja%2Fdj-catalog2_integrator%2Fdj-catalog2_yootheme_integrator_dynamic_additional_yootheme_elements_filters_button_settings.png%22%2C%22thumbnail%22%3A%22%2C%2C%22%7D&hash=572999c4)
Result:
![dj-catalog2 integrator with yootheme additional elements filters button result](/component/ajax/?p=image&src=%7B%22file%22%3A%22images%2Fdokumentacja%2Fdj-catalog2_integrator%2Fdj-catalog2_yootheme_integrator_dynamic_additional_yootheme_elements_filters_button_result.png%22%2C%22thumbnail%22%3A%22%2C%2C%22%7D&hash=e284dcc8)
See short tutorial below:
Filters elements - checkbox
Checkbox element allows you to filter your product by extra fields using checkbox.
To set the checkbox, you must first go to the backend, to the DJ-Catalog2 component and set the extra fields accordingly.
Go to DJ-Catalog2 - Products - Extra Fields + New
Customize all settings to suit your needs. If you want your additional field to display as a checkbox remember to select field type.
See short tutorial below:
Now you need to go to products and add additional fields to products that can be filtered by the added additional field, in our case it is packaging.
Go to DJ-Catalog2 - Products - Select product - Select product attributes - Choose package type
See short tutorial below:
Now go to your site, go to the product list and add a filtering item.
See short tutorial below:
Filters elements - colors
Filter colors elements allow you to filter products by color. To set colors elements, you must first go to backend, to the DJ-Catalog2 component and set the extra fields accordingly.
Go to DJ-Catalog2 - Porudcts - Extra Fields +New
Customize all settings to suit your needs. If you want your additional field to display as a color remember to select field type.
Now you need to go to products and add additional fields to products that can be filtered by the added additional field.
Go to DJ-Catalog2 - Products - Select product - Select product attributes - Choose color
Now go to your site, go to the product list and add a filtering item.
Filters elements - filter range
This element renders filter range. Please make sure that filter_range option for products list is enabled in configuration of DJ-Catalog2.
Simply add filter range as any yootheme element.
Now you can see filter range options. Configure the settings according to your preferences.
-
add filter range label
-
set up min. range
-
set up max. range
-
set up range position
Example of filter range design:
![dj-catalog2 yootheme integrator additional elements price range filter](/component/ajax/?p=image&src=%7B%22file%22%3A%22images%2Fdokumentacja%2Fdj-catalog2_integrator%2Fprice_range.png%22%2C%22thumbnail%22%3A%22%2C%2C%22%7D&hash=9544d472)
Filters elements - radio
Radio filter element allows you to filter products by extra fields in radio field type.
To set up radio filter element, you must first go to backend, to the DJ-Catalog2 component and set the extra fields accordingly.
Go to DJ-Catalog2 - Porudcts - Extra Fields +New
Now you need to go to products and add additional fields to products that can be filtered by the added additional field.
Go to DJ-Catalog2 - Products - Select product - Select product attributes - Choose product type
Now go to your site, go to the product list and add new filter element - radio.
Set up a radio content - show or hide field label, enter field label and mapped field with right type.
Go to settings. Set up alignment and margin. Submit if you want to send form automatically.
Filters elements - input
Select input element represents a control that provides a menu of options.
If you want to add select input element, simply add new element, go to select input options, check show label button and choose mapped field. Additionally you can go to settings button and submit a send form automatically option.