There are 2 types of filters in the DJ-Catalog2 YooTheme Integration plugin. The first filter is a full filter that displays every available filter. It is the easiest option to show filters on your website. The second option is to map extra fields in filters elements. There are 4 elements that can be configured to display your extra fields!
Please enable jQuery in YooTheme Builder
Full filters element cannot be combined with other filters elements. Do not put Full Filters element in DJ-Catalog2 Filters section type.
Full Filters Element
To use the full filters element navigate to your section and select Full Filters element from your elements library:
It will display all filters:
Full Filters options
There are several options that can be set:
- Grid Width - set the width of a grid
- Grid Column Gap - select the column gap for the grid
- Grid Breakpoint - select the grid breakpoint
- Vertical Alignment - can be centered
Filters as a section and filters elements
The second option to display filters is quite more difficult.
First, we have to create a section for filters:
Once created, go to section's settings -> advanced tab. You will see the "Enable as DJ-Catalog2 Filters" checkbox. Please check this checkbox.
Now in this section, you can put filters elements. For example, we will use the checkbox and colors elements:
In the Checkbox element, you will have to assign the mapped field to that element. The mapped field will show only related extra fields to that element. That means in the checkbox element you will see only extra fields that are checkboxes.
After the field is selected you can navigate to the settings:
- Alignment - select in which position filter should be displayed,
- Margin - select the margin for this element,
- Remove top margin - removes top margin,
- Remove bottom margin - removes bottom margin,
- Send form automatically - after the filter option is checked, the form will be sent automatically.
Now the filter will be displayed on the frontend:
Now we will add colors filter:
There are additional options for colors element:
- Show Field Names - display or hide extra fields' options names,
- Border Color - select the border color,
- Border Style - select the border style,
- Border Size - provide the border's size,
- Border Radius - provide the border's radius,
- Width - provide the width of an extra field's option,
- Height - provide the height of an extra field's option,
- Submit - check if you want to send the form automatically after the option is clicked.
There are 4 more elements in the DJ-Catalog2 Filters tab:
- Button - can work as reset button or submit button,
- Select input - displays 'select' type extra fields,
- Filter range - displays price range filter. Minimum range and maximum range can be configured,
- Radio - displays 'radio' type extra fields.