Mobile App Navigation¶
Aktuelle Version: 1.0.0 · Status: Im Shopware Store verfügbar
Mobile-First Bottom-Navigation im App-Style für Shopware-6-Storefronts. Live-Cart-Badge, Such-Sheet, Wishlist, Konto-Popup und konfigurierbare Buttons — sticky am unteren Viewport-Rand wie native Mobile-Apps.
Worum geht es¶
Auf Smartphone-Viewports verschwenden traditionelle Header-Navigationen Platz und Klicks: Hamburger-Menü, Such-Lupe und Konto-Icon sind oben am Rand des Screens — also genau dort, wo der Daumen es am schwersten erreicht. Native Mobile-Apps lösen das seit Jahren mit einer Bottom-Navigation: die wichtigsten Aktionen sitzen unten in Daumen-Reichweite, sind permanent sichtbar und verschwinden nicht beim Scrollen.
Mobile App Navigation bringt dieses Pattern in den Shopware-Storefront — als sticky Bottom-Bar, die auf konfigurierbaren Mobile-Breakpoints einblendet und parallel die redundanten Header-Icons reduziert.
Highlights¶
- Sticky Bottom-Bar am unteren Viewport-Rand, mit iOS-Safe-Area-Inset-Support für Notch- und Home-Bar-Geräte
- Live-Cart-Badge mit Pulse-Animation bei Add-to-Cart — beobachtet
.header-cart-DOM-Änderungen, keine extra API-Polls - Such-Sheet als Overlay nach Klick auf Lupe — bindet Shopware-Standard-
SearchWidgetein, Live-Vorschläge ab 3 Zeichen - Konto-Popup mit „Mein Konto" + „Abmelden" / „Login"-Links — kein Dialog-Sprung nötig
- Wishlist-Button mit Counter-Badge (analog zum Header-Wishlist-Counter)
- Dynamischer Cart-Button auf Produktseiten: wird zum direkten „In den Warenkorb"-Button mit Quantity-Form (optional)
- Eigene Icons pro Button via Media-Manager — alle 6 Buttons individuell ersetzbar
- Color-Picker für Bar-Background, Icon-Farben (aktiv/inaktiv), Badge — oder Plugin-Default-Theme verwenden
- Header-Reduktion auf Mobile: Hamburger / Such-Lupe / Konto-Icon / Cart-Icon im Header automatisch ausblenden, wenn das Bar-Pendant aktiv ist
- Pro Sales-Channel konfigurierbar — Multi-Channel-Setups erlauben unterschiedliche Bar-Auswahlen je Shop
Wann macht das Sinn¶
- >60 % Mobile-Traffic in deinem Shop
- Conversion-Optimierung auf Mobile — kürzere Klick-Wege zu Suche und Warenkorb
- PWA-Anmutung ohne tatsächliche PWA-Installation
- Shops, deren Zielgruppe von nativen Apps gewohnt ist, Aktionen unten am Screen zu erwarten
So sieht es aus¶
Die Bar erscheint unterhalb des Content-Bereichs, fix positioniert. Auf Tablets (md-Breakpoint, Standard) und Desktops verschwindet sie automatisch — dort übernimmt wieder die Standard-Header-Navigation. (Screenshot wird ergänzt.)
Such-Klick öffnet ein Overlay-Sheet von unten, das volle Bildschirmbreite einnimmt — exakt wie native iOS-/Android-Search-Sheets. (Screenshot wird ergänzt.)
Add-to-Cart auf Produktseiten wechselt den Cart-Button automatisch von „zum Warenkorb" auf einen direkten „In den Warenkorb"-Form-Submit. (Screenshot wird ergänzt.)
Schnelleinstieg¶
- Plugin installieren
- Plugin aktivieren, Cache leeren
- Admin → Einstellungen → System → Plugins → KommoraMobileAppNav öffnen und konfigurieren
- Auf Mobile (oder DevTools-Mobile-View) prüfen — die Bar erscheint am unteren Rand
- Optional: Standard-Header-Icons auf Mobile reduzieren (Hamburger / Such-Lupe / Konto / Cart)