Predictive search

Sieve enthält eine prädiktive Produktsuche: ein Suchfeld, das passende Produkte in einem Dropdown anzeigt, während der Kunde tippt. Es ist ein eigenständiges Widget, getrennt vom Facettenfilter, sodass Sie es überall platzieren können - in einem Header, auf einer Landingpage oder über einem Archiv.

Platzierung

Verwenden Sie den Shortcode:

[sieve_search]

Oder fügen Sie den Block Sieve Search im Editor hinzu. Beide rendern dasselbe barrierefreie Suchfeld.

Shortcode-Attribute

Attribut	Standard	Beschreibung
placeholder	Search products	Platzhaltertext, der im leeren Eingabefeld angezeigt wird.
button	yes	Absende-Button neben dem Eingabefeld anzeigen.
button_text	Search	Beschriftung des Absende-Buttons.
limit	6	Maximale Anzahl an Vorschlägen im Dropdown (1-20).
min_chars	2	Zeichen, die erforderlich sind, bevor Vorschläge erscheinen (1-10).
in_stock_only	yes	Vorschläge auf vorrätige Produkte beschränken.

Beispiel:

[sieve_search placeholder="Find products…" limit="8" in_stock_only="no"]

Funktionsweise

Während der Kunde tippt, fordert Sieve Treffer von einem öffentlichen REST-Endpunkt an und rendert ein Dropdown mit Produkten samt Miniaturbild, Name, SKU und Preis. Jedes Ergebnis verweist direkt auf das Produkt, und ein Link “alle Ergebnisse anzeigen” öffnet die vollständige Suchseite.

Die Vorschläge basieren auf der eigenen Produktsuche von WooCommerce, respektieren also die Katalogsichtbarkeit und bleiben korrekt, während Ihr Katalog wächst. Das Suchskript ist ein kleines, eigenständiges Bundle: Seiten, die nur [sieve_search] verwenden, laden nie die Facettenfilter-Engine, was sie schnell hält.

Was gefunden wird

Das Dropdown geht über Produkttitel hinaus:

• Titel und SKUs, abgeglichen mit einem vorab erstellten, diakritikfreien Token-Index.
• Kategorien. Produktkategorien, deren Name auf den Begriff passt, erscheinen als eigene Gruppe im Dropdown und verlinken direkt auf das gefilterte Kategoriearchiv. So kann ein Kunde zu einer ganzen Kategorie springen statt zu einem einzelnen Produkt.
• Beschreibungen und Inhalte über die eigene Relevanzsuche von WooCommerce, die als Rückfalloption dient, wenn der Token-Index nichts findet.

Wenn sowohl Produkte als auch Kategorien passen, zeigt das Dropdown zwei beschriftete Gruppen (Kategorien und Produkte). Die Tastaturnavigation bewegt sich durch beide.

Diakritikunabhängig und tippfehlertolerant

Der Abgleich ignoriert diakritische Zeichen: Ein Kunde, der lozko tippt, findet łóżko, und zolty findet żółty. Das funktioniert in beide Richtungen, sodass es keine Rolle spielt, ob der Kunde oder der Produktname die akzentuierten Zeichen verwendet.

Auch kleine Tippfehler werden toleriert. Eine Anfrage wie zoltyy findet weiterhin żółty, weil Sieve das getippte Wort mit ähnlichen Produktwörtern vergleicht und einen nahen Treffer akzeptiert. Kategorien werden auf dieselbe diakritikunabhängige Weise abgeglichen.

Sowohl der Produkttext als auch die Anfrage werden auf dieselbe Weise in einen schnellen Token-Index normalisiert, sodass dies auch bei großen Katalogen schnell bleibt. Die Installation oder Aktualisierung auf diese Version baut den Suchindex einmalig im Hintergrund neu auf.

Suche als Filter

Das eigenständige Feld [sieve_search] oben navigiert zu einem Produkt oder zur Suchseite. Innerhalb des Facettenfilters verhält sich die Suche anders: Sie ist ein Filter. Fügen Sie eine Search-Facette zu Ihrem [sieve]-Filter hinzu, und der Kunde kann tippen, um das Live-Produktraster an Ort und Stelle einzugrenzen, kombiniert mit jeder anderen Facette.

• Das Raster grenzt sich beim Tippen ein. Wie jede andere Facette aktualisieren sich die Ergebnisse live ohne Seitenneuladen, und der getippte Begriff spiegelt sich in der URL wider (sodass er teilbar ist und Vor-/Zurück-Buttons übersteht).
• Derselbe diakritik- und tippfehlertolerante Index. Die Suche im Raster verwendet genau denselben diakritikfreien Token-Index wie das Dropdown, sodass Raster und Vorschläge stets übereinstimmen: lozko grenzt das Raster auf łóżko ein, und ein kleiner Tippfehler passt weiterhin.
• Ein prädiktives Dropdown hilft. Unter dem Eingabefeld erscheint eine schmale Vorschlagsliste zur Tastaturauswahl; die Auswahl eines Vorschlags setzt einen präzisen Begriff und filtert das Raster an Ort und Stelle neu (es wird nicht zu einer anderen Seite navigiert).
• Es ist ein entfernbarer Filter. Die aktive Suche erscheint als Chip in der Symbolleiste neben Ihren anderen Filtern; das Entfernen des Chips (oder das Leeren des Felds) stellt das vollständige Raster wieder her.
• Zähler bleiben ehrlich. Die Zähler der anderen Facetten aktualisieren sich auf die durchsuchte Menge, sodass Sie nie eine Option sehen, die zu null Ergebnissen führen würde.
• Eingegrenzte Vorschläge. Wenn andere Facetten aktiv sind, werden die Vorschläge auf diese Auswahl beschränkt, sodass eine Suche „innerhalb” der aktuellen Filter nur Produkte vorschlägt, die tatsächlich erreichbar sind.

Die Suche im Raster gleicht Titel und SKUs über den Index ab. Produkte, die nur über ihren Beschreibungstext passen würden, sind über das eigenständige Widget [sieve_search] erreichbar, nicht über den Filter im Raster.

Barrierefreiheit

Das Suchfeld folgt dem ARIA-Combobox-Muster:

• Das Eingabefeld ist eine combobox, die eine listbox mit Optionen steuert.
• Kategorie- und Produktvorschläge werden als beschriftete Gruppen innerhalb der Listbox bereitgestellt.
• Pfeil nach unten / Pfeil nach oben bewegen sich durch alle Vorschläge (Kategorien und Produkte), Enter öffnet den aktiven, Escape schließt das Dropdown.
• Die aktive Option wird für Screenreader mit aria-activedescendant verfolgt.
• Wenn JavaScript nicht verfügbar ist, sendet das Feld an die Standard-Produktsuche von WooCommerce, sodass es immer funktioniert.

Leistung

• Anfragen werden während des Tippens verzögert (debounced), und eine laufende Anfrage wird abgebrochen, sobald ein neuer Tastenanschlag eintrifft.
• Miniaturbilder werden verzögert geladen (lazy).
• Kein Layout-Shift: Das Dropdown ist absolut positioniert und reserviert keinen Platz, bis es sich öffnet.