Modèle : vue d’ensemble des offres

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

Le modèle Vue d’ensemble des offres détermine la présentation des catégories et offres dans le processus public de réservation. Il peut contenir une liste simple, un tableau de cours, un calendrier, des tuiles, des filtres ou une combinaison de ces éléments.

Modifiez ce modèle dans l’éditeur du Design Manager. Les widgets de filtre doivent toujours être combinés à un widget affichant réellement les offres filtrées, par exemple une liste d’offres, un tableau, un calendrier ou des tuiles.

Vue d’ensemble des offres dans le Design Manager

Les widgets habituels de ce modèle sont la légende des statuts, la recherche, le filtre de tags, le filtre d’offres, les tuiles de catégories, les listes de catégories, la liste d’offres, le tableau d’offres, le calendrier, les tuiles d’offres, la description, le bloc de texte, le bouton de vente de bons et la vue cartographique.

Choix des widgets de la vue d’ensemble des offres avec repères A à H — La colonne de gauche sélectionne le modèle, le centre contient la mise en page et les widgets correspondants se trouvent à droite. Les repères A–H identifient la recherche et les vues de catégories.
A
Explication des symboles de statut
B
Recherche d’offres
C
Filtres de tags préparés
D
Formulaire de recherche avec plusieurs filtres d’offres
E
Tuiles de catégories avec images
F
Images de catégories sur toute la largeur
G
Catégories en liste
H
Catégories sur plusieurs colonnes

Légende des statuts : explique les couleurs ou états des offres, par exemple disponible, bientôt complet ou liste d’attente.
Recherche : permet une recherche en texte libre parmi les offres visibles.
Filtre de tags : filtre les offres selon des tags préparés.
Filtre d’offres : regroupe plusieurs types de filtres dans un widget.
Catégories et offres : affichent la structure et les contenus concrets réservables.
Widgets de texte et complémentaires : ajoutent des indications, une description, la vente de bons ou une carte.

Légende des statuts et statut de l’offre

La légende des statuts explique aux visiteurs la signification des bandeaux colorés ou des indications de statut. Elle est particulièrement utile si vous utilisez des listes d’attente, offres complètes, listes de demandes ou cours démarrant bientôt.

Harmonisez la légende avec les statuts réels des offres. Si des bandeaux de statut sont affichés dans les listes ou tableaux, leur texte et leur couleur devraient correspondre au langage de votre public. Évitez les termes internes inconnus des participants.

Dans l’aperçu, un statut n’apparaît normalement que si au moins une offre visible l’utilise réellement. Testez donc non seulement les offres disponibles, mais aussi les offres complètes, les listes d’attente, les listes de demandes et les offres internes si ces états existent dans votre programme.

Le champ de recherche recherche les noms d’offres et aide particulièrement avec de grandes listes. Il ne remplace pas une structure de catégories claire, mais peut être utile comme recherche directe rapide au-dessus des listes, tableaux ou tuiles.

Recherche, filtre de tags et filtre d’offres

La recherche convient aux programmes étendus comportant de nombreux cours. Les visiteurs peuvent rechercher des termes du titre de l’offre, de sa description ou des informations visibles. Placez la recherche au-dessus de la liste ou du tableau des offres.

Le filtre de tags affiche des tags prédéfinis comme filtres sélectionnables. Tous les tags utilisés pour filtrer doivent être renseignés au préalable dans edoobox et ajoutés dans les paramètres du widget. Pour en savoir plus, consultez Attribuer des tags à une offre et Utiliser le widget de filtre de tags.

Le filtre d’offres est la variante flexible. Selon la configuration, le prix, la date, le responsable, le lieu de la session, la catégorie, le tag, le statut ou un champ de recherche peuvent être proposés. Utilisez uniquement des filtres compréhensibles pour votre public. Un trop grand nombre de filtres complique inutilement une petite vue d’ensemble de cours.

Pour les filtres de prix, de responsable, de lieu, de statut, de catégorie et de tags, il est possible selon le widget de ne laisser sélectionnables que les valeurs du résultat actuellement filtré. Cela évite les listes de résultats vides, mais doit être activé délibérément pour chaque filtre et testé avec des offres réalistes.

