Le menu principal de votre boutique PrestaShop, en colonnes et sur mobile

Le menu natif de PrestaShop affiche vos catégories et quelques liens, dans une seule forme. Pas de colonnes, pas d'étiquette « Nouveau », pas de produit mis en avant, pas de second menu en pied de page, et une catégorie réservée à un groupe de clients peut y rester visible pour tous en PrestaShop 1.7.6.

À l'installation, le module reprend votre menu natif dans le même ordre : catégories avec leurs sous-catégories, pages, produits, marques, fournisseurs, liens. Le menu natif reste actif tant que vous préparez le nouveau ; un bouton « Passer à ce menu » le désactive (jamais désinstallé), un autre vous y ramène. En multiboutique, la reprise et le retour se font boutique par boutique.

Rien n'est à régler pour commencer : le menu repris s'affiche en barre de menu, avec les couleurs et la police de votre thème. Mise en page, style et police se changent ensuite, si vous le voulez.

Dans le back-office, l'arbre du menu se réorganise par glisser-déposer (ou au clavier), et l'aperçu en direct, ordinateur et mobile, montre le rendu de la boutique avant l'enregistrement.

• Déroulant ou en colonnes : de 1 à 6 colonnes, chaque sous-entrée dans sa colonne.
• Sous-catégories automatiques : une entrée « Catégorie » affiche ses sous-catégories toutes seules, et suit votre catalogue. Profondeur (jusqu'à 12 niveaux) et nombre par niveau se règlent.
• Étiquettes colorées sur une entrée (« Nouveau », « Soldes »), dans chaque langue.
• Images des catégories dans les colonnes, chargées seulement à l'ouverture.
• Carte produit dans un panneau : image, nom et prix du client (le prix n'est jamais mis en cache d'un client à l'autre).
• Visibilité par groupe de clients, par écran (ordinateur, mobile) et par dates.

Pour un grand catalogue, le menu principal peut s'ouvrir en panneau latéral : chaque clic descend d'un niveau, avec un bouton retour et le titre du niveau, sans limite de profondeur. Quatre mises en page au choix : la barre de menu seule, la barre de menu avec le panneau derrière le bouton, le panneau seul, ou la pleine page. Le panneau s'ouvre du côté choisi, en miroir automatique en arabe.

• Clic : le nom ouvre la page et la flèche ouvre le niveau, ou chaque clic ouvre le niveau.
• Carte de mise en avant : une image et un lien en bas d'un niveau (une collection, une promotion), image vérifiée et ré-encodée à l'envoi.
• Recherche dans le panneau (LNK Recherche avancée quand elle est active, sinon celle de PrestaShop) et liens du compte client.
• Sur mobile, le bouton du panneau prend la place du bouton de menu du thème : un seul menu à l'écran, avec les langues et les devises en bas du panneau quand la boutique en propose plusieurs.
• Sans JavaScript, le panneau reste utilisable en liste dépliable. Au-delà de 300 entrées, les niveaux profonds arrivent à leur ouverture.

Après la mise à jour, votre boutique garde sa barre de menu : le panneau s'active dans les réglages du menu principal.

Un menu d'en-tête, un menu de pied de page, un menu dans une colonne : chaque menu a son emplacement, son style et sa police. Dix emplacements sont proposés (en-tête, deux barres de navigation, pleine largeur, pied de page et ses abords, colonnes de gauche et de droite). Pour placer un menu ailleurs, le back-office donne l'appel prêt à copier dans votre thème. Le menu principal porte les repères des thèmes Classic et Hummingbird : il se range dans leur tiroir mobile sans réglage.

Huit styles prêts à l'emploi, ou « Hérite du thème » pour garder ses couleurs. Cinq polices sous licence libre (dont Cairo pour l'arabe), servies par votre boutique, jamais par Google ; la police du thème reste le réglage par défaut. Sur mobile, le mot « Menu » à côté de l'icône peut être masqué ; il reste lu par les lecteurs d'écran.

Chiffres mesurés sur le module livré (version 1.9.3), compressé en gzip (niveau 9). En barre de menu : aucun JavaScript, ni jQuery ; les sous-menus s'ouvrent au survol, au clic et au clavier en HTML et CSS seuls. Une feuille de structure de 2,4 Ko, plus le seul style choisi (0,4 à 0,6 Ko) et, si vous en choisissez une, la seule police choisie (0,4 à 0,6 Ko de CSS, puis l'alphabet affiché). Le panneau à tiroirs ajoute, seulement s'il est activé, un script de 1,9 Ko sans dépendance et une feuille de 1,8 Ko. Les images du menu ne se chargent qu'à l'ouverture d'un panneau, avec leurs dimensions.

Les variables du gabarit ont la forme de celles du menu natif, et l'accroche actionMainMenuModifier est appelée comme dans le natif. Un menu se place par son code : {hook h='displayLnkMegamenu' code='pied'} ou {widget name='lnk_megamenu' code='pied'}. Les variables CSS --lnk-megamenu-* habillent le menu sans toucher au gabarit, lui-même surchargeable. Un thème peut livrer ses menus de départ (seed.json, contrat documenté), ou seulement leur forme en laissant la boutique fournir les entrées ("items": "native"). Six accroches permettent à un module ou à un thème d'ajouter son contenu dans le panneau à tiroirs.

Chaque version est vérifiée par une installation réelle : PrestaShop 1.7.6, 1.7.8 et 8.1 pour l'archive 1.1.N, PrestaShop 9.0 pour l'archive 1.9.N.