Die Integration

SME Modul und die Tools für Ihre Webseite

Booking Monitor Dokumentation » SME Modul und die Tools für Ihre Webseite

In diesem Abschnitt wird die Vorgehensweise bei der Einbindung der SME-Module in die eigene Website beschrieben. Um diesen Abschnitt zu verstehen, sollten Sie über die wichtigsten Grundkenntnisse in HTML, CSS und JS verfügen. Es wird davon ausgegangen, dass Sie eine Webseite haben, die mit Zeichenset UTF-8 kodiert ist.

Im Ordner pages des Buchungssystems finden Sie mehrere Seiten, die die Integration auf eine praktische Weise zeigen. Die Bezeichnungen der Seiten in diesem Ordner wurden so gewählt, dass deren Funktion selbsterklärend ist.

Einbindung der Dateien und Initialisierung

Für die Integration jeder beliebigen Funktion in die Webseite ist es notwendig, zunächst einige CSS- und JS-Dateien anzubinden, sowie dem Skript zuzuweisen, in welchem Ordner sich das Buchungssystem befindet. Dafür empfiehlt es sich einen globalen Pfad mit dem vorangestellten Schrägstrich anzugeben. Im weiteren Verlauf der Dokumentation wird dieser Pfad /booking-monitor genannt. Die Codebeispiele wurden in den genannten Dateien mit den Kommentaren hervorgehoben.

<!-- integration -->
    <link type="text/css" href="/booking-monitor/css/booking-monitor.css" rel="stylesheet" />
    <script type="text/javascript" src="/booking-monitor/js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="/booking-monitor/js/booking-monitor.js"></script>
    <script type="text/javascript">
        bm.init({
            path: '/booking-monitor/'
        });
    </script>
<!-- / integration -->

Dieser Quellcode befindet zwischen den <head> und </head> Tags der Webseite und soll entsprechend an der Stelle eingefügt werden. Mit diesem Code werden eine CSS-Datei und zwei JS-Dateien eingebunden. Im Weiteren wird dem Skript mitgeteilt, in welchem Ordner sich das Buchungssystem befindet.

Wenn dieser Schritt erledigt ist, werden die Div-Elemente in den gewünschten Stellen platziert und zwar dort, wo der Inhalt angezeigt werden soll. Es ist dabei wichtig zu beachten, dass die Div-Elemente richtige ID-Attribute haben, denn diese sind für das Laden von korrekten Inhalten verantwortlich.

Nachfolgend sind alle Beispiele aufgelistet. Beachten Sie, dass alle Div-Elemente durch ein Div-Element mit ID „bm“ umschlossen sind. Der Inhalt der Endelemente Wird geladen... kann durch beliebigen Text ersetzt werden. Dieser Text wird angezeigt, solange die Inhalte sich noch im Ladezustand befinden.

Der nachfolgende Quellcode muss zwischen den <body> und </body> Tags eingefügt werden. Eine einzige Ausnahme bildet ein CSS-Beispiel für das Buchungsformular. Dieser Code muss zwischen den Tags <head> und </head> eingebunden werden und zwar nach dem Code, der für Einbindung der CSS- und JS-Dateien verantwortlich ist.

Einfaches Suchformular

Das nachfolgende Codebeispiel zeigt, wie man ein einfaches Suchformular in die eigene Seite integrieren kann. Das Formular wird in das Div-Element mit ID z-search-simple geladen und dort angezeigt. Die Suchergebnisse werden in dem z-search-results Element angezeigt. Beide Elemente müssen von dem übergeordneten Div-Element mit ID bm umschlossen sein.

<!-- integration -->
    <div id="bm">
        <div id="z-search-simple" class="ui-widget" style="float: left; width: 350px">Wird geladen...</div>
        <div id="z-search-results" class="ui-widget" style="width: 800px; padding-left: 10px; float: left; display: none; ">
            <img src="/booking-monitor/images/ajax-loader.gif" /> Suche wird ausgeführt...
        </div>
        <div style="clear: left"></div>
    </div>
<!-- / integration -->

Erweitertes Suchformular

Folgender Codebeispiel zeigt, wie man ein erweitertes Suchformular in eigene Seite einbindet. Das Formular wird in dem Div-Element mit ID z-search-advanced angezeigt. Die Suchergebnisse werden in das z-search-results Element geladen. Beide Elemente müssen von dem übergeordneten Div-Element mit ID bm umschlossen sein.

