Zum Inhalt

Anleitungen

Schritt-für-Schritt-Workflows für typische Aufgaben mit der Kategorie Schnellauswahl.

Wie das Plugin funktioniert

Datenfluss-Übersicht

[Erlebniswelt-Editor]  →  [Konfiguration gespeichert]  →  [Seite wird aufgerufen]
        ↓
[Plugin lädt direkte Unterkategorien der Wurzelkategorie]
        ↓
[Kunde wählt Kategorie in Stufe 1]
        ↓
[AJAX-Anfrage: Lade Unterkategorien der gewählten Kategorie]
        ↓
[Nächste Stufe wird befüllt / Weiterleitung bei letzter Stufe]

Beispielablauf für Fahrzeugauswahl: 1. Seite lädt: Dropdown 1 zeigt alle Fahrzeughersteller. 2. Kunde wählt „BMW" → Dropdown 2 lädt die BMW-Modellreihen. 3. Kunde wählt „3er" → Dropdown 3 lädt die 3er-Modelle. 4. Kunde wählt „320i" → Plugin leitet automatisch zur Kategorie „320i" weiter.

Anleitung: Erstes Widget einrichten

Ziel: Ein funktionsfähiges Kategorie-Dropdown in eine bestehende Erlebniswelt einbinden.

Voraussetzungen: - Das Plugin ist installiert und aktiviert. - Eine Kategoriestruktur mit mindestens 2 Ebenen ist im Shop vorhanden.

Schritte:

  1. Erlebniswelt öffnen
  2. Navigieren zu: Inhalte → Erlebniswelten

  3. Gewünschte Erlebniswelt anklicken oder neue erstellen.

  4. Block hinzufügen

  5. Auf das +-Symbol in einem Abschnitt klicken.
  6. In der Blockliste die Kategorie Commerce wählen.

  7. Den Block Category Selector per Drag & Drop einfügen.

  8. Element konfigurieren

  9. Auf das Element klicken → Konfigurationspanel öffnet sich rechts.
  10. Wurzelkategorie: Die Oberkategorie der gewünschten Struktur wählen.
  11. Tiefe: Anzahl der Dropdown-Stufen eingeben (z. B. 3).

  12. Dropdown-Beschriftungen (optional): Kommagetrennte Hinweistexte eingeben.

  13. Speichern und veröffentlichen

  14. Auf Speichern klicken.
  15. Erlebniswelt veröffentlichen oder im Vorschaumodus testen.

Ergebnis: Das Widget erscheint auf der Storefront-Seite mit dem befüllten ersten Dropdown.

Anleitung: Top-Kategorien konfigurieren

Ziel: Bestimmte Kategorien oben im ersten Dropdown fixieren.

Voraussetzungen: - Ein Category-Selector-Element ist bereits konfiguriert.

Schritte:

  1. Element bearbeiten
  2. Erlebniswelt öffnen: Inhalte → Erlebniswelten

  3. Element anklicken → Konfigurationspanel öffnet sich rechts.

  4. Top-Kategorien auswählen

  5. Im Feld Top-Kategorien auf das Suchfeld klicken.
  6. Kategorienamen eingeben und die gewünschten Kategorien auswählen.

  7. Mehrere Kategorien können nacheinander hinzugefügt werden.

  8. Speichern

  9. Auf Speichern klicken und die Erlebniswelt veröffentlichen.

Ergebnis: Die ausgewählten Kategorien erscheinen oben im ersten Dropdown, zusätzlich an ihrer alphabetischen Position.

Tipps: - Wählen Sie nicht mehr als 3–5 Top-Kategorien, damit die Liste übersichtlich bleibt. - Mit der CSS-Klasse highlight können Sie Top-Kategorien im Theme visuell hervorheben.

Anleitung: Direktweiterleitung zum Produkt aktivieren

Ziel: Kunden direkt zur Produktseite leiten, wenn eine Kategorie nur ein Produkt enthält.

Voraussetzungen: - Kategorien auf der tiefsten Ebene enthalten jeweils nur ein aktives, verfügbares Produkt.

Schritte:

  1. Element bearbeiten

  2. Inhalte → Erlebniswelten → Erlebniswelt öffnen → Element anklicken.

  3. Option aktivieren

  4. Den Schalter Zum Produkt weiterleiten aktivieren.

  5. Speichern

  6. Auf Speichern klicken und die Erlebniswelt veröffentlichen.

Ergebnis: Wählt ein Kunde die letzte Kategorie mit genau einem Produkt, wird er direkt zur Produktdetailseite weitergeleitet.

Anleitung: Zwei Widgets auf einer Seite einrichten

Ziel: Zwei unabhängige Dropdown-Widgets mit verschiedenen Wurzelkategorien auf derselben Seite platzieren.

Schritte:

  1. Ersten Block einfügen und konfigurieren

  2. Wie in „Erstes Widget einrichten" beschrieben.

  3. Zweiten Block einfügen

  4. Weiteren Category Selector-Block in einen anderen Abschnitt einfügen.
  5. Auf das neue Element klicken → Konfigurationspanel öffnet sich rechts.
  6. Eine andere Wurzelkategorie wählen als beim ersten Widget.

  7. Tiefe und Beschriftungen separat konfigurieren.

  8. Speichern und testen

  9. Beide Widgets testen, um sicherzustellen, dass sie unabhängig voneinander funktionieren.

Ergebnis: Beide Dropdowns funktionieren vollständig unabhängig – die Auswahl im ersten Widget beeinflusst das zweite Widget nicht.

Schnellreferenz

Aufgabe Wichtige Schritte Einstellung
Widget einbinden Block „Category Selector" einfügen, Wurzelkategorie wählen Wurzelkategorie, Tiefe
Hinweistexte anpassen Kommagetrennte Texte in „Dropdown-Beschriftungen" eingeben Dropdown-Beschriftungen
Produktweiterleitung aktivieren Schalter „Zum Produkt weiterleiten" aktivieren Zum Produkt weiterleiten
Top-Kategorien fixieren Kategorien im Feld „Top-Kategorien" auswählen Top-Kategorien
Zweites Widget hinzufügen Weiteren Block einfügen, separate Konfiguration vornehmen Wurzelkategorie (verschieden)

Best Practices

  1. Kategoriestruktur prüfen: Stellen Sie vor der Konfiguration sicher, dass die Kategoriestruktur in Shopware aktiv und vollständig ist. Deaktivierte Kategorien werden nicht im Dropdown angezeigt.
  2. Tiefe passend wählen: Die eingestellte Tiefe sollte der tatsächlichen Hierarchietiefe entsprechen. Eine zu hohe Tiefe führt zu leeren Dropdowns auf den letzten Stufen.
  3. Beschriftungen nutzen: Klare Hinweistexte (z. B. „Hersteller wählen") verbessern die Usability erheblich – ohne Beschriftung weiß der Kunde möglicherweise nicht, was er auswählen soll.
  4. Top-Kategorien sparsam einsetzen: Zu viele Top-Kategorien machen die Liste unübersichtlich. 3–5 fixierte Einträge sind in der Regel optimal.

Was Sie vermeiden sollten

  • ❌ Wurzelkategorie ohne Unterkategorien wählen – Das erste Dropdown bleibt leer, und das Widget funktioniert nicht.
  • ❌ Tiefe zu hoch setzen – Stufen ohne Kategorien bleiben leer und irritieren Kunden.
  • ❌ Produktweiterleitung aktivieren ohne Einzelprodukte – Wenn die Kategorien mehrere Produkte enthalten, hat die Option keine Wirkung und verwirrt nur im Setup.