Navigation par catégorie : bandeau de menu et menu hors cadre

Les vastes gammes de produits comportent plus de catégories principales qu’il n’est possible d’en afficher sur une seule ligne. Jusqu’à présent, il n’y avait qu’une seule option : tout placer dans le bandeau de menu en espérant que cela tienne – ou rendre certaines catégories accessibles uniquement via le menu de gauche. Avec XONIC 4.10, vous déterminez quelles catégories apparaissent dans le bandeau de menu. Toutes les autres restent accessibles en un clic : le bouton « Plus de catégories » se trouve juste après la dernière entrée et ouvre un panneau comportant une colonne par catégorie principale.

Le bandeau de menu avec cinq catégories mises en avant et le bouton « Plus de catégories ». Cliquez pour agrandir.

Le panneau « Plus de catégories » : une colonne par catégorie principale, avec à la fin de chaque colonne un lien vers la catégorie complète. Cliquez pour agrandir.

Sur smartphone et tablette, ces mêmes éléments s'affichent sous forme de rangée de puces sous l'en-tête. Le menu de gauche affiche en haut les catégories mises en avant et, en dessous, la ligne « Plus de catégories » avec les autres catégories principales.

La rangée de puces, après un balayage vers la droite : à la fin de la puce « Plus de catégories ».

Le menu de gauche sur le smartphone avec tous les modules. Cliquez pour agrandir.

Après la mise à jour, le bandeau de menu d'une boutique existante ressemble dans un premier temps presque à ce qu'il était auparavant. La nouvelle répartition entre « À la une » et « Plus de catégories », ainsi que la rangée de puces, restent désactivées jusqu’à ce que vous les activiez. Ce qui change immédiatement et ce qui reste désactivé dans un premier temps (pour les boutiques utilisant leur propre modèle, voir la section « Boutiques avec leur propre modèle ») :

Un sous-menu dans le ruban : en bas de la colonne, vous voyez désormais « Afficher tout dans « X » ». Cliquez pour agrandir.

Lors d’une nouvelle installation à partir de la version XONIC 4.10, les « Highlights », la rangée de puces et les images de catégories au niveau supérieur sont déjà activés.

1. Vérifiez si l'option Paramètres → Apparence → En-tête → Barre de navigation dans l'en-tête (Menu, Accueil, Catégories) activée/désactivée (HEADER_DISPLAY_NAVIGATION) est activée (valeur true). Sans la barre de navigation, il n’y a ni bande ni puces, et les nouveaux champs du masque de catégorie ne s’affichent pas.
2. Dans le même groupe , sous Navigation en en-tête : Catégories mises en avant dans le bandeau de menu (HEADER_NAV_HIGHLIGHT_CATEGORIES), sélectionnez l’endroit où la répartition entre « Catégories mises en avant » et « Plus de catégories » doit s’appliquer :

   Bandeau de menu et menu de gauche
   true

   Le bandeau de menu affiche les « Highlights » et, derrière, le bouton « Plus de catégories ». Le menu de gauche affiche les « Highlights » en haut et, en dessous, la ligne « Plus de catégories » ; la rangée de puces affiche les mêmes « Highlights » et, à la fin, l’onglet « Plus de catégories ». Configuration par défaut lors d’une nouvelle installation.

   Menu de gauche uniquement
   offcanvas_only

   Le menu de gauche et la rangée de puces affichent les « Highlights » et « Plus de catégories ». Le bandeau de menu reste inchangé : il affiche les catégories avec « Catégorie comme onglet d’en-tête », sans le bouton « Plus de catégories ».

   Bandeau de menu uniquement
   band_only

   Le bandeau de menu affiche les éléments phares et le bouton « Plus de catégories ». Le menu de gauche affiche, comme auparavant, toutes les catégories, tandis que la rangée de puces affiche les catégories avec « Catégorie comme onglet d’en-tête ».

   Désactivé
   false

   L'ancienne navigation avec le bandeau de menu, le menu de gauche et la rangée de puces. Voici à quoi ressembleront les boutiques existantes après la mise à jour.

3. Dans le même groupe , sous « Navigation en haut de page : Bandeau de menu mobile (puces) » (HEADER_NAV_MOBILE_CHIPS), activez la rangée de puces (valeur « true »). Les puces suivent le menu de gauche : s’il est divisé, elles affichent ses éléments phares et, à la fin, la puce « Plus de catégories ». Sinon, elles affichent comme auparavant les catégories avec « Catégorie comme onglet d’en-tête ».
4. Définissez quelles catégories sont mises en avant (section suivante). Sans modification, toutes les catégories avec l’option « Catégorie comme onglet d’en-tête » sont considérées comme mises en avant.
5. Accédez à votre boutique et vérifiez le bandeau de menu, les onglets et le menu de gauche.

Les deux boutons du groupe « En-tête » (zone de tête). Cliquez pour agrandir.