<!-- integration -->
    <div id="bm">
        <div id="z-search-advanced" class="ui-widget" style="float: left; width: 350px">Wird geladen...</div>
        <div id="z-search-results" class="ui-widget" style="width: 800px; padding-left: 10px; float: left; display: none; ">
            <img src="/booking-monitor/images/ajax-loader.gif" /> Suche wird ausgeführt...
        </div>
        <div style="clear: left"></div>
    </div>
<!-- / integration -->

Das Buchungsformular

Dieses Beispiel zeigt, wie man das Buchungsformular in die eigene Webseite einbinden kann. Der erste Codeblock muss zwischen den <head> und </head> Tags eingebunden werden und zwar nachdem die Dateien eingebunden wurden. Der zweite Codeblock soll an der Stelle in der Seite eingefügt werden, wo das Buchungsformular angezeigt werden soll. Wichtig sind dabei die IDs der Div-Elemente z-booking-form und z-offer-details. Im ersten wird das Buchungsformular angezeigt, im zweiten die Angebotsdetails.

<!-- integration -->
<!-- CSS Beispiel im Head-Tag -->
<script type="text/javascript">
    jQuery().ajaxStop(function() {
        jQuery(':input[type!=submit]')
            .addClass('ui-widget-content')
            .addClass('ui-corner-all');
    });
</script>
<!-- / CSS Beispiel im Head-Tag -->
<!-- / integration -->

<!-- integration -->
    <div id="bm">
        <div id="z-booking-form" class="ui-widget ui-corner-all" style="float: left; width: 500px; border: solid 1px #ccc; padding: 10px 15px; margin-right: 10px">Wird geladen...</div>
        <!-- Platz für Angebotsdaten (optional) -->
        <div id="z-offer-details" class="ui-widget ui-corner-all" style="display: none; float: left; width: 280px; border: solid 1px #ccc; padding: 0 15px;">
            <h2>Angebotsdaten</h2>
            <div id="offer-data" style="display: none; margin-bottom: 10px;">{* Container für Angebotsdaten *}</div>
            <div id="offer-addp" style="display: none; margin-bottom: 10px;">{* Container für Zusatzkosten *}</div>
        </div>
        <!-- / Platz für Angebotsdaten (optional) -->
        <div style="clear: left"></div>
    </div>
<!-- / integration -->

Seite mit der Buchungsbestätigung

Sobald der Mieter alle buchungsrelevanten Daten korrekt angegeben hat und das Buchungsformular absendet, wird ihm eine Seite angezeigt, wo er seine Daten noch mal prüfen soll. Nach der Prüfung der Daten wird er die Daten absenden können. Dieses Codebeispiel zeigt, wie man diese Bestätigungsseite in eigene Webseite integrieren kann. Die Bestätigung wird dabei in dem Div-Element mit der ID z-booking-confirm geladen;

<!-- integration -->
    <div id="bm">
        <div id="z-booking-confirm" class="ui-widget ui-corner-all">Wird geladen...</div>
    </div>
<!-- / integration -->

Buchung erledigt

Sobald der Mieter die Buchung komplett abgeschlossen hat, wird ihm eine Bestätigungsseite angezeigt, auf der er darauf hingewiesen wird, dass seine Buchung erfolgreich abgesendet wurde. So eine Seite können Sie mit dem folgenden Code in Ihre Webseite integrieren. Ausschlaggebend ist hier die ID z-booking-ready.

<!-- integration -->
    <div id="bm">
        <div id="z-booking-ready" class="ui-widget ui-corner-all">Wird geladen...</div>
    </div>
<!-- / integration -->

Druckbare Version

Während der Mieter die Bestätigungsseite betrachtet und ebenfalls nachdem er die Buchung abgesendet hat, bekommt er die Möglichkeit die Seite mit den Buchungsdaten auszudrucken. So eine Seite können Sie mit dem folgenden Code integrieren. Die Daten werden dabei in das Div-Element mit der ID z-booking-printable geladen.

<!-- integration -->
    <div id="bm">
        <div id="z-booking-printable" class="ui-widget ui-corner-all">Wird geladen...</div>
    </div>
<!-- / integration -->