Shopware 6: Flyout-Menü Hover-Verzögerung im Child-Theme anpassen

von Der Atilla | Feb. 7, 2026 | Alle, Shopware, Shopware 6, Shopware Design, Shopware Entwicklung | 0 Kommentare

Shopware 6: Flyout-Menü Hover-Verzögerung im Child-Theme anpassen

SEO-optimierte Einleitung

Die Flyout-Menü Hover-Verzögerung in Shopware 6 ist ein häufiger Diskussionspunkt unter Shop-Betreibern – für die einen öffnet und schließt sich das Navigationsmenü zu schnell, für die anderen zu langsam. Standardmäßig nutzt Shopware eine debounceTime von 125 Millisekunden, die sowohl das Öffnen als auch das Schließen des Menüs steuert. Die gute Nachricht: Diese Verzögerung lässt sich anpassen! In diesem umfassenden Tutorial zeigen wir dir, wie du die Flyout-Menü Hover-Verzögerung in Shopware 6 professionell über ein Child-Theme anpasst – update-sicher, Store-konform und ohne Core-Dateien zu verändern. Egal ob du das Menü schneller oder langsamer machen möchtest, wir erklären dir Schritt für Schritt, wie du die perfekte Einstellung für deinen Shop findest und technisch sauber umsetzt.

Die Flyout-Menü Hover-Verzögerung in Shopware 6 spaltet die Shop-Betreiber: Während die einen sich darüber beschweren, dass das Menü viel zu schnell aufpoppt und bei jeder kleinen Mausbewegung nervt, finden andere, dass es viel zu langsam reagiert und sich träge anfühlt. Wieder andere berichten, dass das Menü zu schnell verschwindet, noch bevor sie zur gewünschten Unterkategorie navigieren konnten.

Die gute Nachricht für alle

Egal zu welcher Partei du gehörst – wir haben gute Nachrichten: Die Flyout-Menü Hover-Verzögerung lässt sich ändern! Mit wenigen Zeilen Code kannst du das Verhalten exakt an die Bedürfnisse deiner Zielgruppe anpassen.

Typische Szenarien und Beschwerden

Szenario 1: „Das Menü öffnet zu schnell“

Menü klappt bereits auf, wenn man nur mit der Maus über die Navigation fährt
Ständige ungewollte Menü-Öffnungen beim Scrollen
Besonders störend auf Touch-Geräten
Nutzer fühlen sich vom aufklappenden Menü „verfolgt“

Szenario 2: „Das Menü schließt zu schnell“

Menü verschwindet sofort bei kleinen Mausbewegungen
Unmöglich, zwischen Kategorien zu wechseln ohne dass das Menü zuklappt
Diagonale Mausbewegungen führen aus dem Menü heraus
Frustration bei Trackpad-Nutzern

Szenario 3: „Das Menü reagiert zu langsam“

Gefühlte Verzögerung beim Hovern über Kategorien
Menü wirkt träge und nicht responsiv
Nutzer klicken auf die Hauptkategorie, weil sie denken es ist kaputt
Negative Wahrnehmung der Shop-Performance

Die Lösung: Anpassbare debounceTime

All diese Probleme lassen sich durch Anpassung der debounceTime lösen. Diese Verzögerung in Millisekunden steuert, wie schnell das Flyout-Menü auf Mausbewegungen reagiert. Shopware nutzt standardmäßig 125ms, aber das ist nur ein Richtwert – nicht die perfekte Einstellung für jeden Shop.

Flyout-Menü Hover-Verzögerung in Shopware 6 – zurück zur Übersicht

Um die Flyout-Menü Hover-Verzögerung in Shopware 6 sinnvoll anzupassen, solltest du verstehen, wie Shopware technisch mit dieser Verzögerung arbeitet. Das Verständnis hilft dir, die richtigen Werte für deinen spezifischen Anwendungsfall zu finden.

Was ist die debounceTime?

Die debounceTime ist eine Verzögerung in Millisekunden, die verhindert, dass eine Funktion zu oft hintereinander ausgeführt wird. Bei Shopware wird diese Technik für das Flyout-Menü eingesetzt, um nicht bei jeder minimalen Mausbewegung sofort zu reagieren.

