AJAX Kurssuche & Filter
Live-Filterung von Kursen ohne Seitenneuladen
Filter
Suche
AJAX
Frontend
Kurs-Anzeige
AJAX Kurssuche & Filter
Die Kurs-Uebersichtsseite bietet eine Live-Filterung ohne Seitenneuladen. Besucher koennen Kurse nach verschiedenen Kriterien filtern.
Funktionsweise
Was ist AJAX-Filterung?
| Ohne AJAX | Mit AJAX |
|---|---|
| Seite laedt komplett neu | Nur Kurse werden aktualisiert |
| Scrollposition geht verloren | Position bleibt erhalten |
| Langsamer, "springt" | Schnell, fluesig |
Filter-Elemente
Die Filter-Leiste zeigt (je nach Konfiguration):
┌─────────────────────────────────────────────────────────────────┐
│ [ Alle Kursarten ▼ ] [ Alle Kategorien ▼ ] [ Alle Monate ▼ ] │
│ │
│ [ 🔍 Filtern ] [ ↺ Zuruecksetzen ] │
└─────────────────────────────────────────────────────────────────┘
Filter-Optionen
1. Kursarten (Produktart)
Filtert nach der Art des Kurses:
| Option | Was wird gezeigt |
|---|---|
| Alle Kursarten | Alle Kurse |
| Praesenz-Kurs | Nur Praesenz-Kurse (Typ A) |
| Workshop | Nur Workshops (Typ B) |
| Webinar | Nur Online-Webinare (Typ C, G) |
| Video-Kurs | Nur Video-Kurse (Typ E) |
| Coaching | Coaching-Angebote (Typ D, I) |
2. Kategorien
Filtert nach WordPress-Kategorien:
[ Alle Kategorien ▼ ]
├── Longieren (5)
├── Reiten (8)
├── Bodenarbeit (3)
└── Mental Coaching (2)
Die Zahl in Klammern zeigt die Anzahl der verfuegbaren Kurse.
3. Monate
Filtert nach Kurstermin:
[ Alle Monate ▼ ]
├── Januar 2026 (3)
├── Februar 2026 (5)
├── Maerz 2026 (4)
└── ...
Kaskadierende Filter
Was bedeutet "kaskadierend"?
Die Filter beeinflussen sich gegenseitig:
- Sie waehlen Kategorie: Longieren
- Automatisch werden nur noch Monate angezeigt, in denen Longier-Kurse stattfinden
- Kursarten zeigen nur noch Typen, die in "Longieren" verfuegbar sind
Beispiel:
Schritt 1: Kategorie = "Longieren"
┌─────────────────────────────────┐
│ Alle Monate ▼ │
│ ├── Februar 2026 (2) │ ← Nur noch Monate mit
│ ├── April 2026 (1) │ Longier-Kursen
│ └── Juni 2026 (3) │
└─────────────────────────────────┘
Schritt 2: Monat = "Februar 2026"
┌─────────────────────────────────┐
│ Alle Kursarten ▼ │
│ ├── Praesenz-Kurs (1) │ ← Nur noch Kursarten
│ └── Workshop (1) │ im Februar bei Longieren
└─────────────────────────────────┘
Vorteil
- Keine leeren Ergebnisse: Nur gueltige Kombinationen waehlbar
- Uebersichtlicher: Irrelevante Optionen werden ausgeblendet
- Benutzerfreundlich: Weniger Klicks bis zum Ergebnis
Einrichtung
Shortcode verwenden
Der Filter wird automatisch angezeigt, wenn Sie den [kurs_cards] Shortcode verwenden:
[kurs_cards filter="yes"]
Parameter
| Parameter | Beschreibung | Standard |
|---|---|---|
filter |
Filter anzeigen: yes/no | yes |
produktart |
Vorauswahl Kursart | - |
category |
Vorauswahl Kategorie | - |
month |
Vorauswahl Monat | - |
columns |
Spaltenanzahl (1-4) | 3 |
limit |
Max. Anzahl Kurse | 12 |
Beispiele
Mit Filter (Standard):
[kurs_cards]
Ohne Filter:
[kurs_cards filter="no"]
Mit Vorauswahl:
[kurs_cards category="longieren" filter="yes"]
Nur bestimmte Kursart:
[kurs_cards produktart="videokurs" filter="no"]
URL-Parameter
Die Filter unterstuetzen direkte URL-Parameter:
https://example.com/kurse/?kurs_produktart=videokurs&kurs_category=longieren
Verfuegbare Parameter
| Parameter | Beschreibung | Beispiel |
|---|---|---|
kurs_produktart |
Kursart-Slug | workshop, videokurs |
kurs_category |
Kategorie-Slug | longieren, reiten |
kurs_month |
Monat | 2026-02, 2026-03 |
Anwendungsfall: Direktlinks
Erstellen Sie Links fuer Marketing:
<!-- Link zu allen Video-Kursen -->
<a href="/kurse/?kurs_produktart=videokurs">
Unsere Video-Kurse
</a>
<!-- Link zu Longier-Workshops -->
<a href="/kurse/?kurs_category=longieren&kurs_produktart=workshop">
Longier-Workshops
</a>
Einstellungen
Filter aktivieren/deaktivieren
Kurse → Einstellungen → Kurs-Anzeige
| Option | Beschreibung |
|---|---|
| Filter anzeigen | Master-Schalter fuer Filter |
| Produktart-Filter | Kursarten-Dropdown ein/aus |
| Kategorie-Filter | Kategorien-Dropdown ein/aus |
| Monats-Filter | Monats-Dropdown ein/aus |
| Kaskadierung | Gegenseitige Einschraenkung ein/aus |
AJAX aktivieren
AJAX ist standardmaessig aktiviert. Zum Deaktivieren (nicht empfohlen):
[kurs_cards ajax="no"]
Verhalten bei Ergebnissen
Kurse gefunden
┌─────────────────────────────────────────────────────────────────┐
│ Filter: Longieren | Februar 2026 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ [Bild] │ │ [Bild] │ │ [Bild] │ │
│ │ Kurs 1 │ │ Kurs 2 │ │ Kurs 3 │ │
│ │ 12.02. │ │ 15.02. │ │ 28.02. │ │
│ │ 49 EUR │ │ 89 EUR │ │ 69 EUR │ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
Keine Kurse gefunden
┌─────────────────────────────────────────────────────────────────┐
│ Filter: Video-Kurs | Dezember 2026 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 📭 │
│ │
│ Keine Kurse gefunden │
│ │
│ Fuer diese Filterauswahl sind aktuell keine Kurse │
│ verfuegbar. Probieren Sie andere Filter oder setzen │
│ Sie die Auswahl zurueck. │
│ │
│ [ ↺ Filter zuruecksetzen ] │
│ │
└─────────────────────────────────────────────────────────────────┘
Ladeanzeige
Waehrend der AJAX-Abfrage:
┌─────────────────────────────────────────────────────────────────┐
│ [ Alle Kursarten ▼ ] [ Longieren ▼ ] [ Alle Monate ▼ ] │
│ │
│ [ 🔍 Filtern ⏳ ] │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ ░░░░░░░░ │ │ ░░░░░░░░ │ │ ░░░░░░░░ │ ← Platzhalter │
│ │ ░░░░░░░░ │ │ ░░░░░░░░ │ │ ░░░░░░░░ │ │
│ │ ░░░░░░░░ │ │ ░░░░░░░░ │ │ ░░░░░░░░ │ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
Technische Details
AJAX Endpunkte
| Endpunkt | Zweck |
|---|---|
kurs_booking_filter_cards |
Gefilterte Kurs-Cards laden |
kurs_booking_cascade_filter |
Filteroptionen aktualisieren |
CSS-Klassen
| Klasse | Beschreibung |
|---|---|
.kb-filter-form |
Filter-Formular Container |
.kb-filter-loading |
Waehrend AJAX-Anfrage |
.kb-cards-wrapper |
Kurs-Cards Container |
.kb-cards-grid |
Grid-Layout fuer Cards |
.kb-cards-empty |
Keine Ergebnisse Nachricht |
JavaScript-Dateien
| Datei | Funktion |
|---|---|
filter-ajax.js |
AJAX-Anfragen fuer Cards |
filter-cascade.js |
Kaskadierende Filter-Updates |
Troubleshooting
Filter werden nicht angezeigt
| Problem | Loesung |
|---|---|
| Shortcode ohne filter | [kurs_cards filter="yes"] |
| Filter deaktiviert | Einstellungen → Kurs-Anzeige pruefen |
| JavaScript-Fehler | Browser-Konsole pruefen (F12) |
Filterung funktioniert nicht
| Problem | Loesung |
|---|---|
| Seite laedt neu | JavaScript aktiviert? |
| Keine Ergebnisse | Kaskadierende Filter pruefen |
| Fehler in Konsole | AJAX-URL korrekt? (wp_localize_script) |
Langsame Filterung
| Problem | Loesung |
|---|---|
| Viele Kurse | Limit setzen: [kurs_cards limit="20"] |
| Langsamer Server | Caching aktivieren |
| Komplexe Queries | Indizes in Datenbank pruefen |
Siehe auch
- Kurs-Anzeige - Alle Anzeigeoptionen
- Filter-Kaskade - Details zur Kaskadierung
- Shortcodes - Alle verfuegbaren Shortcodes