Pour le filtre de tags, ajoutez dans le widget tous les tags devant apparaître comme filtres. Si un filtre de tags en contient plusieurs, la vue filtre selon les tags qu’il contient. Pour les tags avec valeurs, vérifiez s’il vaut mieux utiliser les valeurs comme colonne de tableau propre ou comme filtre.

Planifier les options de filtre

Choisissez Filtre de tags pour de simples liens thématiques préparés. Pour un formulaire de recherche avec prix, date, responsable, lieu, statut, recherche, catégorie et jusqu’à dix groupes de tags, utilisez Filtre d’offres. Le widget propose une sélection triable des filtres actifs, des valeurs automatiques ou manuelles, des libellés multilingues de groupes et de valeurs, des icônes et l’option Relier les groupes de filtres par ET.

La procédure complète et les exemples figurent dans Configurer les filtres d’offres. Ajoutez au moins un affichage d’offres sur la même page. Filtrer modifie l’ensemble visible, sans changer les droits de réservation ni la capacité.

Afficher les catégories

Les catégories aident à structurer les programmes par thèmes. Plusieurs présentations sont disponibles dans la vue d’ensemble des offres :

Tuiles de catégories : présentent visuellement les catégories. Les catégories vides peuvent être masquées. Le bouton Afficher peut rester visible ou être retiré pour alléger la présentation.
Liste de catégories avec grandes images : utilise de larges images de catégories comme des bandeaux et convient aux pages d’accueil visuelles.
Liste des catégories : affiche les catégories les unes sous les autres et peut, selon le paramètre, rester toujours ouverte ou apparaître comme liste déroulante.
Liste des catégories en colonnes : répartit les catégories sur plusieurs colonnes. Le titre, les colonnes, les lignes et le fond peuvent être adaptés.

Lorsqu’un visiteur clique sur une catégorie, un widget d’offres devrait de nouveau être présent au niveau suivant. Vérifiez donc non seulement la vue initiale, mais aussi celle affichée après un clic sur une sous-catégorie.

Afficher les offres sous forme de liste ou de tableau

La liste d’offres est adaptative et convient aux cours nécessitant des explications. Selon le paramètre, elle peut afficher l’image, la date, le lieu, les places disponibles, le responsable, les leçons, le prix, le bandeau de statut, le bouton Détails et le bouton d’inscription.

Autres widgets de la vue d’ensemble des offres avec repères I à O — Plusieurs présentations des offres sont disponibles pour le même modèle. I–L montrent les variantes ; M–O ajoutent descriptions, indications et accès à la vente de bons.
I
Répertorier les offres les unes sous les autres
J
Afficher les offres sous forme de tableau
K
Afficher les offres dans le calendrier
L
Afficher les offres en tuiles
M
Afficher la description enregistrée
N
Ajouter du texte et des images libres
O
Ouvrir la vente de bons

Selon la configuration, la liste peut afficher les participants inscrits à la place d’une image d’offre. Utilisez cette présentation uniquement si elle est souhaitée sur le fond et compatible avec la protection des données, le public visé et l’effet public recherché.

Si plusieurs prix existent, une fourchette de prix ou un prix standard peut être affiché. Le bouton d’inscription peut être renommé ; un texte propre peut apparaître pour la liste d’attente. Le bouton Détails mène au modèle de détail d’offre.

Le tableau d’offres convient aux comparaisons compactes. Vous pouvez choisir des colonnes telles que nom de l’offre, statut, date, prix, lieu ou places disponibles. Les tags avec valeurs peuvent apparaître comme colonnes supplémentaires. La description peut rester visible sous forme abrégée, généralement jusqu’à environ 250 caractères, ou s’ouvrir par un clic.

Dans les tableaux, les mois peuvent apparaître comme sous-titres, les noms d’offres peuvent être liés et les boutons affichés ou masqués. Vérifiez l’affichage adaptatif sous 800 pixels de largeur pour que le tableau reste utilisable sur smartphone.

Afficher chronologiquement les offres de plusieurs catégories

