5. Product filters

Product filters allows the website visitor to filter out products using specific attributes or categories. This feature can only be used with the product plugin set to Lazy list view.

NOTE! If attributes are used for the filter function, make sure they are of the type Dropdown or Multiselect.

To create filters, go to the product folder in the TYPO3 backend, and remember to be in List view. If there are existing filters, click the plus icon (1) in the filter section. If there aren't any filters, click the create icon at the top of the page (2) (and then select Filter in the list (Img. 5.2)).

(Img. 5.1)

Editing the filter element

After selecting to create a new filter, start with editing the information on the 'General' tab.

The first option on this tab is the 'Hide' function (1) to easily hide or display created filters.

Your next step is to select what type of records the filter should be based on; Categories, Attributes or Attribute min-max (2). Please see descriptions of these further down.

The filter has a field for an internal 'Name' (3). This is only used in the backend of TYPO3 to be able to differentiate filters that has multiple areas of use. An example could be that you use tire sizes for both bicycles and cars and these sizes are different. This field allows you to separate them internally.

The 'Label' (4) is used on the front of the website, as a header for the filter. As mentioned regarding the Name-field, in some cases the label could be the same for two different types of attributes.

(Img. 5.3)

Filter types

There are three different types of filters; filtering through categories, attributes or attributes from minimum to maximum (based on numeric options).

Filtering using category

When the filter type is set to Category (1), you are able to select category in a list below (2). Note that ONE category can be selected, and it will show the subcategories of that category in the filter on the website. (Img. 5.4)

Filtering using Attribute

When the filter type is set to Attribute (1), you are able to select an attribute in a dropdown below (2). Note that only attributes using the correct type will show up in the list, Dropdown and Multiselect. (Img. 5.5)

Filtering using Attribute min-max

When the filter type is set to Attribute min-max (1), you are able to select an attribute in a dropdown below (2). Note that only attributes using the correct type will show up in the list, Dropdown and Multiselect, and the filter will only work for numeric options in the attribute. This filter will allow the visitor to filter among products between two numeric values. (Img. 5.6)

Setting start and stop date for filters

As with most content elements in TYPO3, it is possible to set a start date (1) and an expiration date (2) also for filters. (Img. 5.7)

Adding filters to product page

The filter option will only work when using the type 'Lazy list' in the Product manager.

To add filters to a Lazy list, go to the Plugin tab in the Product manager on a product page. After that select the sub tab 'Filtering'.

Here you are able to set the option to exclude filter option without results (1). This means that after the visitor selects a filter option all other filters will be updated with only available filter values.

All available filters are listed in the right hand field (2). To add filters simply click on them in the list.

After having clicked a filter in the right hand field, they will be added to the left hand field (3) which shows all selected filters.

The icons between the two fields (4) allows you to arrange the order of the filters and delete them from selected items. Simply mark a filter i the left hand field and apply the icons.

(Img. 5.8)