Shopware Standard-Implementierung

Im Original Shopware FlyoutMenuPlugin sieht die Konfiguration so aus:

// Aus: vendor/shopware/storefront/.../flyout-menu.plugin.js
export default class FlyoutMenuPlugin extends Plugin {
    static options = {
        debounceTime: 125,  // Standard: 125ms
        activeCls: 'is-open',
        // weitere Optionen...
    };
}

Wie die debounceTime funktioniert

Shopware nutzt die debounceTime sowohl beim Öffnen als auch beim Schließen des Menüs:

Beim Hovern über einen Link: Warte 125ms, dann öffne das Flyout
Beim Verlassen des Links: Warte 125ms, dann schließe das Flyout
Bei Mausbewegung im Flyout: Lösche den Schließ-Timer (Menü bleibt offen)

Das Debounce-Pattern im Detail

// Vereinfachtes Beispiel der Funktionsweise
let timer;

function openMenu() {
    clearTimeout(timer);  // Lösche vorherigen Timer
    timer = setTimeout(() => {
        // Öffne Menü erst nach debounceTime
        flyout.classList.add('is-open');
    }, debounceTime);
}

function closeMenu() {
    clearTimeout(timer);
    timer = setTimeout(() => {
        // Schließe Menü erst nach debounceTime
        flyout.classList.remove('is-open');
    }, debounceTime);
}

Warum eine einheitliche Zeit problematisch sein kann

Die Verwendung einer einzigen debounceTime für beide Aktionen (Öffnen UND Schließen) ist ein Kompromiss. In vielen Fällen wäre es besser:

Schnelles Öffnen: 100-150ms damit das Menü responsiv wirkt
Langsames Schließen: 300-500ms damit Nutzer Zeit haben zu navigieren

Genau diese erweiterte Lösung zeigen wir dir später in diesem Tutorial!

Flyout-Menü Hover-Verzögerung in Shopware 6 – zurück zur Übersicht

Bevor du mit der Anpassung der Flyout-Menü Hover-Verzögerung in Shopware 6 beginnst, stelle sicher, dass folgende Voraussetzungen erfüllt sind:

Shopware Version: Shopware 6.5 oder höher (getestet bis Shopware 6.7)
Child-Theme: Ein funktionierendes Child-Theme oder eigenes Custom-Theme
Entwicklungsumgebung: Lokaler Zugriff auf Shopware-Dateien (SSH, FTP oder lokale Installation)
JavaScript-Kenntnisse: Grundlegendes Verständnis von JavaScript und ES6-Syntax
Shopware Theme-System: Kenntnisse über das Shopware Plugin-System und Theme-Struktur
Terminal-Zugang: Möglichkeit, Shopware CLI-Befehle auszuführen
Backup: Eine aktuelle Sicherung deiner Shopware-Installation

Empfohlene Tools

Code-Editor mit JavaScript-Unterstützung (z.B. PHPStorm, VS Code, Sublime Text)
Browser mit Developer Tools (Chrome DevTools oder Firefox Developer Tools)
Git für Versionskontrolle (optional, aber sehr empfohlen)
Node.js und npm (meist bereits mit Shopware installiert)

Zeitaufwand

Einfache Anpassung: 10-15 Minuten
Mit Testing verschiedener Werte: 30-60 Minuten
Erweiterte Lösung (separate Delays): 20-30 Minuten

Flyout-Menü Hover-Verzögerung in Shopware 6 – zurück zur Übersicht

Für die Anpassung der Flyout-Menü Hover-Verzögerung in Shopware 6 benötigst du eine klar strukturierte Ordnerstruktur in deinem Child-Theme. Shopware folgt strikten Konventionen, die du einhalten musst, damit dein JavaScript-Override korrekt geladen wird.

Die komplette Ordnerstruktur

Erstelle folgende Verzeichnisse in deinem Child-Theme:

YourChildTheme/
└── src/
    └── Resources/
        └── app/
            └── storefront/
                └── src/
                    ├── main.js
                    └── plugin/
                        └── main-menu/
                            └── flyout-menu.plugin.js

