Konfiguration – Mobile App Navigation¶
Alle Einstellungen liegen pro Sales-Channel unter Admin → Einstellungen → System → Plugins → KommoraMobileAppNav.
Bereich „Allgemein"¶
| Option | Default | Beschreibung |
|---|---|---|
| Sichtbar bis Breakpoint | md (<768 px) |
Bestimmt, bis zu welcher Viewport-Breite die Bottom-Bar eingeblendet wird. Optionen: sm (<576 px, nur Smartphones), md (<768 px, +kleine Tablets), lg (<992 px, +mittlere Tablets). |
| Plugin-Standardfarben verwenden | aus | Wenn aktiv, werden die Color-Picker unten ignoriert und das Plugin-Default-Theme (helle Bar, blau-grauer Akzent) verwendet. Spart Konfig-Zeit auf neuen Shops. |
Bereich „Buttons"¶
Steuert, welche der 6 Buttons in der Bar erscheinen — von links nach rechts.
| Button | Default | Wirkung |
|---|---|---|
| Startseite | ein | Klick → / |
| Kategorien | ein | Klick → öffnet das Shopware-Standard-Offcanvas-Menü |
| Suche | ein | Klick → öffnet ein Bottom-Sheet mit Suchfeld + Live-Vorschlägen |
| Wunschliste | ein | Klick → /wishlist, mit Counter-Badge wie im Header |
| Konto | ein | Klick → Popup mit „Mein Konto" + „Abmelden" / Login-Link |
| Warenkorb | ein | Klick → /checkout/cart, mit Live-Counter-Badge (Pulse-Animation bei neuen Artikeln) |
Dynamischer Add-to-Cart auf Produktseiten
Unter „Erweitert" → Dynamischer Warenkorb-Button lässt sich aktivieren, dass auf Produktseiten (/detail/…) der Cart-Button stattdessen zum direkten „In den Warenkorb"-Submit wird (triggert das Standard-Bestellformular). Vorteil: ein Klick weniger zwischen Produkt-Ansicht und Add-to-Cart. Nachteil: der Cart-Button verliert auf Produktseiten seine Navigations-Funktion zum Warenkorb selbst — der Kunde muss dafür zuerst weg von der Produktseite.
Bereich „Header auf Mobile reduzieren"¶
Reduziert die Standard-Shopware-Header-Icons auf Mobile, um Doppelungen mit der Bar zu vermeiden.
| Option | Default | Wirkung |
|---|---|---|
| Konto-Icon im Header ausblenden | ein | Versteckt das User-Avatar-Icon im Header — wirksam nur, wenn der Bar-Button „Konto" aktiv ist. |
| Warenkorb-Icon im Header ausblenden | ein | Versteckt das Cart-Icon im Header — wirksam nur, wenn der Bar-Button „Warenkorb" aktiv ist. |
| Such-Icon im Header ausblenden | ein | Versteckt das Such-Lupe-Icon im Header — wirksam nur, wenn der Bar-Button „Suche" aktiv ist. |
| Hamburger-Menü im Header ausblenden | ein | Versteckt das Hamburger-Menü im Header — wirksam nur, wenn der Bar-Button „Kategorien" aktiv ist. |
Strict-Binding-Logik
Die Hide-Flags sind strikt an den jeweiligen Bar-Button gekoppelt. Wenn du den Bar-Button „Suche" deaktivierst, bleibt das Header-Such-Icon automatisch sichtbar — auch wenn die Hide-Option auf „ein" steht. Verhindert versehentliches Komplett-Verstecken einer Funktion.
Bereich „Farben"¶
Wirksam nur, wenn unter „Allgemein" → „Plugin-Standardfarben verwenden" auf aus steht.
| Option | Default | Beschreibung |
|---|---|---|
| Hintergrundfarbe der Bar | #ffffff |
Color-Picker. |
| Icon-Farbe (inaktiv) | #5a6e84 |
Color-Picker. Wird auf inaktive Buttons angewendet. |
| Icon-Farbe (aktiv) | #0a233f |
Color-Picker. Wird auf den Button des aktuell besuchten Bereichs angewendet (z. B. Konto-Button auf der Account-Seite). |
| Badge-Hintergrund | #e74c3c |
Color-Picker. Farbe des Counter-Badges am Wishlist- und Cart-Button. |
| Badge-Textfarbe | #ffffff |
Color-Picker. |
| Suche: Submit-Button-Hintergrund | #0a233f |
Color-Picker. Farbe des Submit-Buttons im Such-Sheet. |
| Suche: Submit-Button-Icon | #ffffff |
Color-Picker. Farbe der Lupe im Submit-Button. |
Bereich „Eigene Icons"¶
Optional. Wenn ein Custom-Icon gewählt ist, wird das Plugin-Default-SVG für diesen Button ersetzt.
| Option | Wirkung |
|---|---|
| Icon: Startseite | Media-Manager-Auswahl. Format: SVG empfohlen (vector, beliebige Größen). |
| Icon: Kategorien | wie oben |
| Icon: Suche | wie oben |
| Icon: Wunschliste | wie oben |
| Icon: Konto | wie oben |
| Icon: Warenkorb | wie oben |
Icon-Format und Größe
SVG ist erste Wahl — skaliert verlustfrei, ist klein im File-Size, übernimmt CSS-color-Werte (für Farbwechsel bei aktivem Button). PNG/WebP funktionieren auch, aber die Icon-Farbe wird dann durch den Plugin-Color-Picker nicht beeinflusst.
Empfohlene Größe: 24×24 px (Standard für Mobile-Bar-Icons). Plugin skaliert intern auf 22 px Höhe.
Speichern und prüfen¶
Nach allen Änderungen oben rechts Speichern. Die Bar-Optionen werden bei jedem Page-Load aus der System-Config gelesen — kein zusätzliches Cache-Leeren nötig.
Farben aktiv = Theme neu kompilieren
Wenn du Color-Picker-Werte änderst, muss das Storefront-Theme neu kompiliert werden (bin/build-storefront.sh) — die Farben werden via CSS-Variablen in das Theme-Bundle gebacken. Bei reiner Button-Sichtbarkeit (Ein/Aus) ist kein Rebuild nötig.