High Performance Produktsuche für Shopware 6 mit Algolia & Nuxt.js

Wie digital.manufaktur die Suche bei All4Golf für komplexe Produktdaten neu gedacht hat.

Produktsuche mit Algolia und Nuxt.js: Vorteile auf einen Blick

Wie lässt sich eine Produktsuche im E-Commerce performant skalieren? In diesem Artikel geben wir Einblicke in unsere technische Umsetzung bei All4Golf, dem europäischen Marktführer für Golfausrüstung. 

Die wichtigsten Benefits im Überblick:

• Blitzschnelle Produktsuche – Suchergebnisse erscheinen in Millisekunden, auch bei großen Datenmengen und vielen Varianten.

• Maximale Kontrolle – Relevanz, Sortierung und Suchlogik individuell steuerbar – für ein intelligentes Nutzererlebnis. 

• Aktuelle Daten in Echtzeit – Preis- und Verfügbarkeitsinformationen werden automatisch bei Änderungen aktualisiert.

• Internationale Skalierbarkeit – Mehrere Länder, Sprachen und Währungen? Kein Problem dank durchdachter Indexstruktur.

• Stabiles Setup für komplexe Shops – Technisch robuste Architektur für hohe Anforderungen im B2B- und B2C-Commerce.

• Entlastetes Frontend – Klare Datenstruktur sorgt für geringeren Aufwand in der Darstellung und bessere Ladezeiten.

• Zukunftssichere Lösung – Hohe Flexibilität bei zukünftigen Änderungen oder Erweiterungen des Shopsystems.

Wenn die Produktsuche zur Performancebremse wird

Je umfangreicher der Produktkatalog, desto wichtiger ist eine performante und nutzerfreundliche Suchfunktion im E-Commerce. Viele Shops stoßen mit der nativen Produktsuche von Shopware 6 an ihre Grenzen – insbesondere bei großen Datenmengen mit Varianten, Sprachen und Verkaufskanälen. 

Genau hier setzte digital.manufaktur (dmf) bei der Integration von Algolia bei All4Golf an. Ziel war es, die bestehende Shopware 6 Suche vollständig durch eine hochperformante, individuell steuerbare Lösung zu ersetzen.

Ein Großteil der technischen Konzeption und Umsetzung der Algolia-Suche bei All4Golf lag in den Händen von Lukas Heinze, Frontend-Experte bei digital.manufaktur. Als Entwickler der hauseigenen hubble PWA (Progressive Web App) verantwortete er nicht nur die strukturelle Aufbereitung der Shopware-Daten, sondern auch die Integration von Algolia ins Frontend – von der Index-Auswahl bis zur finalen Suchergebnisanzeige.

Ausgangslage & Techstack

Systemarchitektur von All4Golf:

• Produktdatenquelle: Shopware 6

• Frontend: Nuxt.js auf Basis der Shopware Store API (hubble PWA)

• Suche: Algolia Websuchplattform (neu)

Problem: Hohe Datenkomplexität trifft auf begrenzte Suchleistung bei Shopware 6

All4Golf verwaltet eine große Anzahl an Produkten mit zahlreichen Varianten, Attributen und Ausprägungen. Diese Datenmenge stellt die native Produktsuche von Shopware 6 vor spürbare Performance-Probleme – insbesondere bei komplexeren Suchanfragen oder Filtern.

Zudem bietet Shopware von Haus aus nur eingeschränkte Steuerungsmöglichkeiten für die Relevanzlogik der Suche – etwa bei Ranking-Faktoren, individueller Gewichtung oder der Sortierung von Ergebnissen.

Herausforderungen bei der nativen Shopware 6 Suchfunktion

• Langsame Suchergebnisse bei großen Datenmengen und Variantenvielfalt

• Begrenzte Steuerung der Suchlogik, z. B. bei Custom Sorting, Suchfaktoren oder Ranking

• Nicht ausreichend skalierbar für Setups mit mehreren Verkaufskanälen, Währungen und Sprachen

Ziel: Performante Produktsuche für ein komplexes Sortiment

Die Zielsetzung für All4Golf war eindeutig: Die bestehende Produktsuche in Shopware 6 sollte durch eine leistungsstarke und flexible Lösung ersetzt werden, um schnellere Suchergebnisse bei gleichbleibend hoher Datenqualität zu erzielen.

Im Fokus der neuen Such-Architektur standen drei zentrale Anforderungen:

• Echtzeit-Aktualität der Suchdaten – z. B. bei Preis- oder Verfügbarkeitsänderungen

• Individuell steuerbare Suchlogik, um Einfluss auf Ranking, Sortierung und Relevanz zu nehmen

