Shopware 6 Filter mit Elastic Search

Ausgeklügeltes Shopware 6 Filtersystem auf der Basis von Elastic Search

Next AG realisiert ein ausgeklügeltes Shopware 6 Filtersystem auf der Basis von Elastic Search. Ultraschnell und Headless. Made by Next AG! Die Filter können individuell aus den Attributen über Akeneo Pim konfiguriert werden. Dies ermöglicht ein Höchstmass an Flexibilität.

www.martel.ch/wein

Eingesetzte Technologien und Lösungen:

Vue.js
Elasticsearch
Shopware
Online Shops
Websites
Webdesign
Features & Module

Oliver Riske

Ausgeklügeltes Shopware 6 Filtersystem auf der Basis von Elastic Search

Intelligentes Suchen und Filtern!

Zwei der wichtigsten Shopfunktionen sind in der aktuellen Shopware Version 6 nicht befriedigend gelöst. Für das Filtersystem gibt es aktuell weder von Shopware noch von Plugin Anbietern eine zufriedenstellende Lösung.

Um dieses Problem für unsere Kunden grundlegend zu lösen, haben wir ein eigenes voll anpassbares und konfigurierbares Plugin geschrieben, welches im Live Shop von Martel bewundert werden kann.

Technisches

Das Plugin basiert auf Elasticsearch und verwendet Vue.js im Shopware-Frontend für die Listenanzeige und die Suchergebnisseite. Wie üblich werden Twig-Vorlagen verwendet, so dass dieses Plugin durch eigene Themes überschrieben und gestylt werden kann. Die aussergewöhnliche Performance wird durch den Aufbau von Elasticsearch und Filterindizes im Hintergrund erreicht. Das System arbeitet vollständig Ajax-basiert ohne Neu laden der Seite.

Die hochperformante Suche findet nicht nur Produkte sondern auch beliebige Inhalte aus Erlebnisweltenseiten oder integriertem WordPress Content und stellt die Ergebnisse struktuiert nach Inhaltstyp dar.

Konfiguration Plugin Elastic Search — Kleiner Ausschnitt aus der Konfiguration des Plugins

Elasticsearch-Konfiguration

Beliebige Produktattribute, Produkteigenschaften und zusätzliche Produktfelder können per Konfiguration indiziert werden.
Es wird eine 2-stufige Suche "Exakt" und dann "Volltext" angeboten.
Die Gewichtung und der Unschärfefaktor können für jedes Attribut eingestellt werden.

Filter-Konfiguration

Als Filter können beliebige Produktattribute, Produkteigenschaften und zusätzliche Produktfelder verwendet werden (Mehrsprachigkeit und Mehrfachwerte werden korrekt verarbeitet).
Filter können optional als Buttons (z.B. Aktion oder Restposten) per Konfiguration angezeigt werden.
In jedem Filter kann ein Suchfeld aktiviert werden (type-ahead).
Filter mit vielen Filtereigenschaften können mit einem "show more"-Button reduziert und optimiert werden.
Filter können einzeln oder als Ganzes mit einem Klick zurückgesetzt werden.
Filtereigenschaften und Filter können mit Und/Oder verknüpft werden.
Die Sortierung der Artikelattribute kann eingestellt werden.

Produktlistenansicht

Für jedes Filterattribut wird die Anzahl der gefundenen Einträge angezeigt.
Die Filter sind voneinander abhängig, d.h. das Anklicken eines Filters reduziert die Filtermöglichkeiten der anderen Filter.
Die Filter sind voll dynamisch, d.h. Filtereigenschaften ohne Produkte werden automatisch ausgeblendet.
Die Attribute, die auf den Produktkacheln angezeigt werden sollen, wie z.B. Bild, Name, Artikelnummer, Preis, Warenkorb, etc. können per Konfiguration festgelegt werden.
Filter können als Schaltflächen oder als echte Filter konfiguriert werden.
Es kann konfiguriert werden, ob verschiedene Sortierungen angeboten werden sollen.
Sie können zwischen einem normalen Pager-System, unendlichem Scrollen oder unendlichem Scrollen mit "Mehr"-Button wählen.
Alle Filtereinstellungen werden "gemerkt" und stehen beim Neu laden der Seite sowie beim Wechsel zur Produktdetail-Seite und zurück wieder zur Verfügung.
Ist «Infinite Scroll» aktiviert, kehrt das Scrollen automatisch zum angeklickten Produkt zurück, wenn von der Produktdetailseite zurück zur Listenansicht gewechselt wird.

Suche

Die Anzeige im Such-Dropdown kann über die Konfiguration vollständig angepasst werden.
Das Dropdown funktioniert auch auf mobilen Geräten mit Scrollbalken korrekt.

Die Suche wird in 2 Schritten durchgeführt: Zunächst werden die als exakt definierten Attribute nach dem exakt eingegebenen Wert durchsucht (sinnvoll z.B. bei der Suche nach Artikel oder EAN-Nummer). Werden Treffer gefunden, werden nur diese in der Dropdown-Vorschau angezeigt und erst wenn "Alle anzeigen" ausgewählt ist, wird die Volltextsuche durchgeführt. Wird nichts gefunden, wird eine Volltextsuche über alle konfigurierten Attribute mit entsprechender Gewichtung und Unschärfe durchgeführt. Die konfigurierte Anzahl der Ergebnisse wird in der Dropdown-Vorschau angezeigt.