Schritt-für-Schritt Anleitung

Navigiere in das Hauptverzeichnis deines Child-Themes und erstelle die Ordner:

# Beispiel für Linux/Mac Terminal
cd custom/plugins/YourChildTheme
mkdir -p src/Resources/app/storefront/src/plugin/main-menu

# Dateien erstellen
touch src/Resources/app/storefront/src/main.js
touch src/Resources/app/storefront/src/plugin/main-menu/flyout-menu.plugin.js

Für Windows PowerShell:

# Windows PowerShell
cd custom\plugins\YourChildTheme
New-Item -ItemType Directory -Path src\Resources\app\storefront\src\plugin\main-menu -Force
New-Item -ItemType File -Path src\Resources\app\storefront\src\main.js
New-Item -ItemType File -Path src\Resources\app\storefront\src\plugin\main-menu\flyout-menu.plugin.js

Wichtige Hinweise zur Ordnerstruktur

Der Pfad src/Resources/app/storefront/src/ ist verpflichtend für Storefront-JavaScript
Die main.js ist der Einstiegspunkt für dein Custom-JavaScript
Der Unterordner plugin/main-menu/ spiegelt die Core-Struktur von Shopware wider
Dateinamen müssen exakt der Shopware-Konvention entsprechen (Klein/Großschreibung beachten!)

Flyout-Menü Hover-Verzögerung in Shopware 6 – zurück zur Übersicht

Jetzt erstellen wir die zentrale Datei für die Anpassung der Flyout-Menü Hover-Verzögerung in Shopware 6. Diese Datei überschreibt das Original Shopware FlyoutMenuPlugin und erlaubt uns, die debounceTime nach unseren Wünschen anzupassen.

Code für flyout-menu.plugin.js

Öffne die Datei src/Resources/app/storefront/src/plugin/main-menu/flyout-menu.plugin.js und füge folgenden Code ein:

import FlyoutMenuPlugin from 'src/plugin/main-menu/flyout-menu.plugin';

/**
 * Override Shopware FlyoutMenuPlugin
 * Passt die debounceTime für das Flyout-Menü an
 * 
 * @package YourChildTheme
 */
export default class FlyoutMenuOverride extends FlyoutMenuPlugin {
    
    static options = {
        ...FlyoutMenuPlugin.options,
        
        /**
         * Hover debounce delay in Millisekunden
         * Standard Shopware: 125ms
         * 
         * Empfohlene Werte:
         * - 50-100ms: Sehr schnell (für erfahrene Nutzer)
         * - 125ms: Shopware Standard
         * - 200-250ms: Ausgewogen (empfohlen für die meisten Shops)
         * - 300-400ms: Gemäßigt (gut für Touch-Geräte)
         * - 500ms+: Langsam (nur in Ausnahmefällen)
         */
        debounceTime: 250,
    };
}

Code-Erklärung

Zeile 1: Importiert das Original Shopware FlyoutMenuPlugin aus dem Core
Zeile 9: Erstellt eine neue Klasse, die vom Original FlyoutMenuPlugin erbt
Zeile 11: Übernimmt alle Standard-Optionen mit dem JavaScript Spread-Operator (…)
Zeile 25: Überschreibt nur die debounceTime – hier passt du den Wert an!

debounceTime nach deinen Bedürfnissen anpassen

Um die Verzögerung zu ändern, ändere einfach den Wert in Zeile 25. Hier einige Beispiele:

// Für Nutzer, die das Menü als "zu schnell öffnend" empfinden:
debounceTime: 300,  // Menü öffnet langsamer, nervt weniger

// Für Nutzer, die das Menü als "zu schnell schließend" empfinden:
debounceTime: 400,  // Menü bleibt länger offen

// Für Nutzer, die das Menü als "zu träge" empfinden:
debounceTime: 75,   // Menü reagiert schneller

// Shopware Standard wiederherstellen:
debounceTime: 125,  // Original Shopware Wert

Pro-Tipp: Testen mit verschiedenen Werten

Starte mit 250ms und passe dann schrittweise an:

