AJAX filters

Mit AJAX-Filtern können Kunden die Produktliste ohne Neuladen der Seite eingrenzen. Die Produkte aktualisieren sich live nach der Auswahl der Filter.

Modul aktivieren

Gehen Sie zu WooCommerce > Polski > Storefront-Module und aktivieren Sie die Option AJAX Filters. Das Modul stellt Filter als Gutenberg-Block, Shortcode und Widget bereit.

Verfügbare Filtertypen

Marken (Hersteller)

Filter nach Hersteller/Marke. Erfordert das aktive Modul Hersteller in Polski for WooCommerce. Zeigt eine Markenliste mit Produktanzahlen an.

Preis

Preisspannen-Schieberegler mit Feldern für Min/Max. Die Spanne passt sich automatisch an die aktuell angezeigten Produkte an.

Optionen:

Schieberegler
Textfelder Min/Max
Preisbereiche (z. B. 0-50 PLN, 50-100 PLN, 100+ PLN)

Konfiguration der Preisbereiche:

add_filter('polski/ajax_filters/price_ranges', function (): array {
    return [
        ['min' => 0, 'max' => 50, 'label' => 'Up to 50 PLN'],
        ['min' => 50, 'max' => 100, 'label' => '50 - 100 PLN'],
        ['min' => 100, 'max' => 200, 'label' => '100 - 200 PLN'],
        ['min' => 200, 'max' => 0, 'label' => 'Above 200 PLN'],
    ];
});

Lagerstatus

Filter, mit dem sich nur auf Lager verfügbare Produkte anzeigen lassen. Optionen:

Auf Lager - Produkte mit stock_status = instock
Auf Nachbestellung - Produkte mit stock_status = onbackorder
Nicht auf Lager - Produkte mit stock_status = outofstock (standardmäßig ausgeblendet)

Angebot

Checkbox Nur reduzierte Produkte - filtert nur Produkte mit einem aktiven Angebotspreis.

Produktattribute

Dynamische Filter, die automatisch anhand der WooCommerce-Attribute (Farbe, Größe, Material usw.) erzeugt werden. Jedes globale Attribut kann als Filter verwendet werden.

Anzeigetypen für Attribute:

Checkbox-Liste - Standard
Farbmuster - für Attribute mit festgelegten Farben
Buttons - kompakte Auswahl (z. B. Größen S, M, L, XL)
Dropdown - Aufklappliste

AJAX-Verhalten

Nach dem Ändern eines beliebigen Filters:

Es wird eine AJAX-Anfrage mit den ausgewählten Parametern gesendet
Auf der Produktliste wird ein dezenter Spinner/Skeleton angezeigt
Die Produktliste aktualisiert sich ohne Neuladen der Seite
Die Produktanzahlen in den Filtern aktualisieren sich
Nicht verfügbare Filteroptionen werden ausgegraut (aber nicht ausgeblendet)
Die URL im Browser aktualisiert sich mit GET-Parametern (History API)

GET-Fallback (ohne JavaScript)

Das Modul unterstützt einen Fallback-Modus ohne JavaScript. Wenn JS deaktiviert oder nicht verfügbar ist:

Die Filter funktionieren als Standard-HTML-Formular mit GET-Parametern
Nach dem Absenden lädt die Seite mit der gefilterten Produktliste neu
Die Filterparameter werden in der URL gespeichert, z. B.: ?pa_color=red&min_price=50&max_price=200
Gefilterte URLs sind SEO-freundlich und können von Suchmaschinen indexiert werden

Der Fallback-Modus funktioniert automatisch - es ist keine zusätzliche Konfiguration erforderlich.

Gutenberg-Block

Der Block Polski - AJAX Filters ist im Gutenberg-Editor verfügbar. Platzieren Sie ihn in der Seitenleiste der Shop-Seite.

Block-Optionen:

Filtertypen - wählen Sie, welche Filter angezeigt werden
Filterreihenfolge - Sortierung per Drag & Drop
Stil - kompakt, erweitert, Akkordeon
Reset-Button - Button “Filter löschen” ein-/ausblenden
Zähler - Produktanzahl je Option ein-/ausblenden
Einklappen - Bereiche standardmäßig eingeklappt/ausgeklappt

Shortcode `[polski_ajax_filters]`

Parameter

Parameter	Typ	Standard	Beschreibung
`filters`	string	`all`	Filtertypen (durch Komma getrennt)
`style`	string	`expanded`	Stil: `expanded`, `compact`, `accordion`
`show_count`	string	`yes`	Produktzähler anzeigen
`show_reset`	string	`yes`	Reset-Button anzeigen
`columns`	int	`1`	Anzahl der Filterspalten
`ajax`	string	`yes`	AJAX-Modus (no = nur GET)

Anwendungsbeispiel

[polski_ajax_filters filters="category,price,pa_color,stock" style="accordion" show_count="yes"]

Filtern nur nach Attributen

[polski_ajax_filters filters="pa_color,pa_size,pa_material" style="compact"]

Platzieren in der Theme-Seitenleiste

In der Datei sidebar.php oder in Widgets:

echo do_shortcode('[polski_ajax_filters filters="category,price,stock,sale"]');

Integration mit der Paginierung

AJAX-Filter funktionieren mit der WooCommerce-Paginierung. Nach dem Ändern eines Filters kehrt der Benutzer zu Seite 1 der Ergebnisse zurück. Die Paginierung funktioniert auch im AJAX-Modus - das Navigieren zwischen den Seiten setzt die ausgewählten Filter nicht zurück.

Aktive Filter

Aktive Filter werden über der Produktliste als Tags (Chips) angezeigt. Jedes Tag hat einen X-Button, um einen einzelnen Filter zu entfernen. Der Button Alle löschen setzt alle Filter gleichzeitig zurück.

// Position der Leiste mit aktiven Filtern ändern
add_filter('polski/ajax_filters/active_position', function (): string {
    return 'above_products'; // oder 'below_filters', 'both'
});

Leistung

Filterabfragen nutzen die WooCommerce-Datenbankindizes (product_meta_lookup). Für Shops mit einer großen Anzahl an Produkten (10.000+) wird die Verwendung eines Object Cache (Redis/Memcached) empfohlen.

Die Filterergebnisse werden über die Transient API mit einem Schlüssel auf Basis des Hashes der Filterparameter zwischengespeichert. Der Cache wird geleert, wenn sich der Preis, der Lagerstatus oder die Attribute eines Produkts ändern.

CSS-Styling

.polski-ajax-filters - Filtercontainer
.polski-ajax-filters__section - einzelne Filtersektion
.polski-ajax-filters__title - Sektionsüberschrift
.polski-ajax-filters__option - Filteroption (Checkbox/Radio)
.polski-ajax-filters__count - Produktzähler
.polski-ajax-filters__reset - Reset-Button
.polski-ajax-filters__active - Leiste mit aktiven Filtern

Fehlerbehebung

Die Filter aktualisieren die Produktliste nicht - stellen Sie sicher, dass der CSS-Selektor der Produktliste korrekt ist. Standardmäßig sucht das Modul nach .products oder ul.products. Eigene Themes verwenden möglicherweise einen anderen Selektor.

Zähler zeigen 0 an - prüfen Sie, ob die Produkte zugewiesene Attribute, Kategorien und einen Lagerstatus haben. Ein leeres Attribut wird nicht gezählt.

Der Preis-Schieberegler funktioniert nicht - prüfen Sie, ob es einen Konflikt mit jQuery UI mit einem anderen Plugin auf der Seite gibt.

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), die ohne Gewährleistung bereitgestellt wird.