• Skalierbarkeit für verschiedene Länder, Verkaufskanäle und Sprachen

Mit der Integration von Algolia sollte eine hoch performante Suchlösung entstehen, die den Anforderungen eines komplexen, internationalen Produktportfolios gerecht wird.

Vorbereitung: Warum „einfach Algolia einbauen“ nicht reicht

Algolia ist keine Plug-and-Play-Suchlösung, sondern eine hochgradig konfigurierbare Plattform, die gerade bei komplexen Anforderungen – wie bei All4Golf mit großem Produktdatenbestand, internationalen Verkaufskanälen und mehreren Sprachversionen – eine sorgfältige und durchdachte Implementierung benötigt.

Diese Komplexität ist kein Nachteil, sondern eine Stärke: Sie ermöglicht eine maßgeschneiderte Suchfunktion mit 

• hoher Performance, 

• individueller Steuerung der Suchlogik 

• und umfassender Skalierbarkeit. 

Während einfachere Lösungen wie Doofinder schneller einzubinden sind, bieten sie nicht dieselbe Flexibilität und Tiefe, die für ein anspruchsvolles Setup erforderlich sind.

Ein einfacher Auftrag wie „Baut mal Algolia ein“ reicht daher nicht aus – denn um das volle Potenzial von Algolia auszuschöpfen und langfristig optimale Sucherlebnisse zu schaffen, ist eine strukturierte Herangehensweise notwendig.

Aus gutem Grund bietet Algolia daher ein umfassendes Onboarding-Programm (Algolia Academy) an. Darin wird Schritt für Schritt erläutert, welche Rollen im Projekt erforderlich sind (in unserem Fall acht verschiedene Personen bzw. Funktionen) und welche Aufgaben diese in den jeweiligen Phasen übernehmen.

Dieses strukturierte Onboarding war nicht nur ein wertvoller Leitfaden für die Integration, sondern half auch dabei, dem Kunden die Tragweite der geplanten Lösung zu vermitteln – und die richtigen Fragen zur Architektur, den Daten und den Zielen zu stellen.

Algolia integrieren: Herausforderungen & Umsetzung

Die Algolia-Suche sollte nicht nur schneller, sondern auch intelligenter und flexibler werden – angepasst an die komplexe Shop-Architektur von All4Golf. Dafür musste die Integration technisch wie konzeptionell von Grund auf durchdacht werden.

1. Aktualität der Daten

Herausforderung:
Für eine zuverlässige Produktsuche ist es essenziell, dass die in Algolia angezeigten Daten jederzeit dem aktuellen Stand im Shop entsprechen – insbesondere bei sensiblen Informationen wie Preisen oder Verfügbarkeiten. Eine veraltete Anzeige kann nicht nur zu Frustration bei Nutzer:innen führen, sondern im schlimmsten Fall auch zu rechtlichen Problemen oder Kaufabbrüchen.

Standardlösung:
Algolia bietet standardmäßig die Möglichkeit, Produktdaten über einen externen Datenfeed (z. B. eine XML-Datei) einzulesen. Dieser Ansatz ist technisch vergleichsweise einfach umzusetzen – allerdings weiß Algolia dabei nicht, wann sich Daten ändern. Die Aktualisierung erfolgt lediglich in festen Intervallen (z. B. einmal täglich), was im E-Commerce-Kontext oft zu träge ist.

Umgesetzte Lösung bei All4Golf:
Um eine nahezu in Echtzeit aktualisierte Produktsuche zu ermöglichen, wurde ein anderer Weg gewählt: Die Datenquelle – also das Shopware-System – sendet relevante Änderungen aktiv und gezielt über eine Schnittstelle direkt an Algolia.
Sobald sich beispielsweise der Lagerbestand oder der Preis eines Produkts ändert, wird nur dieser einzelne Datensatz sofort an Algolia übertragen.

Vorteil:
Diese differenzierte, ereignisgesteuerte Synchronisierung ist zwar technisch aufwendiger, stellt aber sicher, dass Nutzer:innen immer mit den aktuellen Daten suchen – unabhängig davon, wann das letzte Update stattgefunden hat.

2. Begrenzung der Datensatzgröße

Herausforderung:
All4Golf arbeitet mit einem sehr umfangreichen Produktkatalog – nicht nur hinsichtlich der Anzahl der Produkte, sondern auch in Bezug auf die Detailtiefe einzelner Datensätze. Genau hier ergibt sich eine technische Grenze: Algolia setzt eine maximale Größe pro Datensatz fest, um die Suchperformance konsistent hoch zu halten. Wird dieses Limit überschritten, kann der betreffende Datensatz nicht verarbeitet oder angezeigt werden.

