Zum Inhalt springen

AJAX-Filter

AJAX-Filter ermoeglichen es Kunden, die Produktliste ohne Seitenneuladung einzugrenzen. Die Filterung erfolgt sofort - Produkte aktualisieren sich in Echtzeit nach Auswahl der Kriterien.

Gehen Sie zu WooCommerce > Polski > Shop-Module und aktivieren Sie die Option AJAX-Filter. Filter stehen als Gutenberg-Block, Shortcode und Widget bereit.

AJAX-Filter, Wunschliste und Produktvergleich auf der Shop-Seite

Hierarchischer Filter mit aufklappbarem Kategoriebaum. Die Produktanzahl wird neben jeder Kategorie angezeigt. Leere Kategorien sind standardmaessig ausgeblendet.

Optionen:

  • Anzeige als Baum oder flache Liste
  • Mehrfachauswahl (Checkboxen) oder Einzelauswahl (Radio)
  • Auf-/Zuklappen von Unterkategorien

Filter nach Hersteller/Marke. Erfordert aktives Modul Hersteller in Polski for WooCommerce. Zeigt eine Markenliste mit Produktanzahl an.

Preisspannen-Schieberegler (Range Slider) mit Min/Max-Feldern. Der Bereich passt sich automatisch an die aktuell angezeigten Produkte an.

Optionen:

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

Konfiguration der Preisintervalle:

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

Filter zur Anzeige nur verfuegbarer Produkte. Optionen:

  • Auf Lager - Produkte mit stock_status = instock
  • Auf Bestellung - Produkte mit stock_status = onbackorder
  • Nicht verfuegbar - Produkte mit stock_status = outofstock (standardmaessig ausgeblendet)

Checkbox Nur Produkte im Angebot - filtert ausschliesslich Produkte mit aktivem Aktionspreis.

Dynamische Filter, automatisch generiert basierend auf WooCommerce-Attributen (Farbe, Groesse, Material usw.). Jedes globale Attribut kann als Filter verwendet werden.

Anzeigetypen der Attribute:

  • Checkbox-Liste - Standard
  • Farbfelder - fuer Attribute mit eingestellten Farben
  • Buttons - kompakte Auswahl (z.B. Groessen S, M, L, XL)
  • Dropdown - Auswahlliste

Nach Aenderung eines beliebigen Filters:

  1. Eine AJAX-Anfrage mit den gewaehlten Parametern wird gesendet
  2. Ein dezenter Spinner/Skeleton wird auf der Produktliste angezeigt
  3. Die Produktliste aktualisiert sich ohne Seitenneuladung
  4. Produktzaehler in den Filtern aktualisieren sich
  5. Nicht verfuegbare Filteroptionen werden ausgegraut (aber nicht ausgeblendet)
  6. Die URL im Browser aktualisiert sich mit GET-Parametern (History API)

Das Modul unterstuetzt einen Fallback-Modus ohne JavaScript. Wenn JS deaktiviert oder nicht verfuegbar ist:

  • Filter funktionieren als Standard-HTML-Formular mit GET-Parametern
  • Nach Absenden wird die Seite mit gefilterter Produktliste neu geladen
  • Filterparameter werden in der URL gespeichert, z.B.: ?pa_color=red&min_price=50&max_price=200
  • Gefilterte URLs sind SEO-freundlich und koennen von Suchmaschinen indexiert werden

Der Fallback-Modus funktioniert automatisch - keine zusaetzliche Konfiguration erforderlich.

Der Block Polski - AJAX-Filter ist im Gutenberg-Editor verfuegbar. Platzieren Sie ihn in der Seitenleiste (Sidebar) der Shop-Seite.

Blockoptionen:

  • Filtertypen - Auswahl, welche Filter angezeigt werden
  • Reihenfolge - Drag & Drop Sortierung
  • Stil - kompakt, erweitert, Akkordeon
  • Reset-Button - Zeige/Verberge “Filter zuruecksetzen”-Button
  • Zaehler - Zeige/Verberge Produktanzahl bei jeder Option
  • Zuklappen - Standardmaessig zu-/aufgeklappt
ParameterTypStandardBeschreibung
filtersstringallFiltertypen (durch Komma getrennt)
stylestringexpandedStil: expanded, compact, accordion
show_countstringyesProduktzaehler anzeigen
show_resetstringyesReset-Button anzeigen
columnsint1Anzahl der Filterspalten
ajaxstringyesAJAX-Modus (no = nur GET)
[polski_ajax_filters filters="category,price,pa_color,stock" style="accordion" show_count="yes"]
[polski_ajax_filters filters="pa_color,pa_size,pa_material" style="compact"]

In sidebar.php oder in Widgets:

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

Filter arbeiten mit der WooCommerce-Paginierung zusammen. Nach einer Filteraenderung wird Seite 1 angezeigt. Das Blaettern zwischen Seiten setzt die Filter nicht zurueck.

Ueber der Produktliste erscheinen aktive Filter als Tags (Chips). Klicken Sie auf X, um einen Filter zu entfernen. Der Button Alle zuruecksetzen setzt alle Filter auf einmal zurueck.

// Position der aktiven Filterleiste aendern
add_filter('polski/ajax_filters/active_position', function (): string {
return 'above_products'; // oder 'below_filters', 'both'
});

Filterabfragen nutzen WooCommerce-Datenbankindizes (product_meta_lookup). Fuer Shops mit vielen Produkten (10.000+) wird die Verwendung von Object Cache (Redis/Memcached) empfohlen.

Filterergebnisse werden in der Transient API mit einem auf dem Hash der Filterparameter basierenden Schluessel gecacht. Der Cache wird bei Preis-, Lagerbestands- oder Attributaenderungen geleert.

  • .polski-ajax-filters - Filtercontainer
  • .polski-ajax-filters__section - Einzelner Filterabschnitt
  • .polski-ajax-filters__title - Abschnittstitel
  • .polski-ajax-filters__option - Filteroption (Checkbox/Radio)
  • .polski-ajax-filters__count - Produktzaehler
  • .polski-ajax-filters__reset - Reset-Button
  • .polski-ajax-filters__active - Leiste aktiver Filter

Filter aktualisieren die Produktliste nicht - stellen Sie sicher, dass der CSS-Selektor der Produktliste korrekt ist. Standardmaessig sucht das Modul nach .products oder ul.products. Benutzerdefinierte Themes verwenden moeglicherweise einen anderen Selektor.

Zaehler zeigen 0 - pruefen Sie, ob Produkten Attribute, Kategorien und Lagerbestand zugewiesen sind. Ein leeres Attribut wird nicht gezaehlt.

Preisschieberegler funktioniert nicht - pruefen Sie, ob auf der Seite kein Konflikt mit jQuery UI aus einem anderen Plugin besteht.

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.