Webbkomponenter

Webbkomponenterär en standard som låter dig integrera hela Javascript-funktioner på din webbplats utan att behöva programmera. Tack vare denna coola teknik kan du bädda in Wink-resekataloger med väldigt lite krångel. Den här artikeln guidar dig genom vår samling av webbkomponenter och visar hur du använder dem.

Bädda in blinkning

Det finns tre saker du måste inkludera på alla sidor där du vill visa en av våra webbkomponenter.

Inkludera vårt stilark.
Inkludera vårt Javascript.
Inkludera vår applikationsladdare.

Stilark

Inkludera våra CSS-stilar i huvudet på ditt dokument.

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

Javascript

Inkludera vårt Javascript längst ner i ditt dokument. (Vi rekommenderar omedelbart ovanför sluttexten).

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

Din webbplats är nu redo och kan visa våra webbkomponenter.

Komponenter

Läs om vårt komponentbibliotek nedan.

Applikationsladdare

Laddaren ansvarar för att bibehålla tillståndet och hantera interaktionen mellan våra komponenter.Inkludera det under vår 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>

Innehållsladdare

Innehållsladdaren är hjärtat i vårt webbkomponentbibliotek. Den ansvarar för att visa ditt inventarium (kort, rutnät, kartor).

Tillgängliga attribut:

layout
id
sortera

Attributetsortär endast tillgänglig när layouten ärRANKEDoch du vill inte använda ett befintligt rangordnat rutnät. I dessa fall, lämnaidtom.

Tillgängliga layouttyper:

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

Tillgängliga sorteringstyper:

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>

Prover kan hittas förkort,rutnätochkartor.

Sökning

Lookup fungerar utmärkt tillsammans med en av dina rankade rutnät. Det låter dina användare söka efter hotell och destination och rutnätet uppdateras som svar på deras sökresultat.

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

Om du klickar på komponenten ovan öppnas en modal där du kan skriva in destinationen eller hotellet du söker efter.

Resväg

Knappen Resplan visar den aktuella resplanen på knappen. När du klickar på den visas hela resplanväljaren som en modal.

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

Webbkomponent för resplan

Om du klickar på knappen ovan öppnas en modal där du kan uppdatera din resplan.

Söka

Sök är en knapp som endast är en ikon i resplanväljaren. När du klickar på den visas hela resplanväljaren som en modal.

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

Om du klickar på knappen ovan öppnas en modal där du kan uppdatera din resplan.

Resplanformulär

Resplankomponenten visar ett resplanformulär som användare kan interagera med.

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

Genom att ändra resplanen, i någon av våra resplankomponenter, utlöses en resplanuppdateringshändelse för allt inventarium du för närvarande har visat på sidan.

Konto

Med kontoknappen kan du lägga till Wink-autentisering på din webbplats.

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

Kontowebbkomponent — *Webbkomponent för kontoknapp*

Om du klickar på knappen när användaren inte är autentiserad, vidarebefordras användaren för autentisering. När användaren är autentiserad visas användarens profilikon.

När du klickar på knappen öppnas den användarspecifika rullgardinsmenyn.

Bädda in TripPay

Det finns två saker du måste inkludera på alla sidor där du vill använda TripPays webbkomponent för betalning.

Inkludera vårt stilark.
Inkludera vårt Javascript.

Stilark

Inkludera våra CSS-stilar i huvudet på ditt dokument.

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

Javascript

Inkludera vårt Javascript längst ner i ditt dokument. (Vi rekommenderar omedelbart ovanför sluttexten).

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

Din webbplats är nu redo och kan visa våra webbkomponenter.

Komponenter

Betalning

Betalningskomponenten låter dig informera TripPay om att en resenär vill köpa något och reglerna och priserna för dessa varor.

Det finns ett obligatoriskt attribut för widgeten:

idIdentifieraren för det bokningsavtal du vill ha verkställt.

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

För att lära dig hur du genererar bokningskontraktetid, läs guiden:Integrering med TripPay.

Widgeten förbereder kontraktet för verkställande och visar betalningsinformation(Figur 1)till användaren för att slutföra bokningen.

Betalningsuppgifter — *Figur 1. Exempel på betalningsformulär*