Ouvrez Produits → Catégories / Produits et modifiez une catégorie. Juste en dessous de « Catégorie comme onglet d'en-tête », vous trouverez deux nouveaux champs.

Produits phares dans le bandeau de menu

• Automatique (comme l’onglet d’en-tête) – c’est le réglage par défaut. La catégorie est mise en avant lorsque l’option « Catégorie comme onglet d’en-tête » est activée. Sans autre intervention de votre part, votre boutique reprend ainsi la sélection actuelle.
• Oui – la catégorie figure toujours dans la barre, indépendamment de l’onglet d’en-tête.
• Non – la catégorie n’apparaît jamais dans la barre de menu, mais sous « Plus de catégories ».

À côté du champ figure l’information actuelle : « Actuellement : catégorie mise en avant – la catégorie apparaît directement dans le bandeau de menu. » ou « Actuellement : pas de catégorie mise en avant – la catégorie n’apparaît pas directement dans le bandeau de menu. » Si l’option principale est désactivée, le masque vous en informe. Dans ce cas, seule l’option « Catégorie comme onglet d’en-tête » s’applique ; les options « Oui » et « Non » ne prennent effet qu’après l’activation.

Si la répartition ne s’applique qu’au menu de gauche, l’affichage se réfère à la liste supérieure du menu de gauche, par exemple « Actuellement : catégorie mise en avant – la catégorie figure en haut du menu hors canevas de gauche. » Dans le bandeau de menu, seule l’option « Catégorie comme onglet d’en-tête » s’applique alors ; le masque l’indique également. Si elle ne s’applique qu’au bandeau de menu, les options « Oui » et « Non » n’ont d’effet qu’à cet endroit, et le menu de gauche continue d’afficher toutes les catégories.

Les sous-catégories peuvent également être mises en avant. Elles disposent alors de leur propre entrée dans la barre et restent également accessibles sous leur catégorie principale. L’ordre dans la barre suit votre arborescence de catégories. Les modifications sont visibles immédiatement après l’enregistrement de la catégorie.

Les deux nouveaux champs du masque de catégorie avec indicateur d’état. Cliquez pour agrandir.

Mise en évidence dans la navigation

Le deuxième champ vous permet de mettre une catégorie en évidence : Aucune, Couleur d'accentuation (le nom apparaît dans la couleur d'accentuation de votre boutique), Soldes (badge) ou Nouveautés (badge) (un petit badge à côté du nom). La mise en évidence s'affiche de la même manière partout : dans le bandeau de menu, dans les sous-menus, dans le panneau « Plus de catégories », dans les puces et dans le menu de gauche. Elle s'applique à tous les niveaux, et la catégorie conserve sa position dans l'ordre de tri.

À partir d’une largeur d’écran de 1 200 px, la boutique affiche le bandeau de menu. Si celui-ci est divisé, le bouton « Plus de catégories » se trouve juste après la dernière entrée. Son panneau affiche, pour chaque catégorie principale, une colonne contenant ses sous-catégories. Le nombre de sous-catégories affichées par colonne est régi par le même paramètre que pour les sous-menus de la barre. S’il y en a davantage, l’option « Afficher tout dans « X » » permet d’accéder à la catégorie complète.

• Débordement automatique : si tous les éléments en vedette ne tiennent pas sur une seule ligne, les entrées excédentaires sont déplacées vers le panneau et y apparaissent en première position.
• Catégorie active : si la catégorie actuelle se trouve sous « Plus de catégories », le bouton est souligné.
• Utilisation avec la souris : le panneau s’ouvre lorsque vous passez la souris dessus. Un clic le maintient ouvert, le clic suivant le ferme. Un clic en dehors du panneau ou la touche Échap le ferme également.
• Tablette et clavier : le panneau s’ouvre par un tapotement ou à l’aide de la touche Entrée ou de la barre d’espace.

Sur la page de catégorie « Outdoor », le bouton « Plus de catégories » est souligné. Cliquez pour agrandir.

Lorsque la largeur de l'écran est inférieure à 1 200 px, la rangée de puces remplace la bande : il s'agit de boutons ronds que l'on peut faire défiler horizontalement. La puce de la catégorie actuelle est surlignée en foncé et est déplacée dans la zone visible lorsque la page est chargée.

Les puces font partie de la navigation mobile et suivent donc le menu de gauche. Si le menu de gauche est divisé en « À la une » et « Plus de catégories », les puces affichent les mêmes catégories mises en avant, et la dernière puce « Plus de catégories » ouvre directement le menu de gauche dans le panneau « Plus de catégories ». Sinon, elles affichent comme auparavant les catégories avec l’option « Catégorie comme onglet d’en-tête ».

Le menu de gauche s’ouvre via l’icône de menu située dans l’en-tête. Sur smartphone, il occupe toute la largeur de l’écran ; à partir d’une largeur d’écran de 768 px, il s’affiche sous la forme d’un panneau latéral de 440 px de large. Un en-tête fixe indique où vous vous trouvez et contient les boutons « Retour » et « Fermer ». Chaque sous-niveau commence par « Afficher tout dans « X » ».

