Widget Catalogue

Une grille d’activités pleine largeur, une ou plusieurs boutiques.

Balise<hivebook-catalog>DimensionsPleine largeur du conteneur · grille à une colonne sur mobile

Dans cette page

Attributs Multi-sites Exemple complet Parcours client Séjours Conseils de réglage

Le catalogue répond à une question simple : « qu’est-ce qui est disponible, et quand ? ». Il affiche une carte par activité avec ses créneaux restants pour la date choisie, et sait agréger plusieurs boutiques Hivebook dans une même vue. Un clic sur un créneau ouvre le parcours de réservation.

1. Attributs

Attribut	Statut	Défaut	Rôle
`api_key`	Requis	—	Une clé, ou plusieurs au format multi-sites décrit ci-dessous.
`lang`	Optionnel	`fr`	Langue d’affichage : `fr` ou `en`.
`data-theme`	Optionnel	—	Thème par défaut, surchargeable par site.
`widget_title`	Optionnel	—	Titre principal de l’en-tête.
`widget_subtitle`	Optionnel	—	Sous-titre affiché sous le titre.
`product_cat`	Optionnel	—	Restreint la grille à une catégorie de produits.
`product_sort`	Optionnel	—	Tri des cartes : `name`, `store` ou `slot`. Vide = ordre du catalogue.
`column`	Optionnel	`2`	Nombre de colonnes de la grille sur ordinateur.
`max_days_ahead`	Optionnel	`365`	Horizon maximal, en jours, proposé par le sélecteur de date. Une valeur non numérique ou négative retombe à 60.
`show_header`	Optionnel	`true`	`false` masque l’en-tête, titre et sous-titre compris.
`show_empty_products`	Optionnel	`true`	`false` masque les activités sans créneau à la date choisie.
`store_filter`	Optionnel	`false`	`true` affiche un sélecteur de Boutique. Sans effet avec une seule Boutique.
`useOrderPopup`	Optionnel	`false`	`true` ouvre le parcours de commande dans une modale par-dessus la grille. Alias accepté : `use-order-popup`.

Les trois tris

Valeur	Tri appliqué	Quand l’utiliser
vide	Ordre défini dans le catalogue de la Boutique.	Vous maîtrisez déjà l’ordre d’affichage des produits.
`name`	Titre, par ordre alphabétique.	Catalogue long, consulté comme une liste.
`store`	Nom de la boutique, puis titre.	Multi-sites : les activités d’un même site restent groupées.
`slot`	Nombre de créneaux disponibles, du plus ouvert au plus rempli.	Vitrine commerciale : ce qui reste réservable remonte en premier.

2. Mode multi-sites

L’attribut api_key accepte plusieurs entrées séparées par des virgules. Chaque entrée peut porter un libellé et un thème propres, séparés par des barres verticales.

HTML — formats acceptés

<!-- Une seule boutique -->
api_key="CLE_SITE_A"

<!-- Plusieurs boutiques : libellé | clé -->
api_key="Canoë Kayak|CLE_SITE_A,Accrobranche|CLE_SITE_B"

<!-- Plusieurs boutiques avec un thème par site -->
api_key="Canoë Kayak|CLE_SITE_A|light-cyan,Accrobranche|CLE_SITE_B|light-yellow"

Format de l’entrée	Interprétation
`clé`	Boutique sans libellé : le nom est déduit du domaine de la boutique.
`libellé\|clé`	Libellé affiché dans le filtre et sur les cartes, avec le thème par défaut du widget.
`libellé\|clé\|thème`	Libellé et thème propres à cette boutique.

Attention aux espaces. Les entrées sont séparées par des virgules sans espace superflu autour des barres verticales. Un libellé peut contenir des espaces et des accents (« Canoë Kayak »), mais une clé tronquée ou entourée d’espaces fera disparaître la boutique concernée de la grille, sans message d’erreur.

Filtre de boutique. Avec store_filter="true", un sélecteur permet au visiteur de n’afficher qu’un site. Combinez-le avec product_sort="store" pour que la grille reste lisible même sans filtrage.

