So fügen Sie das Schedito-Buchungswidget zu Joomla hinzu
Schedito kann ohne eigene Buchungserweiterung zu Joomla hinzugefügt werden. Laden Sie das gemeinsame Schedito-Stylesheet und JavaScript einmal über die Frontend-Asset-Schicht der Website und platzieren Sie anschließend das kalenderspezifische Widget-DIV dort, wo Kunden buchen sollen.
Für die Buchungsposition selbst bietet das Joomla-Core-Custom-Modul eine praktische, administratorfreundliche Lösung. Die gemeinsamen Frontend-Ressourcen sollten normalerweise separat vom aktiven Template oder Joomlas Web Asset Manager verwaltet werden.
Bevor Sie Joomla öffnen
Ein konfigurierter Schedito-Kalender
Konfigurieren Sie die Leistungen, Ressourcen und Verfügbarkeiten, die Kunden buchen können sollen, bevor Sie das Widget veröffentlichen.
Joomla-Administratorzugriff
Sie benötigen die Berechtigung, ein Website-Modul zu erstellen, sowie Zugriff auf die Template- oder Frontend-Asset-Konfiguration der Website für die gemeinsamen Schedito-Dateien.
Die drei Schedito-Elemente
Öffnen Sie den Widget-Code in Schedito und halten Sie CSS-Link, JavaScript-Skript und kalenderspezifisches Widget-DIV zum Kopieren bereit.
1. Halten Sie die drei Integrationselemente getrennt
Das Schedito-Dashboard stellt drei Teile Frontend-Code bereit:
CSS-Link — liefert die Styles des Buchungswidgets.
JavaScript-Skript — initialisiert und betreibt Schedito-Widgets.
Widget-DIV — identifiziert Organisation und öffentlichen Buchungskalender und legt fest, wo der Kalender erscheinen soll.
In Joomla gehören die ersten beiden auf Website- oder Template-Asset-Ebene. Das kalenderspezifische DIV gehört an die Frontend-Position, an der Kunden die Buchungsoberfläche sehen sollen.
CSS-Link — einmal
JavaScript — einmal
Kalenderspezifisches Widget-DIV
2. Laden Sie Schedito-CSS und JavaScript einmal
Joomla-Templates bieten nicht alle dieselbe Custom-Code-Oberfläche, daher gibt es keinen einzigen Administrator-Menüpfad, der für jede Joomla-Website gilt.
Wenn Ihr aktives Template oder Template-Framework Felder für benutzerdefinierten Head-, CSS- oder JavaScript-Code bereitstellt, verwenden Sie diese Einstellungen auf Website-Ebene und fügen Sie den aktuellen CSS-Link und das JavaScript-Skript aus Schedito hinzu.
Für eine Joomla-native Entwickler-Integration verwenden Sie Joomlas Web Asset Manager aus einem Child-Template oder einer kleinen Website-Erweiterung, um das Schedito-Stylesheet und -Skript zu registrieren und zu aktivieren.
Unabhängig von der verwendeten Methode laden Sie die gemeinsamen Ressourcen einmal. Fügen Sie nicht in jedes Buchungsmodul eine weitere Kopie ein.
Wählen Sie den Weg, der zu Ihrer Website passt
Template unterstützt Custom Code
Verwenden Sie seine websiteweiten Head-/JavaScript-Einstellungen.
Individuelle oder professionell gepflegte Joomla-Website
Registrieren Sie die Ressourcen über Joomla Web Asset Manager.
Vermeiden
Joomla-Core-Dateien zu bearbeiten oder CSS und JavaScript in jedes Buchungsmodul zu kopieren.
Für Entwickler: Joomlas Web Asset Manager verwenden
Modernes Joomla stellt den Web Asset Manager speziell dafür bereit, CSS und JavaScript kontrolliert zu registrieren und zu laden. Er kann Asset-Registrierung, Abhängigkeiten, Attribute und Rendering über das Dokument verwalten.
Ein Entwickler kann die Stylesheet-URL und Skript-URL aus dem aktuellen Schedito-Dashboard über das Child-Template der Website oder eine kleine Erweiterung registrieren und auf den benötigten Frontend-Seiten aktivieren.
Das ist Änderungen an Joomla-Core-Dateien vorzuziehen. Wenn Ihre Website ein kommerzielles Template-Framework mit eigener unterstützter Custom-Code-Oberfläche verwendet, kann stattdessen dieser Mechanismus genutzt werden.
3. Fügen Sie den Kalender über ein Joomla-Custom-Modul hinzu
Öffnen Sie System → Website-Module, erstellen Sie ein neues Modul und wählen Sie den Modultyp Custom.
Kopieren Sie aus dem Schedito-Dashboard nur das kalenderspezifische Widget-DIV und setzen Sie es in den Modulinhalt.
Das DIV enthält Werte wie data-organization-id und data-calendar-public-id. Verwenden Sie genau die Werte, die für den Kalender generiert wurden, den Sie anzeigen möchten.
Geben Sie dem Modul einen sinnvollen internen Titel, blenden Sie den sichtbaren Titel gegebenenfalls aus und wählen Sie anschließend die Template-Position, an der die Buchung erscheinen soll.
4. Wählen Sie Modulposition und Seiten
Joomla-Module werden über Positionen gerendert, die vom aktiven Website-Template bereitgestellt werden. Wählen Sie eine Position, die die Buchungsoberfläche dort platziert, wo sie in Ihr Layout gehört.
Verwenden Sie die Einstellungen Menüzuweisung des Moduls, um festzulegen, wo es erscheinen soll. Je nach Joomla-Struktur können Sie es auf allen Seiten, nur auf ausgewählten Menüpunkten oder auf einer eigenen Buchungsseite anzeigen.
Wenn die Position für eine Buchungsoberfläche zu schmal ist, verwenden Sie eine andere Template-Position oder passen Sie das Seitenlayout an, statt den Kalender in einen sidebar-breiten Container zu zwingen.
Beispiel
Schedito-Kalender-DIV
Hauptinhalt / geeignete Vollbreitenposition
Seite „Jetzt buchen“
Stellen Sie sicher, dass der Joomla-Editor das Widget-Markup erhält
Das Joomla-Custom-Modul verwendet den konfigurierten Inhaltseditor. Abhängig von dessen Einstellungen kann ein Editor Teile von benutzerdefiniertem Markup verändern oder entfernen, wenn das Modul gespeichert wird.
Öffnen Sie nach dem Speichern erneut die HTML-/Quellcodeansicht des Moduls und prüfen Sie, ob die Schedito-Attribute class und data-* noch vorhanden sind.
Wenn der Editor das Markup verändert, verwenden Sie beim Einfügen des Widgets seinen Quellcode-Modus oder einen geeigneten No-Editor-Workflow. Fügen Sie verändertes Markup nicht wiederholt ein, ohne zu prüfen, was Joomla gespeichert hat.
Mehrere Schedito-Kalender in Joomla verwenden
Lassen Sie das gemeinsame Schedito-Stylesheet und JavaScript einmal über die Website- oder Template-Asset-Schicht laden.
Erstellen Sie für jeden Kalender oder jede Buchungsposition ein separates Custom-Modul und verwenden Sie in jedem Modul das korrekte kalenderspezifische DIV.
Über Joomlas Modulpositionen und Menüzuweisung entscheiden Sie anschließend, welcher Kalender auf welchen Seiten erscheint, ohne die gemeinsamen Frontend-Ressourcen zu duplizieren.
Einmal gemeinsam
Schedito-JavaScript
Separate Module
Modul B → Kalender-DIV B
Modul C → Kalender-DIV C
5. Veröffentlichen und den vollständigen Buchungsablauf testen
Prüfen Sie mehr als nur die Modulposition: Kontrollieren Sie das Laden der Ressourcen, die Verfügbarkeit und eine tatsächliche Buchung über das Joomla-Frontend.
Öffentliche Seite öffnen
Testen Sie das tatsächliche Joomla-Frontend und prüfen Sie, ob Stylesheet, JavaScript und Kalendermodul zusammen eine funktionierende Buchungsoberfläche ergeben.
Eine Buchung abschließen
Wählen Sie eine Leistung, ein Datum und eine Uhrzeit und schließen Sie eine echte Testbuchung ab. Prüfen Sie die daraus entstandene Buchung in Schedito.
Responsives Layout prüfen
Prüfen Sie die Modulposition auf Desktop und Mobilgeräten und stellen Sie sicher, dass das aktive Joomla-Template dem Widget genügend nutzbare Breite gibt.
Fehlerbehebung beim Joomla-Buchungswidget
Prüfen Sie alle drei Integrationsteile unabhängig voneinander. Stellen Sie sicher, dass das gemeinsame Schedito-Stylesheet und JavaScript auf der öffentlichen Seite geladen werden und das Modul weiterhin das korrekte Kalender-DIV enthält.
Prüfen Sie anschließend die Browser-Entwicklerwerkzeuge auf fehlgeschlagene Asset- oder API-Anfragen und JavaScript-Fehler.
Der konfigurierte Editor bereinigt oder schreibt das Markup möglicherweise um. Öffnen Sie das Modul im Quellcode-Modus und vergleichen Sie das gespeicherte HTML mit dem von Schedito bereitgestellten DIV.
Verwenden Sie bei Bedarf beim Einfügen des Markups einen geeigneten No-Editor-Workflow.
Prüfen Sie, ob das Modul veröffentlicht ist, eine gültige Position des aktiven Templates verwendet und dem richtigen Menüpunkt zugewiesen ist.
Prüfen Sie außerdem Zugriffsebene und Sprachzuweisung, wenn die Joomla-Website mehrsprachige oder eingeschränkte Inhalte verwendet.
Die Joomla-Integration funktioniert wahrscheinlich. Prüfen Sie stattdessen Schedito: Leistung, erforderliche Ressourcen, wiederkehrende Verfügbarkeit, datumsspezifische Ausnahmen, bestehende Buchungen, Kapazität und verbundene externe Kalender.
Prüfen Sie das aktive Template, das Template-Framework und mögliche Custom-Module oder Erweiterungen, die für Frontend-Code verwendet werden. Behalten Sie eine websiteweite Integration und entfernen Sie doppelte Asset-Einbindungen.
Prüfen Sie die Modulposition und das umgebende Template-Layout. Sidebar-Positionen, Module mit fester Breite, Grid-Spalten, Padding und Overflow-Regeln können das Widget einschränken, auch wenn Schedito selbst responsiv ist.
Joomla auf Inhalte konzentrieren und Schedito auf Buchungen
Sobald die Integration funktioniert, verwalten Sie Leistungen, Ressourcen, Verfügbarkeit, Kapazität, Kalendersynchronisierung und Widget-Styling weiterhin in Schedito.
Kostenlos startenJoomla-Buchungsübersicht
Alle Schedito-Leitfäden durchsuchen · Widget-Anpassung · Google-Kalender-Synchronisierung