AJAX-Suche

Die AJAX-Suche ersetzt die Standard-WooCommerce-Suche durch eine intelligente Suche mit Echtzeit-Vorschlaegen. Ergebnisse erscheinen sofort waehrend der Eingabe - ohne Seitenneuladung.

Modul aktivieren

Gehen Sie zu WooCommerce > Polski > Shop-Module und aktivieren Sie AJAX-Suche. Das Modul ersetzt automatisch das Standard-Such-Widget.

Durchsuchte Felder

Die Suche durchsucht mehrere Produktfelder gleichzeitig:

SKU (Artikelnummer)

Kunden koennen die SKU-Nummer eines Produkts oder einen Teil davon eingeben. Die SKU-Suche ist besonders nuetzlich in B2B-Shops, in denen Kunden Produkte nach Katalognummern bestellen.

Hersteller

Wenn das Modul Hersteller aktiv ist, beruecksichtigt die Suche den Herstellernamen. Die Eingabe von “Samsung” zeigt alle Produkte dieser Marke.

GTIN (EAN/UPC)

Suche nach GTIN/EAN/UPC-Barcodes. Kunden koennen den vollstaendigen Barcode oder einen Teil davon eingeben.

Zusaetzliche Felder

• Produktname
• Kurzbeschreibung
• Kategorien
• Tags
• Attribute (Farbe, Groesse usw.)

Konfiguration der durchsuchten Felder: WooCommerce > Polski > Shop-Module > AJAX-Suche > Suchfelder.

Suchergebnisse

Das Dropdown mit Ergebnissen zeigt:

• Produktminiatur
• Produktname (mit Hervorhebung passender Fragmente)
• Preis
• Kategorie
• Bewertung (Sterne)
• Verfuegbarkeitsstatus

Standardmaessig werden bis zu 8 Vorschlaege angezeigt. Das Limit kann geaendert werden:

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

Minimale Zeichenzahl zum Start der Suche ist 3. Aenderung:

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

REST-API-Endpunkt

Die Suche nutzt einen eigenen REST-API-Endpunkt statt admin-ajax.php, was bessere Leistung gewaehrleistet.

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://ihrshop.pl/wp-json/polski/v1/search?q=tshirt&limit=5"

Beispielantwort:

{
  "results": [
    {
      "id": 123,
      "title": "Baumwoll-T-Shirt",
      "url": "https://ihrshop.pl/produkt/baumwoll-tshirt/",
      "image": "https://ihrshop.pl/wp-content/uploads/tshirt.jpg",
      "price_html": "<span class=\"amount\">49,00&nbsp;PLN</span>",
      "category": "Bekleidung",
      "in_stock": true,
      "rating": 4.5
    }
  ],
  "total": 1,
  "query": "tshirt"
}

Gutenberg-Block

Der Block Polski - AJAX-Suche ist im Gutenberg-Editor verfuegbar. Platzieren Sie ihn in jedem Beitrag, jeder Seite oder jedem Widget.

Blockoptionen:

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

Klicken Sie im Editor auf + und suchen Sie nach Polski oder AJAX-Suche.

Elementor-Widget

Das Widget Polski AJAX Search ist in der Kategorie Polski for WooCommerce im Elementor-Panel verfuegbar.

Zusaetzlich zu den Gutenberg-Block-Optionen bietet das Widget:

• Typografie-Kontrolle (Schriftfamilie, Groesse, Staerke)
• Farben (Hintergrund, Text, Rahmen, Hover)
• Raender und Abstande
• Animation fuer das Erscheinen der Ergebnisse
• Responsivitaet (Einstellungen pro Breakpoint)

Shortcode [polski_ajax_search]

Parameter

Parameter	Typ	Standard	Beschreibung
placeholder	string	Produkte suchen...	Platzhaltertext
width	string	100%	Feldbreite
show_icon	string	yes	Lupensymbol anzeigen
show_cat	string	no	Kategoriefilter anzeigen
limit	int	8	Maximale Vorschlaege

Verwendungsbeispiel

[polski_ajax_search placeholder="Was suchen Sie?" show_cat="yes" limit="10"]

Einfuegung im Theme-Header

// In functions.php des Themes
add_action('wp_body_open', function (): void {
    echo do_shortcode('[polski_ajax_search placeholder="Suchen..." 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. Dies verhindert uebermassig viele Anfragen beim schnellen Tippen.

Ergebnisse werden clientseitig in der Browser-Sitzung gecacht. Erneute Eingabe desselben Begriffs generiert keine Serveranfrage.

Serverseitig werden Ergebnisse in der WordPress Transient API gecacht (Standard 1 Stunde). Der Cache wird nach dem Speichern, Hinzufuegen oder Loeschen eines Produkts automatisch geleert.

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

CSS-Styling

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 passenden Fragments
• .polski-ajax-search__loading - Lade-Spinner

Barrierefreiheit

Die Suche unterstuetzt vollstaendige Tastaturnavigation:

• Pfeil runter/hoch - Navigation durch Ergebnisse
• Enter - Zum gewaehlten Produkt gehen
• Escape - Dropdown schliessen
• ARIA-Attribute: role="combobox", aria-expanded, aria-activedescendant

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

Diese Seite dient ausschließlich zu Informationszwecken und stellt keine Rechtsberatung dar. Konsultieren Sie vor der Umsetzung einen Anwalt. Polski for WooCommerce ist Open-Source-Software (GPLv2) ohne Garantie.