Loading...

Suchfilter im Frontend anzeigen (Teil 6)

Über Suchfilter im Frontend kann der Besucher selbst entscheiden welche Inhalte dieser angezeigt bekommen möchte

eZ Platform Lösungen / Blog / 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.

Frontend Ausgangssituation Suchfilter hinzufügen

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":

1. Suchfilter hinzufügen

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.

Frontend Ergebnis Suchfilter hinzufügen

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":

2. Suchfilter kombinieren und anpassen

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. 

Frontend Ergebnis Suchfilter kombinieren und anpassen

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.

Jetzt Demo vereinbaren

Alle Artikel zum Thema inwebco Studio Erweiterung finden Sie in dieser Reihe aus unserem Blog.

Einführung in Landingpage-Management mit dem Page Builder (Teil 1)
Die inwebco Page Builder Erweiterung in eZ Platform schafft völlig neue Möglichkeiten beim Landingpage-Management.
Mehr  
Teaser mit CMS-Objekten in Landingpages anreichern (Teil 2)
Diese Erweiterung bringt eZ Platform und den Page Builder näher zusammen, indem CMS-Objekte als Teaser im Landingpage-Management verfügbar gemacht werden.
Mehr  
Navigation innerhalb von Landingpage-Teasern (Teil 3)
Einfachere Navigation durch Infinite Scrolling und Pagination mit der inwebco Erweiterung zu eZ Platform / Page Builder.
Mehr  
Sortierung von Teasern im erweiterten Page Builder (Teil 4)
Die automatische oder manuelle Sortierung der Teaser bietet maximale Flexibilität.
Mehr  
Inhalte über Facetten einschränken (Teil 5)
Oftmals ist es erforderlich, dass nur Inhalte in einem Teaser gezeigt werden, die bestimmte Kriterien erfüllen. Hier kommt ein weiteres, nützliches Feature zum Einsatz, das wir unsere eZ Platform / Page Builder Lösung implementiert haben.
Mehr  
Suchfilter im Frontend anzeigen (Teil 6)
Für Suchfilter im Frontend kann genau konfiguriert werden welche Filter der Besucher angezeigt bekommt und wie diese dargestellt werden (Checkbox, Selektion, Tags, und weitere).
Mehr  

Frontendfacetten

Wir haben den Page Bilder so erweitert, dass dieser unter einem neuen Reiter "Suchfilter" einem Teaser Filter / Facetten im Frontend hinzuzufügen kann.





eZ Platform
eZ Platform
Inhaltsreiche Websites und Anwendungen mit eZ Platform besser, schneller und einfacher erstellen als jemals zuvor.
Weiterlesen




Page Builder
Page Builder (ehm. Studio)
Der Page Builder (ehm. Studio) baut auf eZ Platform auf und und erweitert dieses um Features mit Fokus auf der Pflege von Inhalten.
Weiterlesen

Entwicklung

inwebco entwickelt und optimiert PHP-basierende Web Software Solutions auf Basis von eZ Publish, eZ Platform, Page Builder und Symfony.