TSMART - TWebshop OnlineBooking

1 1. Experience Detailseite
2 2. Experience WIDGET (nur Suchbox)
3 3. Experience Shop (Gesamtübersicht)
4 3. Experience WIDGET Multi (mehrere Suchboxen auf der gleichen Seite)
5 5. Konfiguration / Parametrisierung
- 5.1 Skript
- 5.2 Farben
- 5.3 HTML - Tag
- 5.4 URL - Parameter

Der TWebshop besteht aus einem Javascript, welche Sie direkt in Ihre Webseite einbinden können. Sprechen Sie zur Einbindung ggf. mit dem technischen Anbieter Ihrer Webseite, falls Sie Unterstützung bei der Einbindung des Skripts benötigen.

Dieser Artikel bietet zudem eine Übersicht, welche Einstellungen im Script direkt getätigt werden können, um Funktion und Erscheinen zu beeinflussen.

1. Experience Detailseite

Dieses Script zeigt die Detailseite der Aktivität / Erlebnis an (Bilder, Beschreibungen, Google Maps etc.).

<!DOCTYPE html>
<html>
    <head>
        <title>Twebshop - Skript</title>
        <meta charset="UTF-8" />
    </head>
    <body>



    <!-- START: Skript für Ihre Webseite   -->
<script>
    window.TWEBSHOP = {
        config: 'sardona_tds',
        id: 'TDS00020013104744480',
        maxServiceCount: 10,
        theme: {
            sticky: {
                offset: 80,
                zIndex: 1
            }
        }
    }
</script>
<style>
#twebshop {
  --tw-button-color: #bc2967;
  --tw-button-text-color: #fff;
  --tw-button-price-color: #2e921d;
  --tw-button-price-text-color: #fff;
  --tw-box-color: #1d6bb1;
  --tw-box-text-color: #fff;
  --tw-booking-color: #c4c4c4;
  --tw-booking-text-color: #333;
}</style>
            <div id=twebshop-experience-shop></div>
        <script src="https://twebshop.tomas-travel.com/app/experience/shop/app.js"></script>
    <!-- ENDE: Skript für Ihre Webseite   -->

    </body>
</html>

Bsp. einer Detailseite:

Das Widget wird verwendet, wenn die Aktivität / Erlebnis bereits detailliert beschrieben ist oder wenn es keine weiteren Erklärungen braucht.

<!DOCTYPE html>
<html>
    <head>
        <title>Twebshop - Skript</title>
        <meta charset="UTF-8" />
    </head>
    <body>

    <!-- START: Skript für Ihre Webseite   -->
<script>
    window.TWEBSHOP = {
        config: 'sardona_tds',
        id: null,
        maxServiceCount: 10,
        theme: {
            sticky: {
                offset: 80,
                zIndex: 1
            }
        }
    }
</script>
<style>
#twebshop {
  --tw-button-color: #bc2967;
  --tw-button-text-color: #fff;
  --tw-button-price-color: #2e921d;
  --tw-button-price-text-color: #fff;
  --tw-box-color: #1d6bb1;
  --tw-box-text-color: #fff;
  --tw-booking-color: #c4c4c4;
  --tw-booking-text-color: #333;
}</style>
<tws-experience-widget data-id="TDS00020013104744480"></tws-experience-widget>
<script src="https://twebshop.tomas-travel.com/app/experience/widget/app.js"></script>
    <!-- ENDE: Skript für Ihre Webseite   -->

    </body>
</html>

Beispielansicht eines Widgets:

3. Experience Shop (Gesamtübersicht)

Sie haben viele Produkte / Aktivitäten und wünschen eine Liste mit den verschiedenen Leistungen. Für diese Konfiguration wenden Sie sich bitte direkt an Ihre Destination / Vertragspartner.

<!DOCTYPE html>
<html>
    <head>
        <title>Twebshop - Skript</title>
        <meta charset="UTF-8" />
    </head>
    <body>


    <!-- START: Skript für Ihre Webseite   -->
<script>
    window.TWEBSHOP = {
        config: 'sardona_tds',
        id: null,
        maxServiceCount: 10,
        theme: {
            sticky: {
                offset: 80,
                zIndex: 1
            }
        }
    }
