Shopware 6 – Intelligentes Filter- und Suchplugin von Next AG

Filter und Suchplugin von Next AG

Intelligentes Suchen und Filtern!

Zwei der wichtigsten Shopfunktionen sind in der aktuellen Shopware Version 6.2.0 nicht befriedigend gelöst. Erst ab der Enterprise-Edition steht eine ausgereifte Elasticsearch Suche bereit. 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 Platzhirsch bewundert werden kann.

https://platzhirsch-optik.ch/

Technisches

Das Plugin baut auf Elasticsearch auf und nutzt im Shopware-Frontend Vue.js für die Listendarstellung und die Suchergebnisseite.

Dabei werden wie gewohnt Twig-Templates verwendet, so dass dieses Plugin von einem selbstentwickelten Theme überschrieben und gestylt werden kann.

Durch den Aufbau von Elasticsearch- und Filterindices im Hintergrund wird eine ausserordentliche Performance erreicht.

Das System arbeitet vollständig Ajax-basiert ohne Seitenreloads.

Features

Filter und Suchplugin von Next AG - Filteransicht Backend
Admin-Backend Integration

Plugin-Konfiguration

Shopware Filter und Suche Plugin
Filter und Suchplugin von Next AG - Konfiguration Filter
Shopware 6 Filterplugin und Suche von Next AG
Filter und Suchplugin von Next AG - Konfiguration Filter
Filter und Suchplugin von Next AG - Konfiguration Filter Shopware 6

Elasticsearch-Konfiguration

  • Beliebige Produktattribute, Produkteigenschaften und Produktzusatzfelder können per Konfiguration indiziert werden.
  • Es wird eine 2-stufige Suche „Exakt“ und dann „Volltext“ angeboten.
  • Die Gewichtung und der Fuzzinessfaktor können für jedes Attribut eingestellt werden.
Filter und Suchplugin von Next AG - Konfiguration Elasticsearch
Filter und Suchplugin von Next AG - Konfiguration Elasticsearch Details

Filter-Konfiguration

  • Beliebige Produktattribute, Produkteigenschaften und Produktzusatzfelder können als Filter verwendet werden (Mehrsprachigkeit und Mehrfachwerte werden korrekt verarbeitet).
  • Filter können optional per Konfiguration als Buttons (Auslobungen wie z.B. Aktion oder Restposten) dargestellt 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 gesamthaft per Klick zurückgesetzt werden.
  • Filtereigenschaften und Filter können mit Und/Oder verknüpft werden.
  • Die Sortierung der Artikelattribute kann eingestellt werden.
Filter und Suchplugin von Next AG - Konfiguration Filterübersicht
Filter und Suchplugin von Next AG - Konfiguration Filterübersicht Details

Produktlistenansicht

  • Zu jedem Filterattribut wird die Anzahl gefundener Artikel angezeigt.
  • Die Filter sind voneinander abhängig. D.h. das Klicken eines Filters reduziert die Filtermöglichkeiten der anderen Filter.
  • Die Filter sind volldynamisch. D.h. Filtereigenschaften ohne Produkte werden automatisch ausgeblendet.
  • Die auf den Produktkacheln anzuzeigenden Attribute wie Bild, Name, Artikelnummer, Preis, Warenkorb etc. können per Konfiguration eingestellt werden.
  • Filter können als Buttons oder als echte Filter konfiguriert werden.
  • Es kann konfiguriert werden, ob verschiedene Sortierungen angeboten werden sollen.
  • Es kann zwischen einem normalen Pagersystem, Infinite-Scroll oder Infinite-Scroll mit „More“-Button gewählt werden.
  • Alle Filtereinstellung werden „gemerkt“ und stehen sowohl beim Seitenreload als auch beim Wechsel zur Produktdetailseite und zurück wieder zur Verfügung.
  • Ist der Infinite-Scroll aktiviert, wird beim Wechsel von der Produktdetailseite zurück auf die Listenansicht wieder automatisch zum angeklickten Produkt gescrollt.
Filter und Suchplugin von Next AG - Beispiel Storefront Filter

Suche

  • Die Darstellung im Search-Dropdown kann per Konfiguration vollständig individualisiert werden.
  • Das Dropdown arbeitet auch auf mobilen Geräten korrekt mit Scrollbar.
  • Die Suche erfolgt 2-stufig: Zuerst 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 bei „Alle Anzeigen“ wird die Volltextsuche ausgeführt. Wird nichts gefunden, wird eine Volltextsuche für alle konfigurierten Attribute mit entsprechender Gewichtung und Fuzziness ausgeführt. Die konfigurierte Anzahl an Ergebnissen wird in der Dropdown-Vorschau angezeigt.
Filter und Suchplugin von Next AG - Beispiel Storefront Elasticsearch Suche
Filter und Suchplugin von Next AG - Beispiel Elasticsearch Suchergebnisse

Auf der Suchergebnisseite kann per Konfiguration das Filtersystem für die weitere Eingrenzung aktiviert werden.

Intelligentes Suchen und Filtern!

Von Next AG in einem standardisierten Showare 6 Plugin optimal und wiederverwendbar gelöst!

Dieser Beitrag wurde von Oliver Riske erstellt.