# Module Mobiele Navigatiebalk voor PrestaShop (dfmobilenav) > Overzicht DF Mobile Nav voegt aan uw PrestaShop-winkel een vaste tabbladbalk onder aan het scherm toe, naar het model van native mobiele apps: startpagina, zoeken, winkelwagen, favorieten en account, met… - Pagina: - Taal: nl - Bijgewerkt op: 2026-09-09 - Andere talen: [fr](https://www.datafirefly.com/documentation/dfmobilenav/index.md), [en](https://www.datafirefly.com/en/documentation/dfmobilenav/index.md), [es](https://www.datafirefly.com/es/documentation/dfmobilenav/index.md), [de](https://www.datafirefly.com/de/documentation/dfmobilenav/index.md), [it](https://www.datafirefly.com/it/documentation/dfmobilenav/index.md), [pl](https://www.datafirefly.com/pl/documentation/dfmobilenav/index.md), [pt](https://www.datafirefly.com/pt/documentation/dfmobilenav/index.md) - Index: ## Overzicht DF Mobile Nav voegt aan uw PrestaShop-winkel een vaste tabbladbalk onder aan het scherm toe, naar het model van native mobiele apps: startpagina, zoeken, winkelwagen, favorieten en account, met tellerbadges die in real time worden bijgewerkt. De balk verschijnt alleen onder een breekpunt dat u zelf bepaalt (standaard 768 px). Op een computer blijft die volledig verborgen en neemt hij geen ruimte op de pagina in. ## Installatie 1. Open in de backoffice **Modules → Modulebeheer** en klik op **Een module installeren**. 2. Upload het bestand `dfmobilenav-1.0.0.zip`. 3. Klik na de installatie op **Configureren**. De module registreert de nodige hooks automatisch (`actionFrontControllerSetMedia` en `displayBeforeBodyClosingTag`). Er is geen aanpassing aan uw thema nodig. ## Configuratie ### De tabbladen kiezen Er zijn vijf tabbladen beschikbaar, elk apart in of uit te schakelen: - **Start**: een link naar de startpagina van de winkel. - **Zoeken**: opent een schermvullend zoekveld of gaat naar de zoekpagina (zie hieronder). - **Winkelwagen**: een link naar de winkelwagen, met een badge met het aantal artikelen. - **Favorieten**: een link naar de verlanglijst, met een badge met het aantal bewaarde producten. - **Account**: een link naar de klantenzone. Staat er geen enkel tabblad aan, dan verschijnt de balk helemaal niet. ### Gedrag van de zoekfunctie Er zijn twee modi: - **Schermvullend zoeken** (de standaard): er opent een invoerveld over de huidige pagina heen, zonder die te verlaten. Sluiten kan met de knop of met de Escape-toets. - **Doorsturen naar de zoekpagina**: het tabblad gedraagt zich als een gewone link naar de native zoekpagina. ### Verbergen bij het scrollen Staat die optie aan, dan verdwijnt de balk wanneer de bezoeker naar beneden scrolt en komt hij terug zodra die weer omhoog gaat. Het gedrag respecteert de systeemvoorkeur voor verminderde beweging. ### Mobiel breekpunt De maximale breedte in pixels waaronder de balk verschijnt. De standaardwaarde is 768 px. De aanvaarde waarden lopen van 320 tot 1600 px; elke waarde buiten dat bereik wordt op 768 gezet. ### Kleuren Er zijn vier kleuren in hexadecimale vorm in te stellen: - De **achtergrondkleur** van de balk (standaard wit). - De **kleur van de pictogrammen en opschriften** in rust (standaard grijs). - De **kleur van het actieve tabblad** (standaard inktzwart). - De **kleur van de badges** met de teller (standaard rood). ## Tellerbadges ### Winkelwagen De badge toont hoeveel artikelen er in de winkelwagen van de bezoeker zitten. Die wordt bij elke toevoeging meteen bijgewerkt, zonder de pagina te herladen, als reactie op de gebeurtenis `updateCart` van PrestaShop. Boven de 99 artikelen toont de badge « 99+ ». ### Favorieten De badge voor de favorieten steunt op de native verlanglijstmodule (blockwishlist) en toont hoeveel producten de ingelogde klant heeft bewaard. Die wordt bijgewerkt na een interactie met de knoppen van de verlanglijst. Staat de verlanglijstmodule in uw winkel uit, dan verdwijnt het tabblad Favorieten automatisch, wat u ook hebt ingesteld: u hoeft niets te doen. De teller voor de favorieten verschijnt alleen bij ingelogde klanten, want de native verlanglijst hangt aan het klantaccount. ## Actief tabblad Het tabblad dat bij de huidige pagina hoort, wordt automatisch uitgelicht en draagt het toegankelijkheidsattribuut voor de huidige pagina. De herkenning dekt de startpagina, het zoeken, de winkelwagen en het bestelproces, de klantenzone en haar subpagina's (identiteit, adressen, historiek, creditnota's, kortingsbonnen) en de verlanglijst. ## Mobiele compatibiliteit - **iOS-veiligezone**: de balk respecteert de onderste veilige zone van recente iPhones en overlapt nooit de thuisbalk. - **Zoom in Safari**: het zoekveld heeft een grootte die de automatische zoom van Safari bij het focussen voorkomt. - **Ruimte onder aan de pagina**: onderaan het document komt automatisch een ruimte ter hoogte van de balk, zodat er geen inhoud verborgen raakt. ## Toegankelijkheid De tabbladen zijn native links, met het toetsenbord te bedienen en met een zichtbare focusring. Het tabblad van de huidige pagina wordt aan hulptechnologie gemeld. De pictogrammen zijn als decoratief gemarkeerd en de tekst draagt de informatie. De animatie bij het verbergen tijdens het scrollen valt weg als de bezoeker in zijn systeem om minder animatie heeft gevraagd. ## Prestaties De module laadt geen pictogramlettertype, geen afbeelding en geen JavaScript-bibliotheek. De pictogrammen zijn lijn-SVG's die rechtstreeks in de pagina worden getoond, het script is in pure JavaScript geschreven en weegt enkele kilobytes. Het verversen van de tellers gebeurt met een lichte aanroep die alleen twee getallen teruggeeft. ## Veelgestelde vragen ### Wijzigt de module de bestanden van mijn thema? Nee. Hij voegt zich in via de standaardhooks van PrestaShop, zonder override en zonder een template te overschrijven. De balk heeft haar eigen stijl, die op zichzelf staat en los van uw stijlblad werkt. ### Botst de balk met een chatknop of een knop om naar boven te gaan? De balk staat onder aan het scherm met een gematigde stapelvolgorde. Overlapt een ander zwevend element, verschuif dat dan met de CSS van uw thema ongeveer 60 pixels naar boven. ### Kan ik de balk op tablet tonen? Ja: verhoog het breekpunt, bijvoorbeeld naar 1024 px, om ook tablets in staande stand te dekken. ### Werkt de module met multistore? Ja. De instellingen worden op het niveau van de PrestaShop-configuratie bewaard en volgen de winkelcontext. ### Werkt de module met PrestaShop 9? Ja. De module is gemaakt en getest van PrestaShop 8.0 tot 9.x. ## Versieoverzicht ### 1.0.0, 12 juli 2026 - Een vaste tabbladbalk onder aan het scherm met vijf inschakelbare tabbladen. - Tellerbadges in real time voor de winkelwagen en de favorieten. - Schermvullend zoeken of doorsturen, naar keuze. - De balk verbergen bij het naar beneden scrollen. - Automatisch uitlichten van het tabblad van de huidige pagina. - Volledige aanpassing van de kleuren en het breekpunt. - Rekening houden met de iOS-veiligezone. - Vertalingen in FR, EN, ES, DE en IT.