Risiko:
Ohne gezielte Optimierung würden zahlreiche Produktdaten – etwa technische Details, Varianteninformationen oder Zusatzattribute – zu große Datensätze erzeugen, die Algolia nicht performant handhaben kann.

Lösung:
Die Lösung bestand darin, den Umfang der übertragenen Informationen gezielt zu steuern: Es wurde genau definiert, welche Datenfelder für die Suche und Anzeige relevant sind und welche verzichtbar sind. Dabei half die bestehende Frontend-Architektur – insbesondere die Verwendung der hubble PWA.

Unsere Progressive Web App bereitet bereits im Standard die Shopware-Daten für das Frontend in einem schlanken, strukturierten Format auf. Dieses Format diente als Grundlage für die Übertragung der Produktdaten an Algolia.

Vorteile:

• Schlanke Datensätze bleiben unter dem Algolia-Limit und sorgen für hohe Performance.

• Die Suchergebnisse aus Algolia entsprechen in Struktur und Inhalt exakt dem, was das Frontend erwartet – ohne zusätzliche Übersetzungslogik oder Konvertierungen.

3. Verkaufskanäle, Währungen und Sprachen

Herausforderung:
All4Golf betreibt mehrere internationale Verkaufskanäle, die sich sowohl in den angebotenen Produkten als auch in den verwendeten Währungen unterscheiden. Jeder dieser Kanäle wird zusätzlich in mehreren Sprachen angeboten. Das bedeutet:

• Produkte sind nicht überall identisch verfügbar.

• Preise variieren je nach Land bzw. Währung.

• Alle Inhalte müssen in der jeweiligen Sprache korrekt ausgespielt werden.

Diese Kombination aus Länder-, Währungs- und Sprachvarianten stellt hohe Anforderungen an die Datenstruktur und die Indexierung in Algolia – insbesondere mit Blick auf Performance, Skalierbarkeit und Pflegeaufwand.

Ausgangssituation:
Zunächst bildete der Algolia-Index nur einen einzelnen Verkaufskanal in einer Sprache ab. Für ein landesweites Rollout mit neun Sprachen reichte dieses Setup jedoch nicht aus. Ziel war es daher, alle relevanten Sprachen und Ländervarianten über Algolia performant abbilden zu können.

Zwei mögliche Lösungsansätze in Algolia:

1. Separate Indices pro Kombination aus Sprache und Land (Währung):
   Jede Variante bekommt einen eigenen Index – also z. B. de_DE, fr_FR, en_US, usw.
   → Vorteile: Schlanke, klare Datensätze mit geringer Komplexität
   → Nachteil: Sehr viele einzelne Indices, die alle synchron gehalten werden müssen
   

2. Ein kombinierter Index mit allen Sprach- und Länderinformationen in einem Datensatz:
   Unterschiede (z. B. Preis, Verfügbarkeit, Bezeichnung) werden innerhalb des Datensatzes abgebildet.
   → Vorteil: Nur ein Index notwendig
   → Nachteile:

   1. Datensätze werden sehr groß und könnten das Algolia-Limit überschreiten

   2. Die komplexe Datenstruktur würde das Frontend deutlich komplizierter machen
      

Entscheidung:
Nach eingehender Bewertung wurde Lösung 1 gewählt:

• Für jede Kombination aus Land und Währung wurde ein eigener Index erstellt

• Die sprachlichen Varianten wurden nicht über separate Indices abgebildet, sondern innerhalb der Datensätze gespeichert (z. B. Produktname, sprechende URLs, Filterlabels)

Konkrete Umsetzung:

• 11 Länder → 11 Indices

• Jeweils eine Index-Replika pro Sortierung (nach Preis und Name, auf- und absteigend) → 4 Repliken pro Index

• Gesamt: 11 Haupt-Indices + 44 Repliken = 55 Algolia-Indices
  

Warum dieser Kompromiss?

• Die größten Unterschiede zwischen Ländern liegen in Preis und Verfügbarkeit, nicht in der Sprache.

• Übersetzte Inhalte beschränken sich auf wenige Felder (z. B. Name, Filter, URL) und können deshalb innerhalb des Datensatzes mitgeführt werden, ohne das Größenlimit signifikant zu belasten.

• Der Aufwand im Frontend für den Umgang mit sprachvarianten Feldern war vertretbar.

• Algolia wurde im Vorfeld direkt eingebunden, um sicherzustellen, dass diese Lösung keine negativen Auswirkungen auf die Performance hat.
  

Fazit:
Die Lösung reduziert die Zahl der Indices drastisch – von ursprünglich 495 (bei voller Aufsplittung nach Sprache & Währung) auf 55. Gleichzeitig bleibt die Struktur performant, aktuell und für das Frontend beherrschbar.

