TSMART- TWebshop Online Booking

1 1. Expérience PAGE de détails
2 2. Experience WIDGET (seulement masque de réservation)
3 3. Experience Shop
4 4. Experience WIDGET Multi (plusieurs masques de réservation sur la même page)
5 5. Paramètres de configuration
- 5.1 Script
- 5.2 Couleurs
- 5.3 HTML - Tag
  - 5.3.1 URL - Paramètre

Le TWebshop fonctionne avec un Javascript, que vous devez intégrer directement dans votre site web. Si vous avez besoin d’aide pour l’intégration du script - adressez-vous au prestataire technique / webmaster de votre site web.

Cet article donne également un aperçu des divers fonctionnalités qui peuvent être configurées directement dans le script pour influencer le fonctionnement ou l'apparence de votre TWebshop.

1. Expérience PAGE de détails

Ce script affiche les détails de votre produit (images, descriptifs, 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>

Exemple d’un shop:

2. Experience WIDGET (seulement masque de réservation)

Vous utilisez le widget si votre produit est déjà bien explique sur votre site.

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

Exemple d’une intégration du widget:

3. Experience Shop

Vous avez beaucoup de produits et vous cherchez une liste avec les divers prestations. Pour cette configuration veuillez svp contacter votre destination.

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

Exemple d’une intégration d’un shop:

4. Experience WIDGET Multi
(plusieurs masques de réservation sur la même page)

Beispielansicht einer Seite mit mehreren Buchungswidgets:

5. Paramètres de configuration

Script

window.TWEBSHOP = {}

config obligatoire

Nom de la configuration.

Vous obtenez le nom de la config de votre destination / respectivement le nom se trouve dans les scripts que vous pouvez télécharger.

id optionnel pour le Shop par contre obligatoire pour la page de détail

ID de l’activité (id configuration groupe)

language optionnel (de, en, fr et it)

Le paramètre de langue vous permet de définir la langue (actuellement en de-fr-en-it). Le sélecteur de langue dans l'application n'apparaît que si la langue n'est pas disponible dans le script.

features optionnel (Shop)

Des recherches avec des critères génèrent des listes de résultats que avec des produits qui ont ce critère (Exemple : 'OEM00020100232754857 Activité hivernale).

emailConfirm optionnel

Afin d'ébiter les erreurs de saisie au niveau de la saisie des adresses e-mail, nous avons créé un paramètre supplémentaire dans le panier du TWebshop/Widget.

Paramètre :
cart: {
emailConfirm: true
}

Si ce paramètre est défini dans le script, le client doit saisir deux fois son adresse e-mail lors de la clôture du panier.
Par défaut, le paramètre est désactivé/non défini. Veuillez noter que l'utilisation de ce paramètre peut, le cas échéant, avoir des conséquences négatives sur votre conversion.

hideTax optionnel (Widget)

Permet de masquer la TVA

(Attention, le paramètre “theme” doit être terminé par “,” pour rajouter le paramètre “cart”)

data-min-persons optionnel

Permet de contrôler le nombre minimum de billets réservés.

Par exemple :

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

maxServiceCount optionnel

Grâce à ce paramètre, il est possible de limiter globalement le nombre maximum de prestations/tickets.

Par exemple :

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

data-max-service-count="X" optionel

Comme pour le paramètre de script global "maxServiceCount", il est possible de limiter le nombre maximum de prestations/tickets par widget.

Les deux paramètres peuvent être utilisés indépendamment l'un de l'autre.
Le paramètre du widget (data-max-service-count) remplace le paramètre du script (maxServiceCount).
Cela signifie que sur une page, on peut par exemple fixer une valeur maximale de 20 pour tous les widgets intégrés et autoriser ensuite individuellement plus ou moins par widgets.

Par exemple :

<tws-experience-widget data-max-service-count="2" data-id="XXXXXXXXXXXXXXXXXXXX"></tws-experience-

theme.sticky optionnel

theme.sticky.offset mettre en pixel

data-fix-date optionel

Ce paramètre définit une date fixe pour le widget.
Le choix de la date est masqué.

P.ex :

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

data-end-date="x" optionel

Ce paramètre permet de limiter le contingent sélectionnable pour le client dans le widget.
Dans le calendrier, il n'est plus possible de choisir des contingents que pour les "X" prochains jours.

Par exemple :

data-end-date="7"

data-begin-date="x" optionel

Ce paramètre permet de limiter le contingent sélectionnable pour le client dans le widget.
Dans le calendrier, seuls les contingents qui se situent au moins "X" jours dans le futur peuvent être sélectionnés.

Par exemple :

data-begin-date="2"

data-categories optionnel

Ce paramètre permet de masquer les catégories dans le résultat. Seules les catégories indiquées apparaissent alors.

P.ex :

data-categories="TDS00020100241191621"

data-personcategories optionel (Widget)

En indiquant des catégories de personnes (p. ex. adultes, enfants, familles, etc.), vous pouvez contrôler dans le widget que seules les catégories de personnes souhaitées sont disponibles dans le widget.

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

Plusieurs catégories de personnes peuvent être transmises séparément avec une virgule (sans espace)

data-person-category-sort optionel (Widget)

Permet de trier l’ordre d’affichage des variantes de prix

<tws-experience-widget data-id="TDS00020014888744333" data-person-category-sort="sortname"></tws-experience-widget>

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

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

Ces paramètres permettent de contrôler de quelle date à quelle date la sélection de dates est disponible, indépendamment de la manière dont le calendrier d'occupation est géré. Les jours cliquables sont ainsi limités.

searchDays : 365 optionnel (affichage shop)

Ces paramètres permettent de contrôler le nombre de jour recherché dans le masque de date pour l’affichage shop. (P.ex 365 jours : Du [aujourd’hui] au [aujourd’hui+365jours]

customer optional

Cette fonction permet de transmettre des adresses de clients (par ex. à partir d'un système de cartes d'hôtes).

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"
}

(Attention, le paramètre “theme” doit être terminé par “,” pour rajouter le paramètre “cart”)

Couleurs

Avec l'attribut <style>, vous pouvez définir la couleur des boutons, des boîtes ainsi que la police. Les couleurs doivent être au format HEX !

Aperçu des paramètres de couleur et de leur effet :

Ces deux paramètres de couleur n'ont d'effet que pour une paramétrisation spéciale pour des cartes de destination :

HTML - Tag

id obligatoire (pour 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>

L'application est intégrée dans cet élément HTML. L'élément peut être placé n'importe où sur une page web, mais doit disposer d’une largeur égale ou plus de 1024 px.

URL - Paramètre

Période d’arrivée et départ

Dans le shop les dates d’arrivées et départ peuvent être intégré dans le lien.
?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

Terme de recherche
&q=xxxx

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

TSMART- TWebshop Online Booking

1. Expérience PAGE de détails

2. Experience WIDGET (seulement masque de réservation)

3. Experience Shop

4. Experience WIDGET Multi (plusieurs masques de réservation sur la même page)

5. Paramètres de configuration

Script

Couleurs

HTML - Tag

URL - Paramètre

4. Experience WIDGET Multi
(plusieurs masques de réservation sur la même page)