Hoppa till innehåll

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.

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

  1. Inkludera vårt stilark.
  2. Inkludera vårt Javascript.
  3. Inkludera vår applikationsladdare.

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>

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.

Läs om vårt komponentbibliotek nedan.

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å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.

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>
Sök efter webbkomponent
Sök efter webbkomponent

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

Sökningsmodal
Sökningsmodal med resultat

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
Webbkomponent för resplan

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

Sökmodal
Resplanväljare som modal

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>
Sök webbkomponent
Sök webbkomponent

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

Sökmodal
Resplanväljare som modal

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

<html>
<body>
<wink-itinerary-form></wink-itinerary-form>
</body>
</html>
Webbkomponent för resplanformulär
Webbkomponent för resplanformulär

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.

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.

Kontoknapp vid autentisering
Webbkomponent för kontoknapp (autentiserad)

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

Kontoknapp vid autentisering
Webbkomponent för kontoknapp (öppen)

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

  1. Inkludera vårt stilark.
  2. Inkludera vårt Javascript.

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>

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.

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