Comment ajouter le widget de réservation Schedito à Joomla
Schedito peut être ajouté à Joomla sans extension de réservation dédiée. Chargez une seule fois la feuille de style et le JavaScript Schedito partagés via la couche de ressources frontend du site, puis placez le DIV du widget propre au calendrier à l’endroit où les clients doivent pouvoir réserver.
Pour l’emplacement de réservation lui-même, le module Personnalisé natif de Joomla offre une solution pratique et accessible depuis l’administration. Les ressources frontend partagées doivent normalement être gérées séparément par le template actif ou par le Web Asset Manager de Joomla.
Avant de ouvrir Joomla
Un calendrier Schedito configuré
Configurez les services, les ressources et les disponibilités que les clients pourront réserver avant de publier le widget.
Accès à l’administration Joomla
Vous devez être autorisé à créer un module de site et avoir accès au template du site ou à la configuration des ressources frontend pour les fichiers Schedito partagés.
Les trois éléments Schedito
Ouvrez le code du widget dans Schedito et gardez à portée de main le lien CSS, le script JavaScript et le DIV du widget propre au calendrier.
1. Gardez les trois éléments d’intégration séparés
Le tableau de bord Schedito fournit trois éléments de code frontend :
Lien CSS — fournit les styles du widget de réservation.
Script JavaScript — initialise et fait fonctionner les widgets Schedito.
DIV du widget — identifie l’organisation et le calendrier public de réservation et définit l’endroit où le calendrier doit apparaître.
Dans Joomla, les deux premiers éléments doivent être gérés au niveau des ressources du site ou du template. Le DIV propre au calendrier se place à l’emplacement frontend où les clients doivent voir l’interface de réservation.
Lien CSS — une seule fois
JavaScript — une seule fois
DIV du widget propre au calendrier
2. Chargez Schedito CSS et JavaScript une seule fois
Tous les templates Joomla n’exposent pas la même interface de code personnalisé ; il n’existe donc pas un chemin unique dans le menu d’administration valable pour tous les sites Joomla.
Si votre template actif ou son framework propose des champs pour du code personnalisé dans l’en-tête, le CSS ou le JavaScript, utilisez ces réglages au niveau du site et ajoutez le lien CSS ainsi que le script JavaScript actuellement fournis par Schedito.
Pour une intégration développeur native de Joomla, utilisez le Web Asset Manager depuis un template enfant ou une petite extension du site afin d’enregistrer et d’activer la feuille de style et le script Schedito.
Quelle que soit la méthode utilisée par votre site, chargez les ressources partagées une seule fois. N’en placez pas une nouvelle copie dans chaque module de réservation.
Choisissez la méthode adaptée à votre site
Le template prend en charge le code personnalisé
Utilisez ses réglages de niveau site pour l’en-tête / JavaScript.
Site Joomla sur mesure ou maintenu par un professionnel
Enregistrez les ressources via le Web Asset Manager de Joomla.
À éviter
Modifier les fichiers du cœur de Joomla ou copier le CSS et le JavaScript dans chaque module de réservation.
Pour les développeurs : utilisez le Web Asset Manager
Les versions modernes de Joomla proposent le Web Asset Manager précisément pour enregistrer et charger le CSS et le JavaScript de manière gérée. Il peut prendre en charge l’enregistrement des ressources, les dépendances, les attributs et leur rendu dans le document.
Un développeur peut enregistrer l’URL de la feuille de style et celle du script fournies par le tableau de bord Schedito via le template enfant du site ou une petite extension, puis les activer sur les pages frontend nécessaires.
Cette approche est préférable à la modification des fichiers du cœur de Joomla. Si votre site utilise un framework de template commercial disposant de sa propre interface de code personnalisé prise en charge, ce mécanisme peut être utilisé à la place.
3. Ajoutez le calendrier via un Module Personnalisé Joomla
Ouvrez Système → Modules du site, créez un nouveau module et sélectionnez Personnalisé comme type de module.
Depuis le tableau de bord Schedito, copiez uniquement le DIV du widget propre au calendrier et placez-le dans le contenu du module.
Le DIV contient des valeurs telles que data-organization-id et data-calendar-public-id. Utilisez les valeurs exactes générées pour le calendrier que vous souhaitez afficher.
Donnez au module un titre interne explicite, masquez son titre visible si nécessaire, puis choisissez la position du template où la réservation doit apparaître.
4. Choisissez la position du module et les pages
Les modules Joomla sont affichés dans les positions fournies par le template actif du site. Choisissez une position qui place l’interface de réservation à l’endroit approprié dans votre mise en page.
Utilisez les réglages Affectation aux menus du module pour décider où il doit apparaître. Selon la structure de votre site Joomla, vous pouvez l’afficher sur toutes les pages, uniquement pour certains éléments de menu ou sur une page de réservation dédiée.
Si la position est trop étroite pour une interface de réservation, utilisez une autre position du template ou adaptez la mise en page plutôt que de forcer le calendrier dans un conteneur de largeur comparable à une barre latérale.
Exemple
DIV du calendrier Schedito
Contenu principal / position adaptée en pleine largeur
Page Réserver maintenant
Assurez-vous que l’éditeur Joomla préserve le balisage du widget
Le module Personnalisé de Joomla utilise l’éditeur de contenu configuré. Selon ses réglages, celui-ci peut modifier ou supprimer certaines parties du balisage personnalisé lors de l’enregistrement du module.
Après l’enregistrement, rouvrez la vue HTML/source du module et vérifiez que les attributs Schedito class et data-* sont toujours présents.
Si l’éditeur modifie le balisage, utilisez son mode code source ou un flux de travail approprié sans éditeur lors de l’insertion du widget. Ne recollez pas indéfiniment un balisage modifié sans vérifier ce que Joomla a réellement enregistré.
Utiliser plusieurs calendriers Schedito dans Joomla
Gardez la feuille de style et le JavaScript Schedito partagés chargés une seule fois via la couche de ressources du site ou du template.
Créez un module Personnalisé distinct pour chaque calendrier ou emplacement de réservation, en utilisant dans chaque module le DIV propre au bon calendrier.
Les positions de modules et l’affectation aux menus de Joomla vous permettent ensuite de décider quel calendrier apparaît sur quelles pages, sans dupliquer les ressources frontend partagées.
Chargés une seule fois
JavaScript Schedito
Modules séparés
Module B → DIV du calendrier B
Module C → DIV du calendrier C
5. Publiez et tester l’ensemble du parcours de réservation
Ne vérifiez pas seulement la position du module : contrôlez aussi le chargement des ressources, les disponibilités et une véritable réservation depuis le frontend Joomla.
Ouvrir la page publique
Testez le frontend Joomla réel et vérifiez que la feuille de style, le JavaScript et le module de calendrier forment ensemble une interface de réservation fonctionnelle.
Effectuer une réservation
Sélectionnez un service, une date et une heure, puis effectuez une véritable réservation de test. Vérifiez ensuite la réservation créée dans Schedito.
Vérifier la mise en page responsive
Vérifiez la position du module sur ordinateur et sur mobile et assurez-vous que le template Joomla actif offre au widget une largeur utilisable suffisante.
Widget de réservation Joomla dépannage
Vérifiez séparément les trois éléments de l’intégration. Assurez-vous que la feuille de style et le JavaScript Schedito partagés sont chargés sur la page publique et que le module contient toujours le bon DIV de calendrier.
Vérifiez ensuite les outils de développement du navigateur afin de repérer des ressources ou requêtes API en échec et d’éventuelles erreurs JavaScript.
L’éditeur configuré peut nettoyer ou réécrire le balisage. Ouvrez le module en mode code source et comparez le HTML enregistré avec le DIV fourni par Schedito.
Si nécessaire, utilisez un flux de travail approprié sans éditeur lors de l’insertion du balisage.
Vérifiez que le module est publié, qu’il utilise une position valide du template actif et qu’il est affecté au bon élément de menu.
Vérifiez également le niveau d’accès et l’affectation de langue si le site Joomla utilise du contenu multilingue ou restreint.
L’intégration Joomla fonctionne probablement. Vérifiez plutôt Schedito : service, ressources nécessaires, disponibilités récurrentes, exceptions propres à certaines dates, réservations existantes, capacité et calendriers externes connectés.
Vérifiez le template actif, son framework et les éventuels modules ou extensions personnalisés utilisés pour le code frontend. Conservez une seule intégration au niveau du site et supprimez les inclusions de ressources en double.
Vérifiez la position du module et la mise en page du template qui l’entoure. Les positions de barre latérale, les modules à largeur fixe, les colonnes de grille, les marges internes et les règles de débordement peuvent limiter le widget même si Schedito est lui-même responsif.
Laissez Joomla gérer le contenu et Schedito gérer les réservations
Une fois l’intégration opérationnelle, continuez à gérer dans Schedito les services, les ressources, les disponibilités, la capacité, la synchronisation des calendriers et le style du widget.
Commencer gratuitementPrésentation de la réservation sur Joomla
Voir tous les guides Schedito · Personnalisation du widget · Synchronisation Google Calendar