Le tri des offres et la navigation par catégories sont distincts. Pour une seule séquence de dates, vous avez besoin d’une liste ou d’un tableau d’offres commun au niveau englobant toutes les catégories souhaitées. Plusieurs catégories ou listes intégrées séparément ne produisent pas un tri commun.

Sous Offres : paramètres généraux, choisissez le tri par date de début.
Dans le design réellement utilisé, ouvrez Body → Vue d’ensemble des offres et placez un tableau d’offres ou une liste d’offres.
Créez le point d’accès avec Aperçu-Partage au niveau du compte ou de la catégorie parente commune. Un accès à une sous-catégorie précise continue de n’afficher que son périmètre.
Au besoin, retirez les tuiles ou la liste de catégories de ce modèle. Cela réduit la navigation ; ce n’est pas une option de tri supplémentaire.
Affichez la date de début dans le tableau. Choisissez les sous-titres mensuels uniquement s’ils conviennent à la présentation souhaitée.
Comparez au moins trois offres de catégories différentes ayant des dates de début intercalées. Vérifiez le même ordre après un filtre de tags ou d’offres et sur le site web intégré.

Exemple : un séminaire de la catégorie A commence avant un atelier de B, puis vient un autre cours de A. Le tableau commun doit afficher A, B, A selon la date. Si tout le périmètre A apparaît en premier, vérifiez le tri global et si le site web assemble plusieurs vues de catégories séparées.

La colonne du prochain rendez-vous peut trier le tableau selon cette date. Pour un ordre par début d’offre, utilisez la date de début appropriée et vérifiez séparément les offres continues. Un terme de recherche peut influer sur l’ordre des résultats ; effectuez aussi la contre-vérification sans texte recherché.

Masquer les prix sans modifier le prix de l’offre

La visibilité dans le widget ne change aucune catégorie de prix ni aucun montant à payer. Dans le tableau d’offres, retirez les colonnes de prix indésirables du choix des colonnes. Cela s’applique à toutes les lignes de ce tableau. Dans le widget Liste d’offres, « Remplacer la fourchette de prix par le prix standard » signifie simplement une autre présentation du prix ; un prix nul ne disparaît pas automatiquement pour autant.

Ces paramètres de widget ne prévoient pas d’option générale « masquer uniquement les prix gratuits ». Pour un espace distinct sans indication de prix, vous pouvez utiliser une vue de catégorie propre avec un tableau sans colonne de prix et l’indication « Participation gratuite ». Vérifiez aussi les lignes de prix de la page de détail. Dans un tableau commun d’offres gratuites et payantes, les colonnes choisies s’appliquent à toutes les offres.

Boutons, liens et comportement des cadres

Dans les listes et tableaux, les boutons tels que S’inscrire maintenant, Détails ou Réserver maintenant peuvent être affichés ou masqués et parfois renommés. Si une offre est en liste d’attente, un texte de bouton propre peut être pertinent.

Vous pouvez aussi déterminer si les clics mènent d’abord au détail de l’offre ou directement à l’inscription. Pour les cours nécessitant des explications, le passage par les détails est souvent préférable ; pour des dates simples, l’inscription directe peut être plus rapide.

Dans les intégrations iFrame, les liens peuvent être ouverts dans un cadre supérieur. La personne voit alors la vue standard d’edoobox au lieu de continuer à naviguer dans l’iFrame actuel. Testez ce comportement sur votre site web avant de l’utiliser en production.

Pour les longs tableaux, un regroupement par mois de session peut être utile. Le nom de l’offre peut être lié pour permettre aux utilisateurs d’accéder directement à la page de détail en cliquant dessus.

Rediriger certaines offres vers une inscription externe

Si l’inscription à une offre doit avoir lieu sur un autre site web, enregistrez sur l’offre concernée un tag avec valeur : nom du tag redirect, valeur par exemple https://example.org/anmeldung/workshop. Le nom et la valeur sont deux informations séparées. Utilisez une URL complète valide et attribuez le tag uniquement aux offres dont l’inscription doit être externe.

La redirection intervient au démarrage d’une nouvelle inscription. Un lien Détails ouvre d’abord la page de détail edoobox. L’option du tableau « Tous les liens mènent au détail de l’offre » modifie cette première étape ; elle ne constitue pas un champ de saisie d’une adresse de destination externe. Le bouton d’inscription de la page de détail utilise ensuite le même démarrage d’inscription.