Vous pouvez effectuer cette sélection dans Paramètres → Design → Off-Canvas → Off-Canvas à gauche : Modèle de navigation. La profondeur du menu reste déterminée par la profondeur des catégories au sein du même groupe (par défaut 2) : Pour 1, il n’y a pas de sous-niveaux ; pour 2, des sous-niveaux sans accordéon ; pour 3, l’accordéon s’ajoute pour le troisième niveau.

Le menu s'ouvre là où se trouve votre clientèle

Le menu s’ouvre dans le panneau contenant la catégorie actuelle et la met en surbrillance. Sur une sous-catégorie, il s’ouvre dans le panneau de sa catégorie principale ; sur une catégorie de troisième niveau, il s’ouvre avec l’accordéon déployé ; sur une catégorie sous « Plus de catégories », il s’ouvre dans le panneau correspondant. Les pages de produits se comportent comme leur catégorie. À la fermeture, le menu revient à ce point de départ.

Deuxième niveau avec bouton « Retour », troisième niveau sous forme d’accordéon.

Le panneau « Plus de catégories » avec une image et une brève description.

À partir d'une largeur de 768 px, le menu s'affiche sous forme de panneau latéral. Cliquez pour agrandir.

Vous pouvez configurer tous les modules dans Paramètres → Design → Off-Canvas.

Images de catégorie et brève description

Si vous le souhaitez, le menu affiche également, au niveau supérieur, l'image de catégorie (48 px à côté du nom) et, sous le nom, une ligne extraite de la brève description de la catégorie. La brève description n'apparaît que si l'option « Activer la brève description également pour les catégories et les pages CMS » (ENABLE_SHORT_DESCRIPTION) est activée dans Paramètres → Design → Général, et si la catégorie dispose d'une brève description.

Vignettes promotionnelles issues du gestionnaire de bannières

Jusqu’à deux vignettes comprenant une image, un titre, un texte court et le lien « Découvrir maintenant » signalent les promotions dans le menu. Vous les créez en tant que bannières sous Outils → Gestionnaire de bannières (groupe de bannières offcanvas_nav) :

• Le nom de la bannière devient le titre de la vignette, le texte HTML devient le texte (la mise en forme est ignorée) et l’URL de la bannière devient la destination du lien.
• Le fichier image de la bannière et le fichier image de la bannière (mobile) se remplacent mutuellement si l’un des deux manque.
• Les deux dernières bannières actives créées dans le groupe s’affichent. S’il n’y a pas de bannière active, le menu n’affiche aucune vignette.
• Les dates« Début de validité » et « Fin de validité » déterminent la durée d’affichage. Une limitation en fonction du nombre d’impressions ne s’applique pas à ce groupe, car le menu est chargé sur chaque page et aucune publicité n’est comptabilisée. Le gestionnaire de bannières comptabilise les clics comme d’habitude.

Une bannière du groupe « offcanvas_nav » dans le gestionnaire de bannières. Cliquez pour agrandir.

Zone de services

Située sous la navigation, la zone de services regroupe tout ce dont les clients ont besoin lorsqu’ils naviguent sur le site : pages d’information, rappel (si le service de rappel est activé), langue et devise, panier et, en dernière ligne, Connexion ou Mon compte. Les différentes lignes correspondent aux boutons présents dans votre en-tête. Vous définissez les pages d’information qui s’affichent dans le CMS → Gestionnaire CMS, page par page, via le champ « Priorité/Ordre de tri » dans le menu déroulant de gauche sous « Informations » (0 = ne pas afficher).

La zone de services est activée par défaut et s’affiche donc immédiatement dans la plupart des boutiques après la mise à jour. Vous pouvez la masquer à l’aide du paramètre « Off-Canvas à gauche : zone de services » dans le même groupe (valeur : false).

Recherche dans le menu

Pour les boutiques ne disposant pas de champ de recherche dans l’en-tête, un champ de recherche peut être affiché en haut du menu. Si votre boutique dispose déjà d’une fonction de recherche dans l’en-tête, désactivez cette option, sinon la recherche apparaîtra en double.

Aperçu de tous les paramètres

Les six premiers paramètres se trouvent sous Paramètres → Design → Off-Canvas. Le dernier paramètre détermine si le menu de gauche est divisé en « À la une » et « Plus de catégories ». Il se trouve sous Paramètres → Design → En-tête.

Le groupe « Off-Canvas » sous Paramètres → Apparence. Cliquez pour agrandir.

La nouvelle navigation par catégories fait partie intégrante de XONIC 4.10; aucun module complémentaire n’est nécessaire. XONIC 4.10 est en cours de préparation ; nous annoncerons la date de sortie dans notre rubrique Actualités.