Suchfilter im Frontend anzeigen (Teil 6)

Eine gezielte Auslieferung von Inhalten für den Besucher ist nicht nur Aufgabe des Redakteurs. Damit der Besucher schnell an sein Ziel kommt, kann es sinnvoll sein diesem Facetten und Filter zur Verfügung zu stellen.

Dabei kann bei der Aktivierung der Filter im Frontend genau konfiguriert werden welche Filter der Besucher angezeigt bekommt und wie diese dargestellt werden (Checkbox, Selektion, Tags und weitere). So kann situationsbedingt eine optimale Darstellung der Filter eingestellt werden, um dem Besucher zu ermöglichen frustfrei die gesuchten Inhalte zu finden.

1. Suchfilter hinzufügen

Frontend Ausgangssituation

Die Landingpage in unserem Beispiel zeigt einen Teaser mit 8 CMS-Objekten. In einem tatsächlichen Anwendungsfall sprechen wir natürlich von weitaus mehr dargestellt CMS-Objekten, damit der Einsatz von Frontend-Suchfiltern sinnvoll ist.

Vorgehen

Unter dem Reiter "Suchfilter" werden am rechten Rand alle verfügbaren Filter angezeigt. Diese zeigt das System automatisch basierend auf den über "Inhalte" hinzugefügten Unterobjekten an. Das Hinzufügen von Unterobjekten haben wir im 2. Blogeintrag dieser Reihe aufgezeigt.

In unserem Beispiel wählen wir den Filter "Keywords", um dem Besucher im Frontend zu ermöglichen die CMS-Objekte selbst über die Keywords zu filtern. Mit Klick auf den Pfeil lassen sich dabei zusätzliche Einstellungsmöglichkeiten vornehmen. Bei den 3 Einstellungen handelt es sich um die Filtertart, die OR- und AND-Verknüpfung (Operation) sowie die Darstellung des Filters (Style).

• Filterart: Je nach Filter kann dieser über verschiedene Arten der Verwendung verfügen. Bei Integer/Ganzzahl ist es beispielsweise möglich gezielt nach konkreten Werten zu filtern (1, 2, 3 etc.), oder beispielsweise nach Gruppierungen wie 0-9, 10-19 usw. Wie dies genau aussieht zeigen wir im 2. Beispiel dieses Blogeintrags (Absatz: "2. Suchfilter kombinieren und anpassen").
• OR- und AND-Verknüpfung: Hier wird eingestellt, ob die Filter-Werte, die im Frontend dargestellt werden, OR- bzw. AND-Verknüpft sind. Bei OR können alle Filter-Werte (Beispiel: "Wert #1" ODER "Wert #2" ODER "Wert #3" etc.), die zu einem Ergebnis führen würden, ausgewählt werden. Bei der UND-Verknüpfung werden nach der Auswahl eines Filter-Wertes (z.B. "Wert #1") nur noch die weiteren Filter-Werte angezeigt, die in Kombination mit "Wert #1" zu einem Ergebnis führen würden. Liegen somit Ergebnisse vor, die über das Keyword "Wert #1" UND "Wert #3" verfügen, so wird "Wert #3" weiter zur Auswahl und somit weiteren Einschränkung der Ergebnisse als Filter-Wert angezeigt. "Wert #2", welcher beispielsweise nicht in Kombination mit "Wert #1" bei als Ergebnis vor kommt, wird ausgeblendet.
• Style: Auch für die Darstellung des Filters gibt es je nach Filter verschiedene Styles. Über diese Einstellung kann gesteuert werden wie der Filter für den Benutzer im Frontend angezeigt wird. Für Keywords ist dies beispielsweise als Checkboxen, Liste oder Tags möglich um nur ein paar zu nennen.

Für unsere Demo wählen wir als Filtertart "Simple", Operation "Or" und Style "Tag":

Frontend Ergebnis

Das Frontend zeigt die verfügbaren Keywords im Style "Tags" an. Über Klick auf einen Tag werden die Ergebnisse eingeschränkt, sodass nur noch die CMS-Objekte im Teaser gezeigt werden, für die der ausgewählte Tag hinterlegt ist. Da wir uns für eine "OR-Verknüpfung" der Filter-Werte entschieden haben, bleiben die weiteren Keywords sichtbar und auswählbar, sodass durch die Auswahl weiterer Keywords mehr Ergebnisse dargestellt werden. Bei einer "UND-Verknüpfung" wären nur noch die weiteren Filter-Werte sichtbar und auswählbar, die in Kombination mit dem ausgewählten Filter-Wert zu Ergebnissen geführt hätten.

2. Suchfilter kombinieren und anpassen

Vorgehen

Die verfügbaren Filter lassen sich selbstverständlich auch kombinieren. Neben dem im 1. Schritt hinzugefügten Filter "Keywords" fügen wir im folgenden einen weiteren Filter "Integer" hinzu. Bei diesen beiden Filtern handelt es sich selbstverständlich um Test-Daten. In einem Szenario mit "echten" Inhalten wäre der Integer-Filter beispielsweise eine Maßangabe wie Breite oder Länge.

Wie im ersten Teil dieses Blogeintrags erklärt gibt es zusätzlich die Möglichkeit verschiedene Filterarten und Styles einzustellen. Für diese Demonstration stellen wir den "Integer"-Filter auf die Filterart "Range" und wählen als Style "Min/Max Input":

Frontend Ergebnis

Das Frontend zeigt nun automatisch den "Integer"-Filter neben dem "Keywords"-Filter an. Zusätzlich ist die Filterung des "Integer"-Feldes über eine Range (Filterart) möglich. Der gewählte Style "Min/Max Input" steuert dabei, dass die Range-Filterart als "Von/Bis"-Eingabefelder angezeigt werden. 

Schlusswort

Über die platzierbaren Filter im Frontend bringen wir eine völlig neue Dynamik in die Art und Weise wie ein Redakteur dem Besucher CMS-Inhalte zur Verfügung stellt.

Somit werden die bereits im CMS vorhandenen Daten zu einem nützlichen Werkzeug den Besucher an sein Ziel, und somit auch an das Ziel des Betreibers einer Webseite (Conversions, Call to Action, etc.), zu führen. Das Alles bietet die erweiterte inwebco eZ Platform / Page Builder Lösung Out-of-the-Box.

Für eine Übersicht aller Features haben wir diese Übersichtsseite eingerichtet.