Integration - Widgets
Damit Sie OnBuSys in einfacher Weise in Ihre Homepage, auf der Sie Ihre Objekte anbieten, integrieren können, werden Ihnen im Folgenden einige sogenannte Widgets zur Verfügung gestellt. Diese Widgets enthalten einige wenige Zeilen Javascript-Code, den Sie an geeigneter Stelle in den Seitenquelltext Ihrer Homepage kopieren müssen. Dabei ist zusätzlich nur erforderlich, dass Sie bei einigen wenigen Parametern die Werte an Ihre speziellen Gegebenheiten anpassen müssen, was ausführlich an den entsprechenden Stellen kommentiert ist.
Dieser Javascript-Code enthält im wesentlichen Funktionen aus der OnBuSys-JS-Bibliothek, die im Untermenüpunkt 'OnBuSys - Bibliothek' ausführlich erläutert wird.
Nachfolgend erhalten Sie einige Varianten, die in der Praxis oft verwendet werden. Über die Links können Sie sich jeweils bei einer Demoseite diese Variante ansehen. Dabei handelt es sich jeweils um eine bewusst einfach gehaltene Seite, auf der lediglich die Funktionalität der Variante dargestellt werden soll.
Jeweils am Ende der Demoseiten befinden sich die Codesequenzen mit Erläuterungen, wie diese in Ihre Seite einzufügen sind. Weiter können Sie mithilfe des Seitenquelltexts erkennen, wo die Codesequenzen eingefügt werden müssen.
Die vollständigen Dateien stehen im Ordner /OBS/widgets/ zu Ihrer Verfügung.
Bei CMS- oder sog. Baukasten-Homepages ist das Spaltenlayout oft so vorgegeben, dass die Breite der Hauptspalte nicht ausreicht, um bestimmte Elemente von OnBuSys aufzunehmen. Für diese Fälle stehen weitere Varianten zur Verfügung.
Variante 1: Buchungsformular direkt beim Objekt
Auf der Demoseite sind zwei Belegungskalender integriert:
- ein 1x1 - Belegungskalender am linken Rand mit Link zum Buchungsformular im separaten Fenster
- ein 1x3 - Belegungskalender am rechten Rand mit Link zum Buchungsformular auf der gleichen Seite
Integration des Buchungssystems OnBuSys in eine CMS-Seite
Bei der Integration der Belegungsübersicht in eine CMS (WordPress, Joomla, Typo3, ...)- oder Baukasten-Homepage kann das Problem auftreten, dass der Belegungskalender wegen seiner Breite nicht in das fest vorgegebenen Spalten-Layout der Seite passt und ein Teil, wie bei diesem Joomla CMS, über den linken Fensterrand hinausragt oder von einer Spalte überdeckt wird:
Für solche Fälle stehen Widgets zur Verfügung, bei denen das OnBuSys-Elemente absolut positioniert und somit an jede beliebige Stelle gesetzt werden kann.
Beim absoluten Positionieren von Elementen ist folgendes zu beachten:
- Absolut positionierte Elemente sind außerhalb des normalen Textflusses, sie liegen über den anderen Elementen und beeinflussen somit nicht Ihr Layout. Die absolute Position wird relativ zu den Rändern des übergeordneten Elements berechnet, wenn dieses ebenfalls positioniert ist, oder wenn es der Seiteninhalt (<body>) ist.
- Ggf. müssen Sie auf Ihrer Seite dort, wo das absolut positionierte Element dargestellt wird, leere Bereiche erzeugen, damit wichtige Bereiche nicht überdeckt und unzugänglich werden.
und wie man durch Einfügen von nur acht Programmzeilen* in den html-Code dieser
das Buchungssystem vollständig in diese Seite integrieren kann:
Auch wenn Sie den Mini-Belegungskalender einer bestimmten Stelle der CMS-Seite platzieren wollen, müssen Sie diesen analog zu den beiden vorangehenden Beispielen absolut positionieren. Weiter wird in diesem Beispiel gezeigt, dass man OnBuSys-Elemente nicht nur über DIV-Containern, sondern über beliebigen HTML-Elementen (im Beispiel ein <P>-Element) platzieren kann.
Im Beispiel wird der Mini-Belegungskalender rechts an einer Stelle ohne Text angezeigt.
Die nachfolgend dargestellten Programmzeilen können zu Testzwecken in eine vorhandene CMS-Seite kopiert werden. Damit wird das Buchungssystem dieser Demoversion in Ihre CMS-Seite integriert. Die 5. Programmzeile muss an Ihre Seite angepasst werden. Dazu benötigen Sie aus Ihrem Seitenlayout die ID
- des DIV-Containers, der die Spalten Ihres Layouts umfasst. Diese ID ist anstelle von wrap zu verwenden,
- des 1. Spalten-DIV-Containers (von links nach rechts). Diese ID ist anstelle von sidebar zu verwenden,
- des 2. Spalten-DIV-Containers. Diese ID ist anstelle von content60 zu verwenden. Verwenden Sie den Leerstring "", wenn es eine 2. Spalte nicht gibt,
- des 3. Spalten-DIV-Containers. Diese ID ist anstelle von sidebar-2 zu verwenden. Verwenden Sie den Leerstring "", wenn es eine 3. Spalte nicht gibt.
<script type="text/javascript" src="//onbusys.de/101/OBS/obs_lib.js"></script>
<script type="text/javascript">
var belbuchkal = new belbuchkal(250,20,556,"background-color:#ffffff;border:0px solid #909090",true);
belbuchkal.erstelle();
addLoadEvent(function(){abs_freeOnTop("191px","wrap","sidebar","content60","sidebar-2");});
var multibel1 = new abs_multibel("onbusys.de/101","Elfer,Wald,Buttje,Berg",4,2,10,800,"left:70px","top:175px","de-DE");
multibel1.erstelle();
</script>
Ggf. sind noch Parameter bzgl. der Lage anzupassen:
Bei belbuchkal(250,20,... kann die Lage des Buchungsformulars geändert werden:
250 ist der Abstand vom linken Rand und 20 der Abstand vom oberen Rand (in px) und
bei abs_multibel(... kann die Lage des Belegungskalenders mit den Werten bei 'left' und 'top' geändert werden.
Wenn beim erstmaligen Öffnen der geänderten Seite die Belegungsübersicht nicht angezeigt wird, sollte ein erneutes Laden der Seite das Problem beheben.
Ausführliche Hinweise finden Sie auf den jeweiligen Seiten der CMS-Simulationen.