Ouvrez une offre de démonstration publiée et disponible dont le début des inscriptions est atteint, et ajoutez le tag de redirection.
Cliquez sur l’action d’inscription de la liste, du tableau ou de la tuile réellement intégré.
Ouvrez aussi la page de détail et son bouton d’inscription.
Répétez les deux parcours dans une vue d’ensemble filtrée par tags. Un filtre de tags sélectionne les offres ; il ne modifie pas la valeur de redirection enregistrée.
Vérifiez sur votre propre site et sur mobile que la destination externe s’ouvre dans le contexte de navigateur ou de cadre souhaité. Contrôlez aussi un cours normal sans redirection.

L’inscription sur le site de destination n’est pas créée pour autant comme réservation edoobox finalisée. Clarifiez la reprise ultérieure des données dans votre intégration. Retirez l’attribution de redirection si cette offre doit de nouveau utiliser le parcours normal d’inscription edoobox.

Calendrier et tuiles d’offres

Le calendrier affiche les offres ou dates dans une vue temporelle. Les jours de week-end peuvent être masqués, les places disponibles visibles et la plage horaire affichée limitée. Si les dates commencent toujours à la même heure, une heure de début peut être définie pour le défilement automatique.

La grille horaire peut être réglée finement ou grossièrement. Selon les besoins, choisissez les vues disponibles parmi mois, semaine, jour ou liste et définissez une vue par défaut. Les détails de la logique des dates figurent dans Calendrier et dates.

Les offres en tuiles conviennent aux vues d’ensemble modernes avec images et textes courts. La largeur des tuiles peut être définie séparément pour la vue normale et la tablette. Un extrait de description peut être affiché et les participants peuvent accéder directement à l’inscription depuis la tuile.

Description et bloc de texte

Le widget Description affiche la description de la catégorie ou de l’offre actuelle. Il est utile lorsque plusieurs offres nécessitent le même texte d’introduction : renseignez la description dans la catégorie et affichez-la dans la vue d’ensemble ou sur la page de détail.

Le bloc de texte est destiné aux contenus fixes, par exemple des indications sur le public cible, la date limite d’inscription, le contact, l’accessibilité ou le déroulement. Renseignez les blocs de texte dans toutes les langues actives. Vous pouvez aussi déterminer si un bloc est toujours visible ou seulement dans la vue iFrame.

Vente de bons et vue cartographique

Le bouton de vente de bons mène à la page de vente de bons. Son texte et sa couleur peuvent être adaptés. Vous définissez vous-même les valeurs de bons disponibles ; la devise suit normalement celle du compte, mais peut être adaptée selon le paramètre.

Pour l’application, choisissez si le bon réduit le prix de l’offre ou s’applique au total complet de réservation. C’est important si les bons ne doivent pas concerner les prestations complémentaires. Définissez à l’avance les valeurs proposées ; ce widget ne prévoit pas de montant libre saisi par la personne qui réserve. Vous déterminez aussi la valeur de bon présélectionnée par défaut à l’ouverture de la page de vente. D’autres détails figurent dans Bons vendus / bon cadeau.

La vue cartographique ou carte à repères convient lorsque les lieux sont pertinents pour choisir une offre. Vérifiez les lieux des sessions, les adresses et si les offres sans lieu doivent être présentées de manière appropriée ou délibérément masquées.

Pour la carte à repères, votre compte nécessite sa propre clé API Google Maps. Pour un design cartographique personnalisé, un identifiant Maps de Google Cloud peut être ajouté. Vérifiez le niveau de zoom, le type de carte, le comportement des repères et le texte du bouton En savoir plus dans l’aperçu avant d’intégrer la carte sur votre site web.

Pour les offres liées à un lieu, une vue cartographique peut être utile. Elle nécessite des lieux de session renseignés avec des adresses et positions valides. Avant la publication, vérifiez que les repères, la liste et la page de détail fonctionnent ensemble de manière cohérente.

