FAQ – Mobile App Navigation

Allgemeine Fragen

Auf welchen Geräten erscheint die Bar?

Standardmäßig auf allen Viewports mit weniger als 768 px Breite (Bootstrap-md-Breakpoint). Das umfasst Smartphones und kleinste Tablets im Hochformat. Auf Tablets im Querformat und allen Desktops übernimmt die Standard-Header-Navigation. Der Breakpoint ist konfigurierbar: sm (<576 px), md (<768 px, Standard), lg (<992 px).

Wirkt das auch auf iPads / Tablets im Querformat?

Standardmäßig nein. iPad-Querformat liegt typischerweise bei ≥1024 px Breite — weit über dem md-Breakpoint. Wenn die Bar auch dort erscheinen soll, in der Konfig den Breakpoint auf lg (<992 px) stellen.

Funktioniert das mit Custom-Themes (ThemeWare, TWT, Tailwind-Themes)?

Im Prinzip ja — die Bar ist ein eigenständiges HTML-Element, das per sw_include in base.html.twig eingehängt wird. Das funktioniert auch in Themes, die den Footer komplett überschreiben. Voraussetzung: das Theme darf base.html.twig nicht so überschreiben, dass block base_body_inner nicht mehr aufgerufen wird.

Edge-Case: einige sehr alte Themes nutzen kein parent() in base.html.twig. Da müsste manuell ein {% include '@KommoraMobileAppNav/storefront/component/mobile-app-nav.html.twig' %} ins Theme-Twig eingebaut werden.

Wie kompatibel ist die Bar mit der iOS Safari Home-Indicator-Bar?

Voll kompatibel. Der Bar-Container nutzt CSS padding-bottom: env(safe-area-inset-bottom) — auf iPhones mit Home-Indicator-Bar (X / 11 / 12 / 13 / 14 / 15) bleibt die Bar über dem Indicator-Bereich, kein Tippen daneben.

Such-Sheet & Cart-Badge

Wie funktioniert die Live-Suche?

Bei Klick auf den Such-Button öffnet sich ein Bottom-Sheet mit Input-Feld und Submit-Button. Sobald 3 oder mehr Zeichen eingetippt sind, wird /suggest?search=… aufgerufen (Shopware-Standard-Endpoint) und die Vorschläge erscheinen direkt unter dem Input — gleicher Mechanismus wie die Header-Search-Bar. Klick auf einen Vorschlag → Produkt-/Kategorie-Detail-Seite.

Wie wird das Cart-Badge live aktualisiert?

Die Bar nutzt einen MutationObserver auf dem .header-cart-Parent-Element (nicht auf dem Badge selbst — viele Themes rendern das Badge nur bei nicht-leerem Cart). Sobald Shopware nach einem Add-to-Cart das Header-Cart-Element re-rendert, kopiert die Bar den Counter aus dem Header in das Bar-Badge und animiert ein kurzes Pulse.

Funktioniert das Cart-Badge bei Offcanvas-Cart-Plugins?

Ja — der Observer beobachtet .header-cart unabhängig davon, was beim Add-to-Cart passiert. Wenn Shopware den Counter im Header aktualisiert (was alle Cart-Plugins tun, weil sonst der Header selbst nicht synchron wäre), kommt der Wert auch in der Bar an.

Dynamischer Add-to-Cart

Was macht der dynamische Cart-Button auf Produktseiten genau?

Auf URLs, die mit /detail/ beginnen, wechselt der Cart-Button von einem Link (→ /checkout/cart) zu einem direkten Form-Submit-Trigger des Add-to-Cart-Formulars der Produktseite. Tap auf den Button = Tap auf den „In den Warenkorb"-Submit-Button im Shopware-Standard-Bestellformular.

Was, wenn ich auf der Produktseite zum Warenkorb will?

Mit aktivem dynamischen Add-to-Cart-Modus: der Kunde scrollt nach oben (zum Header) oder verlässt erst die Produktseite. Mit deaktiviertem Modus: der Cart-Button geht überall direkt zum Warenkorb. Trade-Off — empfohlen ist die default Aktivierung, weil der Anwendungsfall „auf Produktseite zum Warenkorb" deutlich seltener ist als „Add-to-Cart".

Konflikte & Performance

Verlangsamt das Plugin die Storefront?

Vernachlässigbar. Die Bar ist ein einzelnes statisches HTML-Element mit Inline-CSS und ein kleiner Inline-JS-Block für Cart-Badge-Observer + Such-Sheet-Toggle. Kein zusätzlicher Asset-Request, kein Datenbank-Zugriff bei jedem Page-Load. Auf den meisten Shops < 5 KB zusätzliche HTML-Größe.

Konflikte mit anderen Mobile-Plugins oder Sticky-Footers?

Möglich bei anderen Sticky-Elementen am unteren Viewport-Rand (Cookie-Banner, Chat-Bubbles, Push-Notification-Prompts). Lösung: über die Z-Index-Hierarchie im Theme regeln — die Bar hat Z-Index 1030 (gleich wie Bootstrap-Navbar). Andere Sticky-Elemente sollten höher liegen, um sichtbar zu bleiben.

Beeinflusst das die Pagespeed-Bewertung?

Marginal positiv: die Bar reduziert die Notwendigkeit der schweren Off-Canvas-Menü-Initialisierung beim ersten Hamburger-Klick — die meisten Mobile-Nutzer kommen nie zum Off-Canvas-Menü, weil Kategorien / Suche / Wishlist / Cart direkt unten erreichbar sind. Marginal negativ: 5 KB mehr HTML.

Multi-Sales-Channel

Pro Sales-Channel unterschiedliche Buttons konfigurieren?

Ja, das ist Standard-Setup. Oben im Plugin-Config den Sales-Channel wechseln, pro Channel andere Buttons / Farben / Icons / Hide-Flags setzen.

Funktionieren andere Sprachen als DE/EN?

Out of the box DE/EN. Für weitere Sprachen die Snippets unter Einstellungen → Shop → Textbausteine ergänzen — Suche nach kommora.mobileAppNav.*. Snippet-Keys sind sprechend (z. B. kommora.mobileAppNav.button.home, …search, …cart).

Kommt nicht weiter?

E-Mail an support@kommora.de mit:

• Shopware-Version
• Plugin-Version
• Beschreibung des Verhaltens
• Storefront-URL für Reproduktion (falls öffentlich)
• Screenshots (Mobile-View)