4. Integration im Frontend: Flexibel, aber kein Plug-and-Play

Herausforderung:
Nachdem die Produktdaten erfolgreich in Algolia überführt wurden und eine performante, sprach- und landerspezifische Indexstruktur vorlag, ging es im nächsten Schritt um die nahtlose Integration der Suche in das bestehende Frontend.
Die Herausforderung:

• Anbindung des richtigen Index je nach Sprache und Land

• Implementierung eines intelligenten Suchfelds mit Echtzeit-Vorschlägen

• Darstellung einer vollwertigen Suchergebnisseite – inklusive Filter, Sortierung und Pagination
  

Lösung:
Im Gegensatz zu klassischen Suchlösungen ist Algolia keine „Plug-and-Play“-Komponente, sondern bietet einen modularen Ansatz: Die Suche wird aus einer Vielzahl von sogenannten Widgets zusammengesetzt, die individuell integriert und gestylt werden müssen. Dabei unterstützt Algolia verschiedene Frameworks – von Vanilla JavaScript über React, Angular und Vue bis hin zu Lösungen für native mobile Apps für Android und iOS.

Für All4Golf kam das Vue-Ökosystem zum Einsatz, da das Frontend auf Nuxt.js basiert. Die Wahl fiel entsprechend auf Algolia Vue InstantSearch Widgets – eine Library, die vorgefertigte Komponenten für Filter, Sortierung, Ergebnislisten oder Autovervollständigung bereitstellt.

Fazit:
Dank der konsequent vorbereiteten Datenstruktur und des modularen Aufbaus der Algolia-Widgets konnte eine flexible, performante Suche umgesetzt werden – individuell anpassbar, aber tief in das Frontend integriert.

Recommendations: User Tracking & KI Engine

Die Integration von Algolia ist nicht nur ein technisches Such-Upgrade – sie eröffnet auch neue Möglichkeiten, um Nutzerverhalten intelligent zu analysieren und darauf zu reagieren. Zwei Features stehen dabei im Fokus: Event-Tracking und der Einsatz einer Recommendation Engine auf KI-Basis.

Nutzerverhalten verstehen – mit Events & Insights

Um die Suche gezielt weiterzuentwickeln, ist es entscheidend zu wissen, wie sie genutzt wird. Dafür haben wir bei All4Golf ein intelligentes Tracking-Setup umgesetzt: 

Über den Google Tag Manager werden Nutzeraktionen (z. B. Suchbegriffe, Klicks auf Ergebnisse, Filterkombinationen ohne Treffer) erfasst und anschließend im gewünschten Format an Algolia gesendet – entsprechend der offiziellen GTM-Anleitung von Algolia.

Diese Events fließen in die Algolia Insights API und liefern wertvolle Erkenntnisse:

• Welche Produkte performen in der Suche besonders gut?

• Welche Relevanzregeln greifen (nicht)?

• Wo springen Nutzer*innen ab?

Relevante Produkte – mit Algolia Recommend

Auf Basis der getrackten Daten haben wir bei All4Golf zusätzlich Algolia Recommend integriert – eine KI-gestützte Recommendation Engine. Sie sorgt dafür, dass Nutzer:innen nicht nur Suchergebnisse, sondern auch kontextbezogene Produktempfehlungen erhalten:

• auf der Startseite (z. B. Trending Products)

• in der Warenkorbansicht (z. B. Frequently Bought Together)

• auf Produktdetailseiten (z. B. Ähnliche Produkte)

Integriert wurde die Lösung über das Algolia Nuxt Modul.

Das Ergebnis: ein dynamisches Einkaufserlebnis mit höherer Relevanz und steigender Conversion.

Fazit: Mit Event-Tracking und KI-Recommendations wird Algolia zur lernenden Suchplattform. Bei All4Golf sind beide Features bereits produktiv im Einsatz – und liefern die Basis für eine kontinuierlich bessere, personalisierte Produktsuche.

Fazit: Bessere Produktsuche mit Algolia – wenn man es richtig macht

Die Algolia-Integration bei All4Golf zeigt, welches Potenzial in einer maßgeschneiderten Suchlösung steckt – vorausgesetzt, Architektur, Datenstruktur und Frontend spielen präzise zusammen. 

Durch die enge Zusammenarbeit zwischen Entwicklung und Kunde konnten wir eine performante, skalierbare Suche realisieren, die spürbaren Mehrwert für Nutzer:innen schafft – und gleichzeitig eine zukunftssichere Basis für internationale Wachstumsszenarien legt.