Login

New to DJ-Extensions?

DJ-Catalog2 filters elements

Contents

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

Result:

dj-catalog2 integrator with yootheme additional elements filters button result

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

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.

Video tutorial

© 2023 DJ-Extensions.com. All rights reserved.