</script>
<style>
#twebshop {
  --tw-button-color: #bc2967;
  --tw-button-text-color: #fff;
  --tw-button-price-color: #2e921d;
  --tw-button-price-text-color: #fff;
  --tw-box-color: #1d6bb1;
  --tw-box-text-color: #fff;
  --tw-booking-color: #c4c4c4;
  --tw-booking-text-color: #333;
}</style>
            <div id=twebshop-experience-shop></div>
        <script src="https://twebshop.tomas-travel.com/app/experience/shop/app.js"></script>
    <!-- ENDE: Skript für Ihre Webseite   -->

    </body>
</html>

Beispielansicht eines Shops:

Beispielansicht einer Seite mit mehreren Buchungswidgets:

5. Konfiguration / Parametrisierung

Skript

window.TWEBSHOP = {}

config required

Diese besteht aus dem Namen der Konfiguration und der dazugehörigen TOMAS Instanz, getrennt durch einen Unterstrich. z.b. test_oem oder bwc_btm.

Die Konfiguration bzw. den einzutragenden Wert erhalten Sie von uns.

role optional

Hierüber kann eine abweichende Portalrolle auf der Buchung gesetzt werden. Die ID entspricht der ID des touristischen Partners aus TOMAS und hat beispielsweise dieses Format: OEM00020100231179610

Dies ist z.B. für Affiliateportale interessant. Wird dieser Parameter nicht mitgegeben, so gilt der TOMAS-Standard für das Setzen der Portalrolle.

Beispiel:

role : 'OEM00020100231179610'

id optional (bei Shop)

Die ID der Experience / bzw. die ID des touristischen Gruppenobjekts

Bei der Verwendung im Shop wird damit direkt die Detailseite aufgerufen

language optional (de, en, fr, it)

Mit der Einstellung language kann man die Sprache (momentan en oder de) der App definieren. Der Sprachswitcher in der App erscheint nur, wennlanguage nicht vorhanden, null oder '' ist.

features optional (Shop)

Die Mitgabe von Merkmals-IDs erzeugt Ergebnislisten auf die mitgegebene ID.
Beispiel:
features: 'OEM00020100232754857'

Bei mehreren IDs können diese kommagetrennt hinterlegt werden, es erfolgt eine VerUNDung.

emailConfirm optional

Um Eingabefehlern auf Ebene der Mailadressenerfassung entgegenzuwirken, haben wir im Warenkorb des TWebshops/Widgets einen weiteren Parameter geschaffen.

Der Paramater lautet wie folgt:
cart: {
emailConfirm: true
}

Wird dieser Parmater im Skript entsprechend gesetzt, muss der Gast bei Abschluss des Warenkorbes, seine Mailadresse zweifach erfassen.
Standardmäßig ist der Parmater deaktiviert/nicht definiert. Bitte beachten Sie, dass die Nutzung des Parameters ggf. negative Auswirkungen auf Ihre Conversion haben kann.

data-min-persons optional

Ermöglicht die Kontrolle der Mindestanzahl an gebuchten Tickets.

Zb :

<tws-experience-widget data-min-persons="5" data-personcategories="TBX00020010001915084" data-id="OEM00020100241018235"></tws-experience-widget>

maxServiceCount optional

Ermöglicht es Ihnen, die maximale Anzahl der gebuchten Tickets zu kontrollieren.

Zb :

window.TWEBSHOP = {
    config: 'test_oem',
    role: '',
    language: null,
    maxServiceCount: 10,
}

theme.sticky optional

theme.sticky.offset in Pixel angeben

data-fix-date optional

Dieser Parameter legt ein festes Datum für das Widget fest.
Die Datumauswahl wird ausgeblendet.

Zb :

data-fix-date="2023-01-01"

data-categories optional

Über diesen Parameter können Kategorien im Vakanzergebnis ausgeblendet werden. Es erscheinen dann nur die angegebenen Kategorien.

Zb :

data-categories="TDS00020100241191621"

data-personcategories optional (Widget)

Durch die Mitgabe von Personenkategorien (z.B. Erwachsene, Kinder, Familien, usw) können Sie im Widget steuern, dass du nur speziell die gewünschte Personenkategorie(n) im Widget zur Auswahl stehen.

