WordPress Demo

Das Einfügen der nachfolgenden acht html-Programmzeilen genügt, um das Online-Buchungssystem der Demo-Version vollständig in eine eigene WP-Seite zu integrieren. Wenn Sie eine andere OnBuSys-Installation verwenden möchten, müssen Sie den Pfad_zum_Ordner_OBS 'onbusys.de/101' anpassen (ggf. mit www.).
Wenn beim erstmaligen Öffnen der geänderten Seite die Belegungsübersicht nicht angezeigt wird, sollte ein erneutes Laden der Seite das Problem beheben.

Bei dieser OnBuSys-WordPress-Demo-Site finden Sie beispielhafte Integrationen der OnBuSys-Elemente mit ausführlichen Erläuterungen und den zugehörigen Quellcodesequenzen.

In analoger Weise können Sie auch bei anderen CMS (Joomla, TYPO3, Drupal, ...) verfahren.

Fügen Sie diese acht Zeilen in Ihre Seite ein:

<script type="text/javascript" src="https://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","main","primary","secondary","");});
var multibel1 = new abs_multibel("onbusys.de/101","Elfer,Wald,Buttje,Berg",4,2,10,800,"left:70px","top:0px","de-DE");
multibel1.erstelle();
</script>

Ggf. müssen die farblich markierten Stellen der 5. Programmzeile 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 main zu verwenden,
   
• des 1. Spalten-DIV-Containers (von links nach rechts). Diese ID ist anstelle von primary zu verwenden,
   
• des 2. Spalten-DIV-Containers. Diese ID ist anstelle von secondary zu verwenden. Verwenden Sie den Leerstring "", wenn es eine 2. Spalte nicht gibt,
   
• des 3. Spalten-DIV-Containers. Diese ID ist anstelle des Leerstrings zu verwenden. Verwenden Sie den Leerstring "", wenn es eine 3. Spalte nicht gibt.

Diese IDs können Sie mithilfe eines Browser-Tools, das die gängigen Browser zur Verfügung stellen, in einfacher Weise ermitteln. Beim Firefox-Browser geht das folgendermaßen:
Klicken Sie mit der rechten Maustaste in den entsprechenden Bereich Ihrer WP-Seite und wählen Sie:
Element untersuchen -> Inspektor.

Öffnen Sie nun den Editor zum Bearbeiten Ihrer WP-Seite, schalten Sie diesen in den HTML- oder Quellcode-Modus und kopieren Sie die ggf. angepassten acht Programmzeilen an den Anfang des evt. bereits vorhandenen Quellcodes. Zu beachten ist dabei, dass der Editor so eingestellt ist,dass er nicht automatisch HTML-Zeichen in HTML-Entities umwandelt.
Bei ungünstiger Lage des Buchungsformulars können Sie diese durch Änderung der farblich markierten Werte in der folgenden Zeile anpassen:

var belbuchkal = new belbuchkal(250,20,556,"background-color:#ffffff;border:0px solid #909090",true);
250: Abstand vom linken Rand in px
20:   Korrekturwert bzgl. des Abstandes vom oberen Rand (auch negative Werte möglich)

Diese Ausführungen gelten in entsprechender Weise für andere CMS-Homepages (Joomla, Typo3, ...) und Baukasten Homepages.