Im head-Teil der Homepage muss das Samera-Script geladen werden:

<script src="https://hotel.samera.at/rest/v1/script"></script>

Am Ende der Seite muss Samera initialisiert werden. Dazu wird bspw. folgender Code verwendet:

<script>
    Samera.initialize({
        'hotel': '12345678',
        'language': 'de'
    });
</script>

Parameter

Folgende Parameter können definiert werden:

hotel

Hier wird der die ID des Hotels definiert. Diese erhalten Sie von uns.

language

Mit dem Parameter language kann die aktuelle Besuchersprache an Samera übermittelt werden. Texte werden dann, wenn definiert, in dieser Sprache ausgegeben. Sprachen müssen im Backend aktiviert werden. Es wird der ISO 639-1 Code verwendet (z.B. de, en, ...).

map

Es gibt die Möglichkeit, in den Samera-Templates interne Samera-IDs auf URLs zu mappen. Diese können als JavaScript-Map angegeben werden.

Beispiel

Samera.initialize({
    'hotel': '12345678',
    'map': {
        '21': 'http://www.samera.at/beispielseite1',
        '34': 'http://www.samera.at/beispielseite2',
        '54': 'http://www.samera.at/beispielseite3'
    }
});

Im Samera-Template kann die url-Funktion aufgerufen werden, um aus IDs wieder URLs zu machen:

<script type="samera">
    {@load resource="roomcategories"}
        {#roomCategories}
            Zimmer: {name}
        {/roomCategories}
    {/load}
</script>

on

Es kann auf bestimmte Ereignisse, die von Samera ausgelöst wurden, reagiert werden. Ein Anwendungsfall ist die Integration von Trackingcode (z.B. Google Analytics), die Weiterleitung des Besuchers beim Anfrage/Buchungsprozess auf Erfolgs- bzw. Fehlerseiten und die Fehlerbehandlung bei Formulareingaben.

Dazu wird der Parameter on verwendet. Der Datentyp davon ist auch eine JavaScript-Map. Als Key wird der Name des Ereignisses verwendet (s. Tabelle unten), der Wert kann entweder ein String oder eine Function sein. Strings müssen eine gültige URL sein, auf diese wird der Benutzer weitergeleitet, sobald das damit verknüpfte Ereignis eingetreten ist. Wird stattdessen eine Function angegeben, so wird diese bei Eintreten des Ereignisses ausgeführt. Als Argument wird eine JavaScript-Map übergeben, die Detailinformationen über das Ereignis enthält.

Beispiel

Samera.initialize({
    'hotel': '12345678',
    'on': {
        'Cart.ItemAdded': 'http://www.samera.at/warenkorb.html',
        'Inquiry.Created': 'http://www.samera.at/anfrage-erfolg.html',
        'Inquiry.Error': sameraFormValidationHandler
    }
});

Die Funktion sameraFormValidationHandler kann wie folgt definiert werden:

function sameraFormValidationHandler(data) {
    var e = data.errors;
    var ge = $('#globalErrorsContainer');
    $('.has-error').removeClass('has-error');
    ge.empty().show();
    for (i = 0; i < e.length; i++) {
        var label = $('label[for=' + e[i].field +']').html();
        if (e[i].error == 'required') {
            ge.append($('<li/>').html(label +' ist ein Pflichtfeld'));
        }
        if (e[i].error == 'min') {
            ge.append($('<li/>').html(label +' ist zu kurz'));
        }
        if (e[i].error == 'max') {
            ge.append($('<li/>').html(label +' ist zu lang'));
        }
        if (e[i].error == 'wrong_email_format') {
            ge.append($('<li/>').html('Ungültiges E-Mail Format'));
        }
        if (e[i].error == 'wrong_country') {
            ge.append($('<li/>').html('Ungültiges Land'));
        }
        $('[name=' + e[i].field + ']').parents('.form-group').addClass('has-error');
    }
}

Das HTML dazu:

<ul id="globalErrorsContainer"></ul>

Ereignisse

Samera.initialize({
    'hotel': '123456',
    'on': {
        'Booking.Prepared': '/buchung-pruefen.html'
    }
});

Samera.initialize({
    'hotel': '123456',
    'on': {
        'Voucher.PreviewCreated': function(response) {
            $("#preview").attr('src', response.data.url).show();
        }
    }
});

render

Mit dem Parameter render können Functions definiert werden, die dann automatisch aufgerufen werden, wenn ein Samera-Template gerendert wurde. Das erste Argument ist eine JavaScript-Map, die die Attribute id und renderCount enthält.

Beispiel

HTML

<script type="samera" id="myTemplate">

    Ein beliebiges Template mit der id "myTemplate".

</script>

Samera-Template

Samera.initialize({

    'hotel': '12345678',

    'render': {

        'myTemplate': function(e) {

            alert('Template ' + e.id + ' wurde zum ' + e.renderCount + '. mal gerendert');

        }

    }

});

overlay

Das Overlay kann mit dem Parameter overlay für die Hotelwebseite angepasst werden.

Beispiel

Zur Zeit kann nur die Hauptfarbe angepasst werden:

Samera.initialize({

    'hotel': '12345678',

    'overlay': {

        colors: {

            main: '83197F'

        }

    }

});

keyword

Die Ausgabe von Keywords kann speziell gesteuert werden, um bspw. ein Popover darzustellen. Der Wert des Parameters keyword muss eine Function sein. Diese erhält als Argument eine JavaScript-Map mit den Attributen name, description, url. Die Rückgabe dieser Funktion ist HTML, das anstelle des Keywords ausgegeben wird.

Beispiel

 Samera.initialize({

    'hotel': '12345678',

    'keyword': function(kw) {

        return '<a href="' + kw.url + '" class="keyword">' + kw.name + '<span>' + kw.description + '</span></a>';

    }

});

source

Dieser Parameter kann befüllt werden um die Quelle eines Besuchers (z. B. Newsletter) zu setzen. Der Wert ist eine beliebige Zeichenkette mit max. 256 Zeichen. Es reicht den Parameter nur beim ersten Aufruf zu setzen, er wird in der Session des Besuchers gespeichert. Dieser Wert wird bei Buchungen/Anfrage gespeichert und ist im samera-Backoffice sowie im Buchungsmail an das Hotel ersichtlich.