Zu schnell? Erhöhe um 50ms
Zu langsam? Verringere um 50ms
Teste mit echten Nutzern oder Kollegen
Berücksichtige verschiedene Geräte (Desktop, Laptop mit Trackpad, Touch)

Flyout-Menü Hover-Verzögerung in Shopware 6 – zurück zur Übersicht

Nachdem wir das Plugin-Override erstellt haben, müssen wir es in der main.js registrieren. Diese Datei ist der Einstiegspunkt für all dein Custom-JavaScript im Child-Theme und teilt Shopware mit, dass dein Override geladen werden soll.

Code für main.js (Shopware 6.5)

Öffne die Datei src/Resources/app/storefront/src/main.js und füge folgenden Code ein:

// main.js
const PluginManager = window.PluginManager;

// Importiere dein FlyoutMenu-Override
import FlyoutMenuOverride from './plugin/main-menu/flyout-menu.plugin';

// Überschreibe das Core FlyoutMenu-Plugin
PluginManager.override(
    'FlyoutMenu',
    FlyoutMenuOverride,
    '[data-flyout-menu]'
);

Code für main.js (Shopware 6.6+)

Falls du Shopware 6.6 oder höher nutzt, verwende diese Version mit korrektem Selektor:

// main.js für Shopware 6.6+
const PluginManager = window.PluginManager;

// Importiere dein FlyoutMenu-Override
import FlyoutMenuOverride from './plugin/main-menu/flyout-menu.plugin';

// Überschreibe das Core FlyoutMenu-Plugin
PluginManager.override(
    'FlyoutMenu',
    FlyoutMenuOverride,
    '[data-flyout-menu="true"]'
);

Code-Erklärung

Zeile 2: Holt den globalen PluginManager von Shopware (wird vom Core bereitgestellt)
Zeile 5: Importiert deine Override-Klasse aus der flyout-menu.plugin.js
Zeile 8-12: Registriert das Override beim PluginManager
Parameter 1 (‚FlyoutMenu‘): Name des zu überschreibenden Original-Plugins
Parameter 2 (FlyoutMenuOverride): Deine neue Override-Klasse
Parameter 3 (‚[data-flyout-menu]‘): CSS-Selektor für das HTML-Element

Wichtiger Hinweis zum Selektor

Der Selektor muss zum HTML-Attribut passen, das Shopware im Template verwendet:

Shopware 6.5: [data-flyout-menu]
Shopware 6.6+: [data-flyout-menu="true"]

Du kannst den richtigen Selektor im Browser-Inspektor prüfen:

Öffne deinen Shop im Browser
Drücke F12 für Developer Tools
Wähle den Elements-Tab
Suche nach „main-navigation“ oder „flyout“
Prüfe das data-flyout-menu Attribut

Flyout-Menü Hover-Verzögerung in Shopware 6 – zurück zur Übersicht

Damit die Änderungen an der Flyout-Menü Hover-Verzögerung in Shopware 6 wirksam werden, musst du dein Theme neu kompilieren und den Cache leeren. Shopware bündelt JavaScript-Dateien in optimierte Build-Files, die nur nach dem Kompilieren aktualisiert werden.

Standard Theme-Kompilierung

Führe folgende Befehle im Shopware-Root-Verzeichnis aus:

# Theme kompilieren
./bin/console theme:compile

# Cache komplett leeren
./bin/console cache:clear

Für Produktionsumgebungen

Auf Live-Shops solltest du zusätzlich die Produktionsoptimierung nutzen:

# Theme nur für aktive Sales Channels kompilieren
./bin/console theme:compile --active-only

# Cache aufwärmen für bessere Performance
./bin/console cache:warmup

# Assets neu installieren (falls nötig)
./bin/console assets:install

Erfolg überprüfen

Nach erfolgreicher Kompilierung solltest du diese Ausgabe sehen:

[OK] Compiling theme for sales channel "Storefront" finished.

Im Browser testen

Jetzt kannst du die Änderung testen:

Öffne deinen Shop im Browser
Leere den Browser-Cache (Strg+Shift+R bzw. Cmd+Shift+R)
Fahre mit der Maus über die Hauptnavigation
Achte auf die Verzögerung beim Öffnen/Schließen
Teste verschiedene Mausbewegungen (schnell, langsam, diagonal)

