OnBuSys - Widgets PDF Drucken E-Mail

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.
 



Die ersten fünf Varianten sind für solche Homepages vorgesehen, bei denen die Seiten, in die Elemente von OnBuSys (Buchungsformular und verschiedene Arten von Belegungsübersichten) eingefügt werden sollen, entweder nur aus einer Spalte bestehen oder bei denen die Hauptspalte eine ausreichende Breite hat um das entsprechende Element von OnBuSys aufzunehmen.
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, von der linken Spalte verdeckt wird:


Für solche Fälle stehen Widgets zur Verfügung, bei denen das OnBuSys-Elemente absolut positioniert und somit nicht von der linken Spalte teilweise verdeckt wird.


 

 

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 wie hier in der 'sidebar' einer bestimmten 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.
Wenn der Mini-Belegungskalender in der 'sidebar' aller CMS-Seiten angezeigt werden soll, müssen Sie wie bei Variante 2 den Code für den Mini-Belegungskalender dem Quellcode für die 'sidebar' beifügen.



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.
Öffnen Sie nun den Editor zum Bearbeiten Ihrer CMS-Seite, schalten Sie diesen in den HTML- oder Quellcode-Modus und kopieren Sie die folgenden acht Programmzeilen an den Anfang vor den bereits vorhandenen Text. Zu beachten ist noch, dass der Editor so eingestellt ist,dass er nicht automatisch HTML-Zeichen in HTML-Entities umwandelt:

<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.



Aktualisiert am Dienstag, 25. April 2017 18:22