Webcomponenten

Webcomponentenis een standaard waarmee je complete Javascript-functies in je website kunt integreren zonder programmeerkennis. Dankzij deze coole technologie kun je Wink Travel Inventory moeiteloos integreren. Dit artikel leidt je door onze collectie webcomponenten en laat je zien hoe je ze gebruikt.

Wink insluiten

Er zijn drie dingen die u moet opnemen op elke pagina waarop u een van onze webcomponenten wilt weergeven.

Voeg ons stijlblad toe.
Gebruik onze Javascript.
Voeg onze applicatieloader toe.

Stijlblad

Voeg onze CSS-stijlen toe aan de kop van uw document.

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

Javascript

Voeg onze Javascript onderaan uw document toe.Wij adviseren direct boven de eindteksttag).

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

Uw site is nu klaar en kan onze webcomponenten weergeven.

Componenten

Lees hieronder meer over onze componentenbibliotheek.

Applicatielader

De loader is verantwoordelijk voor het bijhouden van de status en het beheren van de interactie tussen onze componenten.Voeg het toe onder onze 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>

Inhoudslader

De content loader vormt de kern van onze webcomponentenbibliotheek. Deze is verantwoordelijk voor de weergave van uw inventaris (kaarten, rasters, kaarten).

Beschikbare kenmerken:

indeling
id
soort

Het kenmerksortis alleen beschikbaar als de lay-out isRANKEDen u geen bestaand gerangschikt raster wilt gebruiken. Laat in deze gevallenid leeg.

Beschikbare lay-outtypen:

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

Beschikbare sorteertypen:

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>

Er zijn voorbeelden te vinden voorkaarten,roosters En kaarten.

Opzoeken

Lookup werkt perfect samen met een van je gerangschikte rasters. Hiermee kunnen je gebruikers zoeken naar hotel en bestemming, en het raster wordt bijgewerkt op basis van hun zoekresultaat.

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

Wanneer u op het bovenstaande onderdeel klikt, wordt een venster geopend waarin u de bestemming of het hotel waarnaar u zoekt, kunt invoeren.

Opzoekmodel — *Zoekvenster met resultaten*

Routebeschrijving

De knop ‘Reisroute’ toont de huidige reisroute. Wanneer u erop klikt, wordt de volledige reisroutekiezer als modaal venster weergegeven.

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

Webcomponent reisroute

Als u op de bovenstaande knop klikt, wordt er een venster geopend waarmee u uw reisroute kunt bijwerken.

Zoekopdracht

Zoeken is een pictogram in de reisplanner. Wanneer u erop klikt, wordt de volledige reisplanner als modaal weergegeven.

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

Als u op de bovenstaande knop klikt, wordt er een venster geopend waarmee u uw reisroute kunt bijwerken.

Reisrouteformulier

Met het onderdeel Reisroute wordt een reisrouteformulier weergegeven waarmee gebruikers kunnen interacteren.

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

Reisroute formweb component — *Webcomponent voor reisplanformulier*

Wanneer u het reisschema in een van onze reisschemacomponenten wijzigt, wordt de reisschema-updategebeurtenis geactiveerd voor alle inventaris die op dat moment op de pagina wordt weergegeven.

Rekening

Met de accountknop kunt u Wink-authenticatie aan uw site toevoegen.

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

Account webcomponent — *Webcomponent voor accountknop*

Als de gebruiker niet is geauthenticeerd, wordt hij doorgestuurd naar de authenticatie-afdeling als hij op de knop klikt. Wanneer de gebruiker is geauthenticeerd, wordt het profielpictogram van de gebruiker weergegeven.

Wanneer u op de knop klikt, wordt een gebruikerspecifieke vervolgkeuzelijst geopend.

TripPay insluiten

Er zijn twee dingen die u moet opnemen op elke pagina waarop u de TripPay-betalingswebcomponent wilt gebruiken.

Voeg ons stijlblad toe.
Gebruik onze Javascript.

Stijlblad

Voeg onze CSS-stijlen toe aan de kop van uw document.

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

Javascript

Voeg onze Javascript onderaan uw document toe.Wij adviseren direct boven de eindteksttag).

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

Uw site is nu klaar en kan onze webcomponenten weergeven.

Componenten

Betaling

Met het betaalonderdeel kunt u TripPay laten weten dat een reiziger iets wil kopen en wat de regels en prijzen voor die items zijn.

Er is één vereist kenmerk voor de widget:

idDe identificatie van het boekingscontract dat u wilt uitvoeren.

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