Beispiel der Mitgabe:

<tws-experience-widget data-id="OEM00020100238722450" data-personcategories="TBX00020010001915084" />

Mehrere Personenkategorien können mit , getrennt übergeben werden.

Übersicht der verfügbaren Personenkategorien:

Personenkategorien-ID	Bezeichung der Personenkategorie

Personenkategorien-ID	Bezeichung der Personenkategorie
TBX00020010001915084	Erwachsener
TBX00020010001917184	Kleinkind
TBX00020010001915086	Kind
TBX00020010001915085	Jugendlicher
TBX00020010001915422	Senioren
TBX00020010001915088	Familie
TBX00020010001915091	Student
TBX00020010001915087	Behinderte
TBX00020010001915424	Sonstige Person
TBX00020010001915089	Gruppe

data-begin-date="2023-05-15" optional

data-end-date="2023-05-30"

Mit diesen Parametern, kann unabhängig davon, wie der Belegungskalender gepflegt ist, gesteuert werden, von wann bis wann die Datumsauswahl zur Verfügung steht. Die klickbaren Tage werden dadurch eingeschränkt.

searchDays : 365 optional (Shop Ansicht)

Mit diesen Einstellungen steuern Sie die Anzahl der Tage, die in der Datumsmaske für die Shop-Anzeige gesucht werden. (z.B. 365 Tage: Von [heute] bis [heute+365Tage].

customer optional

Mit dieser Funktion können Kundenadressen übergeben werden (z.B. aus einem Gästekartensystem).

cart: {
customer: {
id: "AFA7DE1E3FD314F222672E72150D24A1", //AVS Hash
type: "avs", // immer "avs"
address: {
personType : "Herr", //Herr (1), Frau (2), Familie (3), Divers (4)
firstname : "Max",
lastname : "Muster",
street : "Rue du midi 3",
zip : "123123",
city : "Luzern",
country : "ch", // 2-digit country code
email : "guido.jungen@tomas.ch",
email_confirm: "guido.jungen@tomas.ch",
language : 'de', // 2-digit language code
phone : "+46 324234 23"
}

Farben

Der Konfigparameter theme.colors wird in ein neues CSS Format gebracht.

Mit dem neuen <style> Attribut kann man die Farbe der Button, Boxen und BookingBox und der enthaltenen Schrift definieren. Farben müssen im HEX Format sein!

Übersicht der Farb-Parameter und deren Auswirkung:

Diese beiden Farb-Parameter haben ausschließlich in der speziellen Destinationskarten-Ansicht (die Ansicht, welche speziell für Städtekarten konzipiert wurde) eine Auswirkung:

HTML - Tag

id required (bei Widget)

<tws-experience-widget data-id="OEM00020100238722450"></tws-experience-widget>

SHOP
<div id="twebshop-experience-shop"></div>

<script src="https://twebshop.tomas-travel.com/app/experience/shop/app.js"></script>

WIDGET
<tws-experience-widget data-id="[ID der Experience]"></tws-experience-widget>

<script src="https://twebshop.tomas-travel.com/app/experience/widget/app.js"></script>

In dieses HTML Element wird die App eingebettet. Das Element kann auf der Seite beliebig platziert werden, sollte aber in der Breite (> 1024 px) genug Platz haben.

URL - Parameter

Anreise und Abreisezeitraum

Im Shop können die Daten als URL-Parameter mitgegeben werden.
?dateFrom=2023-03-10
&dateTo=2023-03-20

https://twebshop.tomas-travel.com/app/experience/shop/index.html#/?dateFrom=2023-03-10&dateTo=2023-03-20

Suchtext
&q=xxxx

https://twebshop.tomas-travel.com/app/experience/shop/index.html#/?dateFrom=2023-03-10&dateTo=2023-03-20&q=Testfahrt

1. Experience Detailseite

2. Experience WIDGET (nur Suchbox)

3. Experience Shop (Gesamtübersicht)

3. Experience WIDGET Multi (mehrere Suchboxen auf der gleichen Seite)

5. Konfiguration / Parametrisierung

Skript

Farben

HTML - Tag

URL - Parameter

3. Experience WIDGET Multi
(mehrere Suchboxen auf der gleichen Seite)