Getting started with Filters elements

Getting started with Filters elements

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:


  1. Grid Width - set the width of a grid
  2. Grid Column Gap - select the column gap for the grid
  3. Grid Breakpoint - select the grid breakpoint
  4. 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:



  1. Alignment - select in which position filter should be displayed,
  2. Margin - select the margin for this element,
  3. Remove top margin - removes top margin,
  4. Remove bottom margin - removes bottom margin,
  5. 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:


  1. Show Field Names - display or hide extra fields' options names,
  2. Border Color - select the border color,
  3. Border Style - select the border style,
  4. Border Size - provide the border's size,
  5. Border Radius - provide the border's radius,
  6. Width - provide the width of an extra field's option,
  7. Height - provide the height of an extra field's option,
  8. 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:
  1. Button - can work as reset button or submit button,
  2. Select input - displays 'select' type extra fields,
  3. Filter range - displays price range filter. Minimum range and maximum range can be configured,
  4. Radio - displays 'radio' type extra fields.




      • Related Articles

      • Filters module

        We want to show you how the Filters module for DJ-Catalog2 works. Below you will find all important information - see how to configure the extra fields, add them to the DJ-Catalog2 product, and configure the module. Open the DJ-Catalog2 component. ...
      • Additional Elements for YooTheme

        DJ-Catalog2-YooTheme integration plugin comes with additional elements that can be useful for building an e-commerce website. Compare products - this element renders compare button for product list, Extended products grid - this element is a grid ...
      • DJ Catalog2 - Ajax Filters App explained

      • What is Joomla?

        Joomla is an open-source content management system (CMS) create to allow building web sites and online apps. It is released under the GNU General Public License. Joomla handles every website's content ( text, photos, videos, documents and more). Is ...
      • Calendar (month)

        This element is visible under DJ-Events Tab in elements library: This element renders calendar in the current month: