AJAX search

Die AJAX-Suche ersetzt die Standardsuche von WooCommerce. Ergebnisse erscheinen live während der Eingabe - ohne Neuladen der Seite.

Modul aktivieren

Gehen Sie zu WooCommerce > Polski > Storefront-Module und aktivieren Sie die Option AJAX Search. Das Modul ersetzt automatisch das Standard-Such-Widget von WooCommerce.

Durchsuchte Felder

Die Suchleiste durchsucht mehrere Produktfelder gleichzeitig:

SKU (Artikelnummer)

Der Kunde kann eine Produkt-SKU oder einen Teil davon eingeben. Die SKU-Suche ist besonders in B2B-Shops nützlich, in denen Kunden Produkte nach Artikelnummern bestellen.

Hersteller

Wenn das Modul Hersteller aktiv ist, bezieht die Suche den Herstellernamen in die Ergebnisse ein. Die Eingabe von z. B. “Samsung” zeigt alle Produkte dieses Herstellers an.

GTIN (EAN/UPC)

Suche nach GTIN/EAN/UPC-Barcodes. Der Kunde kann einen vollständigen Barcode oder einen Teil davon eingeben, um ein Produkt zu finden.

Zusätzliche Felder

• Produktname
• Kurzbeschreibung
• Kategorien
• Schlagwörter
• Attribute (Farbe, Größe usw.)

Konfiguration der durchsuchten Felder: WooCommerce > Polski > Storefront-Module > AJAX Search > Suchfelder.

Suchergebnisse

Das Ergebnis-Dropdown zeigt an:

• Produkt-Miniaturbild
• Produktname (mit Hervorhebung des übereinstimmenden Fragments)
• Preis
• Kategorie
• Bewertung (Sterne)
• Verfügbarkeitsstatus

Standardmäßig werden bis zu 8 Vorschläge angezeigt. Das Limit lässt sich ändern:

add_filter('polski/ajax_search/results_limit', function (): int {
    return 12;
});

Die Mindestanzahl an Zeichen für den Start der Suche beträgt 3. Zum Ändern:

add_filter('polski/ajax_search/min_chars', function (): int {
    return 2;
});

REST-API-Endpunkt

Die Suche verwendet einen eigenen REST-API-Endpunkt anstelle von admin-ajax.php, was eine bessere Leistung bietet.

Endpunkt: GET /wp-json/polski/v1/search

Parameter:

Parameter	Typ	Erforderlich	Beschreibung
q	string	Ja	Suchbegriff
limit	int	Nein	Ergebnislimit (Standard 8)
cat	int	Nein	Kategorie-ID zum Filtern

Beispielanfrage:

curl "https://yourstore.com/wp-json/polski/v1/search?q=t-shirt&limit=5"

Beispielantwort:

{
  "results": [
    {
      "id": 123,
      "title": "Cotton T-shirt",
      "url": "https://yourstore.com/product/cotton-t-shirt/",
      "image": "https://yourstore.com/wp-content/uploads/tshirt.jpg",
      "price_html": "<span class=\"amount\">49.00&nbsp;PLN</span>",
      "category": "Clothing",
      "in_stock": true,
      "rating": 4.5
    }
  ],
  "total": 1,
  "query": "t-shirt"
}

Gutenberg-Block

Das Modul stellt einen Block Polski - AJAX Search im Gutenberg-Editor bereit. Der Block kann in jedem Beitrag, jeder Seite oder jedem Widget platziert werden.

Block-Optionen:

• Placeholder - Platzhaltertext im Suchfeld
• Breite - Feldbreite (auto, voll, benutzerdefiniert in px)
• Symbol - Lupensymbol ein-/ausblenden
• Kategoriefilter - Dropdown zur Kategoriefilterung neben dem Suchfeld anzeigen
• Stil - abgerundete Ecken, Rahmen, Schatten

So fügen Sie den Block ein: Klicken Sie im Gutenberg-Editor auf + und suchen Sie nach Polski oder AJAX Search.

Elementor-Widget

Für Elementor-Nutzer steht ein dediziertes Widget Polski AJAX Search zur Verfügung. Das Widget befindet sich in der Kategorie Polski for WooCommerce in der Elementor-Seitenleiste.

Die Widget-Optionen umfassen alle Einstellungen des Gutenberg-Blocks sowie:

• Typografie-Steuerung (Schriftfamilie, Größe, Stärke)
• Farben (Hintergrund, Text, Rahmen, Hover)
• Außen- und Innenabstände
• Einblendeanimation der Ergebnisse
• Responsivität (Einstellungen je Breakpoint)

Shortcode [polski_ajax_search]

Parameter

Parameter	Typ	Standard	Beschreibung
placeholder	string	Search products...	Platzhaltertext
width	string	100%	Feldbreite
show_icon	string	yes	Lupensymbol anzeigen
show_cat	string	no	Kategoriefilter anzeigen
limit	int	8	Maximale Anzahl an Vorschlägen

Anwendungsbeispiel

[polski_ajax_search placeholder="What are you looking for?" show_cat="yes" limit="10"]

Einfügen im Theme-Header

// In der functions.php des Themes
add_action('wp_body_open', function (): void {
    echo do_shortcode('[polski_ajax_search placeholder="Search..." width="400px"]');
});

Debouncing und Leistung

Die Suche verwendet ein Debouncing von 300 ms - die Anfrage an den Server wird erst 300 ms nach dem letzten Tastendruck gesendet. Das verhindert übermäßige Abfragen bei schneller Eingabe.

Die Ergebnisse werden clientseitig in der Browser-Sitzung zwischengespeichert. Die erneute Eingabe desselben Begriffs erzeugt keine Serveranfrage.

Serverseitig werden die Ergebnisse über die WordPress-Transient-API zwischengespeichert (standardmäßig 1 Stunde). Der Cache wird automatisch geleert, wenn ein Produkt gespeichert, hinzugefügt oder gelöscht wird.

// Cache-Zeit ändern
add_filter('polski/ajax_search/cache_ttl', function (): int {
    return 1800; // 30 Minuten in Sekunden
});

CSS-Gestaltung

CSS-Klassen des Moduls:

• .polski-ajax-search - Suchcontainer
• .polski-ajax-search__input - Textfeld
• .polski-ajax-search__results - Ergebnis-Dropdown
• .polski-ajax-search__item - einzelnes Ergebnis
• .polski-ajax-search__item--active - hervorgehobenes Ergebnis (Tastaturnavigation)
• .polski-ajax-search__highlight - Hervorhebung des übereinstimmenden Fragments
• .polski-ajax-search__loading - Ladespinner

Barrierefreiheit

Die Suche unterstützt vollständige Tastaturnavigation:

• Pfeil nach unten/oben - Navigation durch die Ergebnisse
• Enter - zum ausgewählten Produkt wechseln
• Escape - Dropdown schließen
• ARIA-Attribute: role="combobox", aria-expanded, aria-activedescendant

Probleme melden: github.com/wppoland/polski/issues

Diese Seite dient ausschließlich Informationszwecken und stellt keine Rechtsberatung dar. Konsultieren Sie vor der Umsetzung einen Anwalt. Polski for WooCommerce ist Open-Source-Software (GPLv2), die ohne Gewährleistung bereitgestellt wird.