Debug-Tipps

Falls etwas nicht funktioniert, prüfe die Browser-Console (F12):

# Keine Fehlermeldungen? Gut!
# JavaScript-Fehler? Prüfe Syntax und Imports
# Plugin nicht gefunden? Prüfe PluginManager Registrierung

Watch-Mode für Entwicklung

Während der Entwicklung kannst du den Watch-Mode nutzen, um bei jeder Dateiänderung automatisch zu kompilieren:

# Storefront Watch starten (in separatem Terminal)
./bin/build-storefront.sh

Dann kannst du Werte in der flyout-menu.plugin.js ändern, speichern, und sofort im Browser testen (nur Browser-Reload nötig, kein manuelles Kompilieren).

Flyout-Menü Hover-Verzögerung in Shopware 6 – zurück zur Übersicht

Die richtige Flyout-Menü Hover-Verzögerung in Shopware 6 hängt stark von deiner Zielgruppe, Produktkategorie und Shop-Design ab. Hier sind bewährte Richtwerte aus der Praxis verschiedener Shopware-Projekte.

Übersicht der debounceTime Werte

Wert (ms)	Beschreibung	Anwendungsfall	Gefühl
50-75	Sehr schnell	Power-User, B2B-Großhändler	Reaktionsschnell, direkt
100-125	Schnell (SW Standard)	Technische Shops, IT-Zielgruppe	Zügig, effizient
200-250	Ausgewogen (empfohlen)	Fashion, Lifestyle, Universal	Angenehm, natürlich
300-400	Gemäßigt	Möbel, Mobile-First, Senior-Shops	Entspannt, großzügig
500+	Langsam	Nicht empfohlen (zu träge)	Verzögert, unresponsive

Empfehlungen nach Shop-Typ

Fashion & Lifestyle: 200-250ms – Nutzer browsen ausgiebig durch viele Kategorien
Elektronik & Technik: 125-175ms – Technisch versierte Zielgruppe erwartet schnelle Reaktion
B2B-Shops: 100-150ms – Profis kennen die Struktur und arbeiten effizient
Lebensmittel & Drogerie: 200-250ms – Schnelle Kaufentscheidungen, breite Zielgruppe
Möbel & Einrichtung: 250-350ms – Lange Verweildauer, ausführliche Recherche
Spielwaren & Hobby: 250-300ms – Familien mit Kindern, oft Touch-Nutzung

Besondere Zielgruppen

Senioren-Shops: 300-400ms – Mehr Zeit für Mausführung und Orientierung
Mobile-First Shops: 250-350ms – Trackpad-Nutzung weniger präzise als Maus
Internationale Shops: 200-250ms – Verschiedene Kulturen, universeller Mittelweg
Barrierefreie Shops: 300-400ms – Nutzer mit motorischen Einschränkungen

A/B-Testing Empfehlung

Für optimale Ergebnisse solltest du verschiedene Werte mit echten Nutzern testen:

Variante A: 150ms (schnell)
Variante B: 250ms (moderat)
Testdauer: Mindestens 2 Wochen
Metriken: Bounce Rate, Time on Site, Navigation-Klicks, Conversion Rate
Segmentierung: Desktop vs. Mobile getrennt auswerten

Faustregel für die Wahl

Wenn du dir unsicher bist, starte mit 250ms – das ist ein guter Mittelweg, der für die meisten Shops funktioniert. Von dort aus kannst du in 50ms-Schritten anpassen, bis es sich perfekt anfühlt.

Flyout-Menü Hover-Verzögerung in Shopware 6 – zurück zur Übersicht

Die Standard-Lösung nutzt eine einzige debounceTime für beides – Öffnen und Schließen. In der Praxis ist es jedoch oft besser, verschiedene Verzögerungen zu verwenden: schnelles Öffnen für Responsiveness, aber langsames Schließen für komfortable Navigation.

Das Problem mit einer einheitlichen debounceTime

Mit nur einem Wert musst du Kompromisse eingehen:

