Filter

Wie in dem Kapitel Filter zum Makaira-Backend beschrieben, gibt es die Möglichkeit, bei der Erstellung oder Bearbeitung eines Filters auch die "Darstellung" auszuwählen. Damit ein Filter mit der gewählten Darstellungsform angezeigt wird, muss dieser in der Storefront eine entsprechende React-Komponente zugeordnet werden.

Die Storefront besitzt eine Reihe vorgefertigter Filter-Komponenten für Multi-Select- und Range-Filter. Diese Komponenten können angepasst oder als Grundlage für Weiterentwicklung genutzt werden. 

 

Hinzufügen einer neuen Filter-Komponente

Erfahrungsgemäß werden Filter auf mobilen Geräten anders dargestellt als auf Geräten, bei denen mehr Platz zur Verfügung steht. Um dieser Anforderung nachzukommen, bietet die Storefront die Möglichkeit für die verschiedenen Ansichten eigene Filter-Komponenten zu implementieren.

Die oben beschriebene Zuordnung der "Darstellungsform" im Makaira-Backend bewirkt, dass die Storefront für jeden Filter einen entsprechenden type von der Makaira-API bekommt, beispielsweise list_multiselect oder list_multiselect_custom_2.

In der Storefront werden diesen Typen die entsprechenden React-Komponenten zugeordnet:

// patterns/core/ProductListFilter/DesktopFilter/index.js

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,
}

sowie

// patterns/core/ProductListFilter/MobileFilter/MobileFilterList.js

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,
}

Soll nun beispielsweise eine neue Art von Multi-Select-Filter implementiert werden, so muss das oben gezeigte Mapping auf die neu implementierte React-Komponente angepasst sowie die Konfiguration im Makaira-Backend für diesen Filter entsprechend vorgenommen werden.