Module Barre de Navigation Mobile PrestaShop (dfmobilenav)

Présentation

DF Mobile Nav ajoute à votre boutique PrestaShop une barre d’onglets fixe en bas de l’écran, sur le modèle des applications mobiles natives : accueil, recherche, panier, favoris et compte, avec des badges de compteur mis à jour en temps réel.

La barre n’apparaît qu’en dessous d’un point de rupture que vous définissez (768 px par défaut). Sur ordinateur, elle est entièrement masquée et n’ajoute aucun espace à la page.

Installation

1. Depuis le back-office, ouvrez Modules → Module Manager, puis cliquez sur Installer un module.
2. Téléversez le fichier dfmobilenav-1.0.0.zip.
3. Cliquez sur Configurer une fois l’installation terminée.

Le module enregistre automatiquement les hooks nécessaires (actionFrontControllerSetMedia et displayBeforeBodyClosingTag). Aucune modification de votre thème n’est requise.

Configuration

Choix des onglets

Cinq onglets sont disponibles et chacun s’active ou se désactive indépendamment :

• Accueil — lien vers la page d’accueil de la boutique.
• Recherche — ouvre un champ de recherche plein écran ou redirige vers la page de recherche (voir ci-dessous).
• Panier — lien vers le panier, avec badge du nombre d’articles.
• Favoris — lien vers la liste de souhaits, avec badge du nombre de produits enregistrés.
• Compte — lien vers l’espace client.

Si aucun onglet n’est activé, la barre n’est pas rendue du tout.

Comportement de la recherche

Deux modes sont proposés :

• Recherche plein écran (par défaut) — un champ de saisie s’ouvre par-dessus la page en cours, sans la quitter. Fermeture au bouton ou à la touche Échap.
• Redirection vers la page de recherche — l’onglet se comporte comme un lien classique vers la page de recherche native.

Masquage au défilement

Lorsque cette option est activée, la barre s’efface quand le visiteur fait défiler vers le bas et réapparaît dès qu’il remonte. Le comportement respecte la préférence système de mouvement réduit.

Point de rupture mobile

Largeur maximale, en pixels, en dessous de laquelle la barre est affichée. La valeur par défaut est 768 px. Les valeurs acceptées vont de 320 à 1600 px ; toute valeur hors de cette plage est ramenée à 768.

Couleurs

Quatre couleurs sont configurables au format hexadécimal :

• Couleur de fond de la barre (blanc par défaut).
• Couleur des icônes et libellés au repos (gris par défaut).
• Couleur de l’onglet actif (noir encre par défaut).
• Couleur des badges de compteur (rouge par défaut).

Badges de compteur

Panier

Le badge affiche le nombre d’articles présents dans le panier du visiteur. Il est mis à jour en direct à chaque ajout, sans rechargement de page, en réaction à l’événement updateCart de PrestaShop. Au-delà de 99 articles, le badge affiche « 99+ ».

Favoris

Le badge des favoris s’appuie sur le module natif de liste de souhaits (blockwishlist) et affiche le nombre de produits enregistrés par le client connecté. Il est actualisé après une interaction avec les boutons de la liste de souhaits.

Si le module de liste de souhaits est désactivé sur votre boutique, l’onglet Favoris est masqué automatiquement, quelle que soit la configuration : rien à faire de votre côté.

Le compteur des favoris ne s’affiche que pour les clients connectés, la liste de souhaits native étant liée au compte client.

Onglet actif

L’onglet correspondant à la page en cours est mis en surbrillance automatiquement et porte l’attribut d’accessibilité de page courante. La détection couvre l’accueil, la recherche, le panier et le tunnel de commande, l’espace client et ses sous-pages (identité, adresses, historique, avoirs, bons de réduction), ainsi que la liste de souhaits.

Compatibilité mobile

• Zone sûre iOS — la barre respecte la zone sûre inférieure des iPhone récents et ne chevauche jamais la barre d’accueil.
• Zoom Safari — le champ de recherche est dimensionné pour empêcher le zoom automatique de Safari au focus.
• Espace en bas de page — un espace équivalent à la hauteur de la barre est ajouté automatiquement au bas du document afin qu’aucun contenu ne soit masqué.

Accessibilité

Les onglets sont des liens natifs, accessibles au clavier, avec un anneau de focus visible. L’onglet de la page en cours est annoncé aux technologies d’assistance. Les icônes sont marquées comme décoratives et le libellé textuel porte l’information. L’animation de masquage au défilement est désactivée si le visiteur a demandé une réduction des animations dans son système.

Performances

Le module ne charge aucune police d’icônes, aucune image et aucune bibliothèque JavaScript. Les icônes sont des SVG au trait rendus directement dans la page, le script est écrit en JavaScript natif et pèse quelques kilo-octets. Le rafraîchissement des compteurs se fait par un appel léger renvoyant uniquement deux nombres.

Questions fréquentes

Le module modifie-t-il les fichiers de mon thème ?

Non. Il s’insère par les hooks standards de PrestaShop, sans surcharge ni override de template. La barre possède son propre style, autonome et indépendant de votre feuille de style.

La barre entre-t-elle en conflit avec un bouton de chat ou de retour en haut ?

La barre est positionnée en bas de l’écran avec un niveau d’empilement modéré. Si un autre élément flottant se superpose, décalez-le vers le haut d’environ 60 pixels via le CSS de votre thème.

Puis-je afficher la barre sur tablette ?

Oui : augmentez le point de rupture, par exemple à 1024 px, pour couvrir également les tablettes en mode portrait.

Le module est-il compatible multiboutique ?

Oui. Les réglages sont enregistrés au niveau de la configuration PrestaShop et respectent le contexte de boutique.

Est-ce compatible PrestaShop 9 ?

Oui. Le module est conçu et validé de PrestaShop 8.0 à 9.x.

Journal des versions

1.0.0 — 12 juillet 2026

• Barre d’onglets fixe en bas de l’écran avec cinq onglets activables.
• Badges de compteur en direct sur le panier et les favoris.
• Recherche en plein écran ou redirection, au choix.
• Masquage de la barre au défilement vers le bas.
• Surbrillance automatique de l’onglet de la page en cours.
• Personnalisation complète des couleurs et du point de rupture.
• Prise en compte de la zone sûre iOS.
• Traductions FR, EN, ES, DE, IT.