Kurzer Wert (125ms): Menü öffnet schnell ✓, aber schließt auch schnell ✗
Langer Wert (400ms): Menü bleibt lange offen ✓, aber öffnet träge ✗

Die Lösung: Separate Delays

Erstelle eine erweiterte Version des Overrides mit getrennten Verzögerungen:

import FlyoutMenuPlugin from 'src/plugin/main-menu/flyout-menu.plugin';

/**
 * Erweitertes Override mit separaten Öffnen/Schließen Delays
 * 
 * @package YourChildTheme
 */
export default class FlyoutMenuOverride extends FlyoutMenuPlugin {
    
    static options = {
        ...FlyoutMenuPlugin.options,
        
        /**
         * Separate Verzögerungen für bessere UX
         */
        openDebounceTime: 150,   // Schnelles Öffnen (responsiv)
        closeDebounceTime: 400,  // Langsames Schließen (komfortabel)
    };
    
    /**
     * Override der _debounce Methode mit separaten Timern
     */
    _debounce(fn, ...args) {
        const fnName = fn.name;
        const isOpenAction = fnName.includes('open') || fnName.includes('Open');
        const debounceTime = isOpenAction 
            ? this.options.openDebounceTime 
            : this.options.closeDebounceTime;
        
        this._clearDebounce();
        this._debouncer = setTimeout(
            fn.bind(this, ...args), 
            debounceTime
        );
    }
}

Empfohlene Kombinationen

Öffnen (ms)	Schließen (ms)	Gefühl	Anwendungsfall
100	300	Reaktionsschnell, aber verzeihend	B2B, Technik-Shops
150	400	Ausgewogen, angenehm	Fashion, Lifestyle (empfohlen)
200	500	Entspannt, großzügig	Möbel, Senior-freundlich
125	250	Kompromiss (nahe Standard)	Shops mit erfahrenen Nutzern

Vorteile dieser Lösung

Beste UX: Schnelle Reaktion beim Hovern, aber genug Zeit zum Navigieren
Weniger Beschwerden: Löst beide Probleme („zu schnell“ vs „zu langsam“) gleichzeitig
Professioneller: Ähnlich wie große E-Commerce-Plattformen (Amazon, Zalando)
Accessibility: Besonders hilfreich für Nutzer mit motorischen Einschränkungen

Testing-Tipp

Starte mit diesen Werten und passe sie schrittweise an:

openDebounceTime: 150,   // Wenn zu träge: verringern auf 100-125
closeDebounceTime: 400,  // Wenn immer noch zu schnell: erhöhen auf 500-600

Flyout-Menü Hover-Verzögerung in Shopware 6 – zurück zur Übersicht

Bei der Anpassung der Flyout-Menü Hover-Verzögerung in Shopware 6 können verschiedene Probleme auftreten. Hier findest du die häufigsten Fehler und ihre Lösungen.

Problem: Änderung wird nicht übernommen

Symptom: Das Flyout-Menü verhält sich nach der Anpassung unverändert.

Lösungen:

# 1. Theme neu kompilieren
./bin/console theme:compile

# 2. Cache leeren
./bin/console cache:clear

# 3. Browser-Cache löschen
# Chrome/Firefox: Strg+Shift+R (Windows) oder Cmd+Shift+R (Mac)

# 4. Prüfe ob deine JavaScript-Datei geladen wird
# Browser DevTools → Network → Filter: JS → Suche nach "flyout"

Problem: JavaScript-Fehler in der Console

Symptom: Fehler wie „Module not found“ oder „Cannot read property“ in Browser Console.

Häufige Ursachen und Lösungen:

Falscher Importpfad: Muss ./plugin/main-menu/flyout-menu.plugin sein (ohne .js!)
Dateiname falsch: Muss exakt flyout-menu.plugin.js lauten (mit Bindestrichen!)
Syntax-Fehler: Prüfe alle geschweiften Klammern und Kommas
Fehlende Zeile: Vergiss nicht export default vor der Klasse

Problem: Flyout öffnet sich gar nicht mehr

Symptom: Navigation zeigt keine Flyout-Menüs mehr an.

Debug-Schritte:

# 1. Prüfe Browser Console auf Fehler
# F12 → Console-Tab → Suche nach roten Fehlermeldungen

