Composants Web

Composants Webest une norme qui vous permet d’intégrer des fonctionnalités Javascript complètes à votre site web sans aucune connaissance en programmation. Grâce à cette technologie innovante, vous pouvez intégrer l’inventaire de voyage Wink en toute simplicité. Cet article vous présente notre collection de composants web et vous explique comment les utiliser.

Intégrer Wink

Il y a trois éléments que vous devez inclure dans n’importe quelle page sur laquelle vous souhaitez afficher l’un de nos composants Web.

Inclure notre feuille de style.
Incluez notre Javascript.
Incluez notre chargeur d’application.

Feuille de style

Incluez nos styles CSS dans l’en-tête de votre document.

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
</html>

Javascript

Incluez notre Javascript au bas de votre document.Nous recommandons immédiatement au-dessus de la balise de fin du corps).

<html>
  <body>
    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>
  </body>
</html>

Votre site est maintenant prêt et capable d’afficher nos composants Web.

Composants

Découvrez ci-dessous notre bibliothèque de composants.

Chargeur d’applications

Le chargeur est responsable du maintien de l’état et de la gestion de l’interaction entre nos composants.Incluez-le ci-dessous notre Javascript).

<html>
  <body>
    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

Chargeur de contenu

Le chargeur de contenu est au cœur de notre bibliothèque de composants Web. Il est responsable de l’affichage de votre inventaire (cartes, grilles, plans).

Attributs disponibles :

mise en page
identifiant
trier

L’attributsortn’est disponible que lorsque la mise en page estRANKEDet que vous ne souhaitez pas utiliser une grille de classement existante. Dans ce cas, laissezid vide.

Types de mise en page disponibles :

AD_BANNER
MAP
HOTEL
GUEST_ROOM
MEETING_ROOM
SPA
RESTAURANT
ACTIVITY
ATTRACTION
PLACE
ADD_ON
LIST
SEARCH
RANKED

Types de tri disponibles :

MEMBER
PRICE_LOW_TO_HIGH
PRICE_HIGH_TO_LOW
PRICE
POPULARITY
ECO
EXPERIENCE
PERK
LOYALTY
PACKAGE

<html>
  <body>
    <wink-content-loader
       layout="GUEST_ROOM"
       id="2de7ee9c-61c9-11ef-9722-42004e494300"
    ></wink-content-loader>
  </body>
</html>

Des échantillons peuvent être trouvés pourcartes,grilles et cartes.

Chercher

La recherche fonctionne parfaitement avec l’une de vos grilles classées. Elle permet à vos utilisateurs de rechercher un hôtel et une destination, et la grille se met à jour en fonction de leurs résultats.

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>

En cliquant sur le composant ci-dessus, une fenêtre modale s’ouvre qui vous permet de saisir la destination ou l’hôtel que vous recherchez.

Itinéraire

Le bouton « Itinéraire » affiche l’itinéraire actuel. En cliquant dessus, le sélecteur d’itinéraire complet s’affiche sous forme de fenêtre modale.

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>

Composant Web d’itinéraire

Cliquer sur le bouton ci-dessus ouvre une fenêtre modale qui vous permet de mettre à jour votre itinéraire.

Recherche

La recherche est un bouton du sélecteur d’itinéraire, accessible uniquement par icône. En cliquant dessus, le sélecteur d’itinéraire complet s’affiche sous forme de fenêtre modale.

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>

Cliquer sur le bouton ci-dessus ouvre une fenêtre modale qui vous permet de mettre à jour votre itinéraire.

Formulaire d’itinéraire

Le composant d’itinéraire affiche un formulaire d’itinéraire avec lequel les utilisateurs peuvent interagir.

<html>
  <body>
    <wink-itinerary-form></wink-itinerary-form>
  </body>
</html>

Composant Web du formulaire d'itinéraire — *Composant Web du formulaire d’itinéraire*

En modifiant l’itinéraire, dans l’un de nos composants d’itinéraire, cela déclenche l’événement de mise à jour de l’itinéraire sur tout inventaire actuellement affiché sur la page.

Compte

Le bouton Compte vous permet d’ajouter l’authentification Wink à votre site.

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>

Composant Web de compte — *Composant Web du bouton de compte*

Cliquer sur ce bouton, lorsque l’utilisateur n’est pas authentifié, le redirige vers l’authentification. Lorsque l’utilisateur est authentifié, son icône de profil s’affiche.

Lorsque vous cliquez sur le bouton, la liste déroulante spécifique à l’utilisateur s’ouvre.

Intégrer TripPay

Il y a deux éléments que vous devez inclure dans toute page sur laquelle vous souhaitez utiliser le composant Web de paiement TripPay.

Inclure notre feuille de style.
Incluez notre Javascript.

Feuille de style

Incluez nos styles CSS dans l’en-tête de votre document.

<html>
  <head>
    <link rel="stylesheet" href="https://elements.trippay.io/styles.css"></link>
  </head>
</html>

Javascript

Incluez notre Javascript au bas de votre document.Nous recommandons immédiatement au-dessus de la balise de fin du corps).

<html>
  <body>
    <script src="https://elements.trippay.io/elements.js" type="module" defer></script>
  </body>
</html>

Votre site est maintenant prêt et capable d’afficher nos composants Web.

Composants

Paiement

Le composant de paiement vous permet d’informer TripPay qu’un voyageur souhaite acheter quelque chose ainsi que les règles et les prix de ces articles.

Il y a un attribut obligatoire pour le widget :

idL’identifiant du contrat de réservation que vous souhaitez exécuter.

<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

Le widget prépare le contrat pour l’exécution et affiche les détails de paiement(Figure 1)à l’utilisateur de finaliser la réservation.