Filter

As described in the functionalities Filter, there is an option to select the "Appearance" when creating or editing a filter. In order for a filter to be displayed with the selected display type, a corresponding React component must be assigned to it in the storefront.

The storefront has a number of prefabricated filter components for multi-select and range filters. These components can be customized or used as a basis for further development.

Adding a new filter component

Experience shows that filters are displayed differently on mobile devices than on devices where more space is available. To meet this requirement, the storefront offers the possibility to implement separate filter components for the different views.

The "display type" mapping in the Makaira backend described above causes the storefront to get a corresponding type from the Makaira API for each filter, for example, list_multiselect or list_multiselect_custom_2.

In the storefront, the corresponding React components are assigned to these types:

const filterComponents = {
  list_multiselect: MultiSelectFilter,
  list_multiselect_custom_1: MultiSelectFilterGrid,
  list_multiselect_custom_2: MultiSelectFilter,
  range_slider: RangeFilter,
  range_slider_custom_1: RangeFilter,
  range_slider_custom_2: RangeFilter,
  range_slider_price: RangeFilter,
}

as well as

const filterComponents = {
  list_multiselect: MultiSelectFilter,
  list_multiselect_custom_1: MultiSelectFilter,
  list_multiselect_custom_2: MultiSelectFilter,
  range_slider: RangeFilter,
  range_slider_custom_1: RangeFilter,
  range_slider_custom_2: RangeFilter,
  range_slider_price: RangeFilter,
}

If, for example, a new type of multi-select filter is to be implemented, the mapping shown above must be adapted to the newly implemented React component and the configuration in the Makaira backend for this filter must be made accordingly.