Modul Mobile Navigationsleiste PrestaShop (dfmobilenav)

Überblick

DF Mobile Nav ergänzt Ihren PrestaShop-Shop um eine feste Tab-Leiste am unteren Bildschirmrand nach dem Vorbild nativer Mobile-Apps: Startseite, Suche, Warenkorb, Wunschliste und Konto — mit Zählerabzeichen, die in Echtzeit aktualisiert werden.

Die Leiste erscheint nur unterhalb eines von Ihnen festgelegten Breakpoints (standardmäßig 768 px). Auf dem Desktop ist sie vollständig ausgeblendet und fügt der Seite keinen Abstand hinzu.

Installation

1. Öffnen Sie im Backoffice Module → Modulmanager und klicken Sie auf Modul hochladen.
2. Laden Sie die Datei dfmobilenav-1.0.0.zip hoch.
3. Klicken Sie nach Abschluss der Installation auf Konfigurieren.

Das Modul registriert die erforderlichen Hooks automatisch (actionFrontControllerSetMedia und displayBeforeBodyClosingTag). Eine Änderung Ihres Themes ist nicht nötig.

Konfiguration

Auswahl der Tabs

Fünf Tabs stehen zur Verfügung, jeder einzeln aktivierbar oder deaktivierbar:

• Startseite — Link zur Startseite des Shops.
• Suche — öffnet ein Vollbild-Suchfeld oder leitet zur Suchseite weiter (siehe unten).
• Warenkorb — Link zum Warenkorb, mit Abzeichen für die Anzahl der Artikel.
• Wunschliste — Link zur Wunschliste, mit Abzeichen für die Anzahl gespeicherter Produkte.
• Konto — Link zum Kundenbereich.

Ist kein Tab aktiviert, wird die Leiste gar nicht erst gerendert.

Verhalten der Suche

Zwei Modi stehen zur Wahl:

• Vollbildsuche (Standard) — ein Eingabefeld öffnet sich über der aktuellen Seite, ohne sie zu verlassen. Schließen über die Schaltfläche oder die Escape-Taste.
• Weiterleitung zur Suchseite — der Tab verhält sich wie ein gewöhnlicher Link zur nativen Suchseite.

Ausblenden beim Scrollen

Ist diese Option aktiv, weicht die Leiste zurück, sobald der Besucher nach unten scrollt, und kehrt zurück, sobald er wieder nach oben scrollt. Das Verhalten berücksichtigt die Systemeinstellung für reduzierte Bewegung.

Mobiler Breakpoint

Maximale Breite in Pixeln, unterhalb derer die Leiste angezeigt wird. Der Standardwert ist 768 px. Zulässig sind Werte von 320 bis 1600 px; Werte außerhalb dieses Bereichs werden auf 768 zurückgesetzt.

Farben

Vier Farben lassen sich im Hexadezimalformat konfigurieren:

• Hintergrundfarbe der Leiste (standardmäßig Weiß).
• Farbe von Symbolen und Beschriftungen im Ruhezustand (standardmäßig Grau).
• Farbe des aktiven Tabs (standardmäßig Tiefschwarz).
• Farbe der Zählerabzeichen (standardmäßig Rot).

Zählerabzeichen

Warenkorb

Das Abzeichen zeigt die Anzahl der Artikel im Warenkorb des Besuchers. Es wird bei jedem Hinzufügen live aktualisiert, ohne Neuladen der Seite, als Reaktion auf das updateCart-Ereignis von PrestaShop. Ab 99 Artikeln zeigt das Abzeichen „99+“.

Wunschliste

Das Wunschlisten-Abzeichen stützt sich auf das native Wunschlisten-Modul (blockwishlist) und zeigt die Anzahl der vom angemeldeten Kunden gespeicherten Produkte. Es wird nach jeder Interaktion mit den Wunschlisten-Schaltflächen aktualisiert.

Ist das Wunschlisten-Modul in Ihrem Shop deaktiviert, wird der Wunschlisten-Tab unabhängig von der Konfiguration automatisch ausgeblendet — Sie müssen nichts unternehmen.

Der Wunschlisten-Zähler erscheint nur bei angemeldeten Kunden, da die native Wunschliste an das Kundenkonto gebunden ist.

Aktiver Tab

Der Tab der aktuellen Seite wird automatisch hervorgehoben und trägt das Barrierefreiheits-Attribut der aktuellen Seite. Die Erkennung umfasst Startseite, Suche, Warenkorb und Bestellstrecke, den Kundenbereich mit seinen Unterseiten (Identität, Adressen, Bestellhistorie, Gutschriften, Gutscheine) sowie die Wunschliste.

Mobile Kompatibilität

• iOS Safe-Area — die Leiste berücksichtigt die untere Safe-Area aktueller iPhones und überlappt die Home-Anzeige nie.
• Safari-Zoom — das Suchfeld ist so dimensioniert, dass Safari beim Fokussieren nicht automatisch zoomt.
• Abstand am Seitenende — am Ende des Dokuments wird automatisch ein Abstand in Höhe der Leiste ergänzt, damit kein Inhalt verdeckt wird.

Barrierefreiheit

Die Tabs sind native Links, per Tastatur erreichbar, mit sichtbarem Fokusring. Der Tab der aktuellen Seite wird assistiven Technologien angekündigt. Die Symbole sind als dekorativ ausgezeichnet; die Information trägt die Textbeschriftung. Die Ausblend-Animation beim Scrollen wird deaktiviert, wenn der Besucher in seinem System reduzierte Bewegung angefordert hat.

Performance

Das Modul lädt keine Icon-Schriftart, kein Bild und keine JavaScript-Bibliothek. Die Symbole sind eingebettete SVG-Striche, die direkt in der Seite gerendert werden, das Skript ist natives JavaScript und wiegt nur wenige Kilobyte. Die Aktualisierung der Zähler erfolgt über einen leichtgewichtigen Aufruf, der lediglich zwei Zahlen zurückgibt.

Häufige Fragen

Verändert das Modul die Dateien meines Themes?

Nein. Es bindet sich über die Standard-Hooks von PrestaShop ein, ohne Template-Override. Die Leiste bringt ihre eigenen, eigenständigen Styles mit, unabhängig von Ihrem Stylesheet.

Kollidiert die Leiste mit einem Chat- oder Nach-oben-Button?

Die Leiste sitzt am unteren Bildschirmrand mit moderater Stapelebene. Überlappt ein anderes schwebendes Element, verschieben Sie es im CSS Ihres Themes um rund 60 Pixel nach oben.

Kann ich die Leiste auch auf Tablets anzeigen?

Ja: Erhöhen Sie den Breakpoint, etwa auf 1024 px, um auch Tablets im Hochformat abzudecken.

Ist das Modul multishop-fähig?

Ja. Die Einstellungen werden in der PrestaShop-Konfiguration gespeichert und berücksichtigen den Shop-Kontext.

Ist es mit PrestaShop 9 kompatibel?

Ja. Das Modul ist von PrestaShop 8.0 bis 9.x konzipiert und geprüft.

Versionsverlauf

1.0.0 — 12. Juli 2026

• Feste Tab-Leiste am unteren Bildschirmrand mit fünf aktivierbaren Tabs.
• Live-Zählerabzeichen für Warenkorb und Wunschliste.
• Vollbildsuche oder Weiterleitung, nach Wahl.
• Ausblenden der Leiste beim Herunterscrollen.
• Automatische Hervorhebung des Tabs der aktuellen Seite.
• Vollständige Anpassung von Farben und Breakpoint.
• Berücksichtigung der iOS Safe-Area.
• Übersetzungen DE, FR, EN, ES, IT.