DJ-Catalog2 filters elements

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.

Below you can see an example of how product filtering can look on the front end.

Button element allows you to approve or reset filtering.

To add button simply add new item.

• 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

Result:

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.

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

Now go to your site, go to the product list and add a filtering item.

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.

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.

Example of filter range design:

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. 

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.