Si vous utilisez Google Maps ou des fonctions cartographiques similaires, tenez compte de la protection des données, des règles de cookies et de consentement et des éventuels prestataires externes. Pour des offres purement internes ou très ciblées, une simple liste est souvent plus rapide et plus claire.

Structures conseillées

Petit programme de cours : description, recherche, liste d’offres.
Grand programme thématique : tuiles de catégories, filtre d’offres, tableau d’offres.
Événements axés sur les dates : recherche, calendrier et liste d’offres en complément.
Page visuelle d’académie : tuiles de catégories, tuiles d’offres, bloc de texte avec contact.
Bons cadeaux : bloc de texte, bouton de vente de bons, liste des cours les plus populaires.

Exemple d’utilisation : vue d’ensemble d’un programme de cours

Une école propose des cours de langues dans plusieurs catégories. Un bloc de texte avec une courte indication figure en haut, suivi de tuiles de catégories. À l’intérieur d’une catégorie apparaissent le filtre d’offres, le filtre de tags et le tableau d’offres. Le tableau affiche la date, le lieu, les places disponibles et le prix, tandis que le bouton Détails mène à la description complète du cours.

Interaction avec les prix, la liste d’attente et les prestations complémentaires

La vue d’ensemble des offres donne souvent la première impression du prix, des places disponibles et de la possibilité de réserver. Si une offre possède plusieurs catégories de prix, les paramètres du widget déterminent si une fourchette de prix ou un prix standard est visible.

Pour une liste d’attente ou des listes de demandes, le texte du bouton, le bandeau de statut et la description devraient être cohérents. Sinon, une offre semble réservable alors qu’une demande ou une inscription en liste d’attente est d’abord créée.

Si des prestations ou questions complémentaires sont importantes, mentionnez-les non seulement dans le formulaire, mais au besoin aussi dans la description, un bloc de texte ou les détails de l’offre. Les participants comprennent ainsi tôt quelles informations ou quels frais supplémentaires suivront.

Tester le modèle

Vérifiez la vue initiale, une sous-catégorie et une offre individuelle.
Testez la recherche, le filtre de tags et le filtre d’offres avec des données réalistes.
Contrôlez les catégories vides, les offres complètes et la liste d’attente.
Vérifiez sur ordinateur, tablette et smartphone.
Testez séparément l’intégration comme iFrame ou shortcode WordPress.

Testez la vue d’ensemble avec plusieurs statuts d’offre, des offres complètes, une liste d’attente, des tags et des catégories. Vous verrez alors seulement si le champ de recherche, les filtres, la légende des statuts, la carte, la liste d’offres et les boutons aident les participants à prendre les bonnes décisions.

Exemple d’utilisation : filtrer simultanément le lieu et le niveau

Une école de langues utilise des tags pour le lieu et le niveau. Dans le widget Filtre d’offres, elle crée deux groupes de tags distincts et active « Relier les groupes de filtres par ET ». Avec « Zürich » et « B2 » sélectionnés, la liste d’offres placée à côté doit afficher uniquement les cours répondant aux deux critères. La vérification porte aussi sur un résultat vide et l’utilisation mobile sans débordement horizontal. La configuration est décrite dans Configurer les filtres d’offres.

Proposer un accès distinct aux abonnements

Si le plugin d’abonnement est actif, le catalogue d’abonnements peut apparaître directement dans la vue d’ensemble des offres. Le modèle propre aux abonnements propose aussi une vue d’ensemble et une liste comme variantes d’affichage. Le catalogue affiche les formules publiées achetables ; les widgets d’offres normaux restent destinés aux cours, séminaires et événements.

Placez le catalogue après un bref texte explicatif si l’utilité de l’abonnement concerne de nombreuses offres. Pour un grand assortiment, un accès distinct aux abonnements via la navigation peut être plus clair. La configuration et le parcours d’achat sont décrits dans Concevoir les abonnements et l’espace client.

Le filtre d’offres propose plusieurs groupes de filtres et options d’affichage. Utilisez uniquement les groupes nécessaires et contrôlez la recherche, le filtre de tags et le filtre d’offres avec la liste d’offres précise. Un filtre ou un catalogue d’abonnements affiché ne constitue pas à lui seul une réservation de cours.