3. Exemple complet

HTML

<script src="https://cdn.hivebook.fr/widget/v3/loader.js" defer></script>

<hivebook-catalog
  lang="fr"
  api_key="Canoë Kayak|CLE_SITE_A|light-cyan,Accrobranche|CLE_SITE_B|light-yellow"
  data-theme="light-cyan"
  widget_title="Réservation"
  widget_subtitle="Nos activités disponibles"
  product_cat=""
  product_sort="store"
  column="3"
  max_days_ahead="150"
  show_header="true"
  show_empty_products="false"
  store_filter="true"
  useOrderPopup="true">
</hivebook-catalog>

4. Le parcours client

Choisir une date. Une barre de navigation propose les jours à venir ; le sélecteur ouvre un calendrier limité par max_days_ahead.
Parcourir la grille. Chaque carte présente l’image, le titre, la description et la boutique d’origine en mode multi-sites.
Lire les créneaux. La carte liste les créneaux disponibles pour la date choisie ; un créneau saturé affiche Complet.
Réserver. Un clic sur un créneau ouvre le parcours de réservation — dans la page, ou en modale avec useOrderPopup="true".
Vérifier le récapitulatif. Un bandeau Votre réservation rappelle l’activité, la date et le créneau retenus.

Message affiché	Signification
« Aucune activité disponible pour cette date »	Aucun créneau sur la date choisie. Avec `show_empty_products="true"`, les cartes restent visibles mais sans créneau.
« Aucune activité trouvée avec les filtres choisis »	Le filtre de boutique ou la catégorie exclut tout le catalogue.
« Aucun créneau n’est disponible pour cette date »	Message porté par une carte produit précise.
« En savoir plus »	Ouvre la description complète de l’activité.

Afficher ou masquer les activités sans créneau ? show_empty_products="true" montre toute l’offre, ce qui rassure le visiteur sur l’étendue du catalogue mais peut donner une impression de fermeture générale en basse saison. false donne une page qui ne montre que du réservable — plus efficace commercialement, mais le visiteur ne découvre pas le reste de l’offre.

5. Séjours et hébergements

Lorsqu’au moins une activité du catalogue est configurée en séjour multi-jours, la barre de date devient une recherche par période.

Élément	Comportement
Choisir des dates	Deux champs, Date d’arrivée et Date de départ, puis un bouton Rechercher.
Aide à la saisie	Le widget guide le visiteur : sélectionner une arrivée, puis une date de départ postérieure.
Avant recherche	Message « Sélectionnez les dates d’arrivée et de départ pour afficher les disponibilités ».
Cartes multi-produits	Une carte peut regrouper plusieurs logements d’un même site, chacun avec sa disponibilité sur la période.
Résultat	Seules les activités disponibles sur l’intégralité de la période sont réservables.

Catalogue mixte. Un catalogue qui mélange activités à la journée et séjours impose la recherche par période à l’ensemble de la page. Si les deux offres sont importantes, préférez deux pages — donc deux widgets catalogue, filtrés par product_cat.

6. Conseils de réglage

Situation	Réglage conseillé
Page d’accueil, bandeau « aujourd’hui »	`column="3"`, `show_empty_products="false"`, `product_sort="slot"`, `max_days_ahead="30"`.
Page « Toutes nos activités »	`column="2"`, `show_empty_products="true"`, `product_sort="name"`.
Portail de plusieurs bases	Clés multiples, `store_filter="true"`, `product_sort="store"`, un thème par site.
Catalogue intégré dans une page déjà titrée	`show_header="false"` pour éviter un double titre.
Site dont la navigation ne doit pas être quittée	`useOrderPopup="true"` : la commande s’ouvre en modale.

Le nombre de colonnes reste lisible à la largeur réelle de votre conteneur.
L’horizon max_days_ahead est cohérent avec la fenêtre de réservation des produits.
En multi-sites, chaque boutique apparaît bien avec son libellé et son thème.
Un clic sur un créneau aboutit à une réservation réelle, visible dans le Manager de la bonne boutique.