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:

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:

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.

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

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

Par exemple :

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

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

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