# 2. Prüfe ob data-flyout-menu Attribut vorhanden ist
# F12 → Elements-Tab → Suche nach "main-navigation"
# Muss data-flyout-menu oder data-flyout-menu="true" haben

# 3. Temporär Override deaktivieren zum Testen
# Kommentiere in main.js die Zeilen aus:
/*
PluginManager.override(
    'FlyoutMenu',
    FlyoutMenuOverride,
    '[data-flyout-menu]'
);
*/

Problem: Theme lässt sich nicht kompilieren

Symptom: Fehlermeldung beim Ausführen von theme:compile.

Lösungen:

# 1. Prüfe Node.js Version (mindestens v16 erforderlich)
node -v

# 2. Installiere Dependencies neu
cd vendor/shopware/storefront/Resources/app/storefront
npm ci

# 3. Bei Fehlern: node_modules löschen und neu installieren
rm -rf node_modules
npm install

# 4. Prüfe Dateiberechtigungen
chmod -R 755 custom/plugins/YourChildTheme

# 5. Als letzter Ausweg: Shopware Cache komplett löschen
rm -rf var/cache/*
./bin/console cache:clear

Problem: Verschiedenes Verhalten auf Mobile vs. Desktop

Symptom: Flyout funktioniert auf Desktop, aber nicht auf Touch-Geräten (oder umgekehrt).

Erklärung: Shopware nutzt für Touch-Geräte andere Events (touchstart statt mouseenter). Deine debounceTime greift bei beiden, aber das Nutzerverhalten unterscheidet sich stark.

Lösung: Erhöhe die debounceTime für bessere Touch-Experience (empfohlen: 250-350ms) oder implementiere device-spezifische Werte.

Problem: Override funktioniert in Shopware 6.6+ nicht

Symptom: In Shopware 6.6 greift das Override nicht, obwohl alles kompiliert.

Lösung: Shopware 6.6 hat den Selektor geändert. Nutze:

// Für Shopware 6.6+
PluginManager.override(
    'FlyoutMenu',
    FlyoutMenuOverride,
    '[data-flyout-menu="true"]'  // Wichtig: Mit ="true"
);

Problem: Menü verhält sich nach Update anders

Symptom: Nach einem Shopware-Update funktioniert das Override nicht mehr richtig.

Lösung: Prüfe ob Shopware das FlyoutMenuPlugin API geändert hat:

# Prüfe die Original-Datei im Core
cat vendor/shopware/storefront/Resources/app/storefront/src/plugin/main-menu/flyout-menu.plugin.js

# Vergleiche die options mit deinem Override
# Passe dein Override ggf. an neue Struktur an

Flyout-Menü Hover-Verzögerung in Shopware 6 – zurück zur Übersicht

Du hast keine Lust, all diese Anpassungen selbst vorzunehmen? Oder du möchtest ein professionelles Theme, das bereits mit perfekt abgestimmten Hover-Verzögerungen ausgeliefert wird? Dann haben wir die perfekte Lösung für dich!

DreamTheme: Dein Shopware 6 Theme mit optimierter Navigation

Das DreamTheme von great2gether ist ein Premium Shopware 6 Child-Theme, das bereits ab Werk mit optimal eingestellten Flyout-Menü Verzögerungen ausgeliefert wird. Wir haben hunderte Stunden in die Perfektionierung der Navigation investiert und verschiedene Verzögerungswerte mit echten Shop-Betreibern und Endkunden getestet.

Was DreamTheme mitbringt

Einstellbarkeit der debounceTime: So wie du es willst, mit 2 licks eingestellt.
Backend-Konfiguration: Verzögerung im Theme-Manager einstellbar ohne Code-Änderungen
Separate Open/Close Delays: Erweiterte Lösung bereits implementiert (150ms öffnen, 400ms schließen)
Device-Erkennung: Automatisch längere Verzögerung auf Touch-Geräten
A/B-Testing Ready: Einfaches Testen verschiedener Werte über Backend
Update-sicher: Professionelle Override-Struktur, kein Core-Hack
Dokumentation: Ausführliche Anleitung zur individuellen Anpassung