Aller au contenu
edoobox Docs
Essayer gratuitement 7 jours d’essai sans engagement
Menu
Essayer gratuitement 7 jours d’essai sans engagement

Créer une vue en tuiles pour les catégories et sous-catégories

Les illustrations montrent une version antérieure de l'interface. Utilisez les étapes de ce guide pour les fonctions et options disponibles.

Créer une vue en tuiles pour les catégories et sous-catégories

Avec le widget Tuiles de catégories, vous guidez visuellement les visiteurs dans une structure d’offres imbriquée. Une catégorie principale peut d’abord afficher les thèmes, puis une sous-catégorie les niveaux ou les sites, par exemple. Les offres elles-mêmes apparaissent uniquement au niveau approprié.

Pour les sous-catégories, edoobox propose un choix explicite : elles peuvent reprendre le design de la catégorie parente ou recevoir leur propre design. Cette attribution dépend du paramètre général Design pour les sous-catégories.

Planifier d’abord la structure des catégories

Créez les catégories principales et sous-catégories sous Offres et catégories. Utilisez chaque niveau pour un choix compréhensible, par exemple :

Exemple de démonstration avec catégories principales pour trois cours de langues

Exemple du premier niveau : les catégories de langues constituent le point d’entrée. La catégorie choisie détermine les sous-catégories affichées ensuite.

  • Niveau 1 : langue

  • Niveau 2 : niveau de langue

  • Niveau 3 : cours concrets

Un trop grand nombre de niveaux allonge le parcours de réservation. Une sous-catégorie ne doit constituer un niveau propre que si elle regroupe plusieurs offres pertinentes ou d’autres sous-catégories.

Activer les designs des sous-catégories

  1. Ouvrez Paramètres → Offres → Général.

  2. Activez Design pour les sous-catégories. Cette fonction est désactivée par défaut.

  3. Ouvrez ensuite la sous-catégorie souhaitée et accédez à ses paramètres.

Si la fonction générale est désactivée, edoobox empêche la modification du design d’une sous-catégorie et affiche une indication.

Configurer les tuiles de catégories dans le design

Dans le Design Manager, modifiez le modèle Vue d’ensemble des offres et ajoutez le widget Tuiles de catégories. Le widget propose les paramètres suivants :

  • Largeur « Vue normale » : détermine combien de tuiles peuvent tenir côte à côte sur les grands écrans.

  • Largeur « Vue tablette » : contrôle la largeur des tuiles dans les vues intermédiaires.

  • Bouton : affiche ou masque le bouton « Afficher ».

  • Afficher les catégories vides : décide si les catégories sans contenu visible apparaissent aussi comme tuiles.

L’image d’une catégorie se gère séparément dans les paramètres de catégorie. Le design définit la présentation ; l’image de catégorie fournit le contenu visuel concret de la tuile.

Attribuer ou hériter un design

  1. Ouvrez les paramètres de la catégorie principale et choisissez le design en tuiles souhaité sous Design.

  2. Ouvrez la sous-catégorie et modifiez aussi le champ Design.

  3. Choisissez un design précis ou Design de la catégorie parente.

  4. Répétez l’attribution pour les autres sous-catégories.

L’héritage est utile si tous les niveaux doivent avoir le même aspect. Un design distinct de sous-catégorie est utile si le deuxième niveau nécessite déjà une liste d’offres, un calendrier ou une autre présentation au lieu d’autres catégories.

Vérifier la navigation dans l’aperçu

  • Parcourez entièrement chaque catégorie principale et sous-catégorie.

  • Vérifiez les vues ordinateur, tablette et mobile.

  • Contrôlez les noms, les images, l’ordre et la navigation de retour.

  • Désactivez Afficher les catégories vides si vous ne souhaitez pas annoncer délibérément les catégories vides.

  • Vérifiez que les offres publiées se trouvent réellement dans la sous-catégorie attendue.

Exemple d’utilisation : navigation uniforme d’une école de langues

Une école de langues affiche l’allemand, l’anglais et le français comme tuiles principales. Les sous-catégories A1, A2 et B1 reprennent chacune le design de la catégorie parente. La navigation reste ainsi identique aux deux niveaux et peut être gérée de manière centralisée avec un seul design.

Exemple d’utilisation : présentation propre au deuxième niveau

Un centre sportif affiche les sports sous forme de tuiles. Après un clic sur « Natation », il souhaite afficher directement une liste compacte d’offres plutôt qu’un deuxième ensemble de tuiles. La sous-catégorie reçoit donc son propre design avec liste d’offres, tandis que la catégorie principale utilise le widget de tuiles.

Exemple d’utilisation : préparer une future catégorie

Une nouvelle catégorie « Vacances d’été » est déjà créée, mais ne contient encore aucune offre publiée. Pendant la préparation, « Afficher les catégories vides » reste désactivé. Dès que les offres sont visibles, la catégorie apparaît automatiquement dans la navigation publique en tuiles.

Vérifiez l’affichage en tuiles dans la catégorie principale réellement intégrée, une sous-catégorie contenant d’autres catégories et un dernier niveau contenant des offres. Un design propre à une sous-catégorie peut y afficher d’autres widgets, champs de formulaire et styles que le design par défaut.

Exemple de démonstration avec les sous-catégories Zurich et Vienne sous forme de tuiles

Exemple du deuxième niveau : après le choix de la langue, les sites sont affichés comme sous-catégories. Un clic supplémentaire mène à la présentation des offres prévue.

Lorsqu’un niveau contient uniquement des offres, une liste, un tableau, un calendrier ou un widget de tuiles d’offres doit afficher les résultats. Le réglage Afficher les catégories vides concerne les tuiles de catégories et ne rend pas réservables des offres masquées ou non réservables.

Vous trouverez une vue d’ensemble de tous les modèles, y compris les nouvelles pages d’abonnement, sous Modèles et catalogue de widgets.

Corriger l’héritage et les pages de destination vides

L’option générale Design pour les sous-catégories se trouve sous Paramètres → Offres → Général. Sans cette autorisation, les sous-catégories peuvent reprendre le design du niveau parent. Après une modification, contrôlez l’attribution effective dans le chemin de catégorie ; une mise en page simplement enregistrée dans le Design Manager ne modifie pas l’arborescence.

Un niveau constitué uniquement de tuiles de catégories nécessite une autre présentation au bout du chemin : ajoutez-y une liste, un tableau ou des tuiles d’offres. Vérifiez le retour et les liens directs vers les niveaux intermédiaires. En cas de résultats vides, contrôlez les catégories sans offres visibles et l’option permettant de les afficher malgré tout.

Guides associés