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
Section titled “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
Section titled “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
Section titled “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
Section titled “Komponenter”Läs om vårt komponentbibliotek nedan.
Applikationsladdare
Section titled “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
Section titled “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 ärRANKED
och du vill inte använda ett befintligt rangordnat rutnät. I dessa fall, lämnaid
tom.
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
Section titled “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
Section titled “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>
Om du klickar på knappen ovan öppnas en modal där du kan uppdatera din resplan.
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
Section titled “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.
Med kontoknappen kan du lägga till Wink-autentisering på din webbplats.
<html> <body> <wink-account></wink-account> </body></html>
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
Section titled “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
Section titled “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
Section titled “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
Section titled “Komponenter”Betalning
Section titled “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:
id
Identifieraren 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.