Webkomponenter
Webkomponenterer en standard, der giver dig mulighed for at integrere komplette Javascript-funktioner på dit websted uden at vide, hvordan man koder. Takket være denne smarte teknologi kan du integrere Wink-rejseinventar med meget lidt besvær. Denne artikel guider dig gennem vores samling af webkomponenter og viser dig, hvordan du bruger dem.
Integrer blink
Section titled “Integrer blink”Der er tre ting, du skal inkludere på enhver side, hvor du vil vise en af vores webkomponenter.
- Inkluder vores stylesheet.
- Inkluder vores Javascript.
- Inkluder vores applikationsindlæser.
Stilark
Section titled “Stilark”Inkluder vores CSS-stilarter i hovedet på dit dokument.
<html> <head> <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link> </head></html>
Javascript
Section titled “Javascript”Inkluder vores Javascript nederst i dit dokument. (Vi anbefaler lige over slutteksten).
<html> <body> <script src="https://elements.wink.travel/elements.js" type="module" defer></script> </body></html>
Dit websted er nu klar og kan vise vores webkomponenter.
Komponenter
Section titled “Komponenter”Læs om vores komponentbibliotek nedenfor.
Applikationsindlæser
Section titled “Applikationsindlæser”Indlæseren er ansvarlig for at opretholde tilstanden og styre interaktionen mellem vores komponenter. (Inkluder det under vores 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>
Indlæser indhold
Section titled “Indlæser indhold”Indlæseren af indhold er kernen i vores webkomponentbibliotek. Den er ansvarlig for at vise din inventarliste (kort, gitre, kort).
Tilgængelige attributter:
- layout
- id
- sortere
Attributtensort
er kun tilgængelig, når layoutet erRANKED
og du ønsker ikke at bruge et eksisterende rangeret gitter. I disse tilfælde skal du ladeid
tom.
Tilgængelige layouttyper:
AD_BANNER
MAP
HOTEL
GUEST_ROOM
MEETING_ROOM
SPA
RESTAURANT
ACTIVITY
ATTRACTION
PLACE
ADD_ON
LIST
SEARCH
RANKED
Tilgængelige 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>
Prøver kan findes tilkort,gitreogkort.
Opslag
Section titled “Opslag”Opslag fungerer fantastisk sammen med et af dine rangerede gitre. Det lader dine brugere søge efter hotel og destination, og gitteret opdateres som svar på deres søgeresultat.
<html> <body> <wink-lookup></wink-lookup> </body></html>
Hvis du klikker på komponenten ovenfor, åbnes en modal, hvor du kan indtaste den destination eller det hotel, du søger efter.
Rejseplanknappen viser den aktuelle rejseplan på knappen. Når du klikker på den, vises den fulde rejseplanvælger som et modalvindue.
<html> <body> <wink-itinerary></wink-itinerary> </body></html>
Hvis du klikker på knappen ovenfor, åbnes en modal, hvor du kan opdatere din rejseplan.
Søgning er en knap, der kun er et ikon, i rejseplanvælgeren. Når du klikker på den, vises hele rejseplanvælgeren som et modalvindue.
<html> <body> <wink-search></wink-search> </body></html>
Hvis du klikker på knappen ovenfor, åbnes en modal, hvor du kan opdatere din rejseplan.
Rejseplanformular
Section titled “Rejseplanformular”Rejseplankomponenten viser en rejseplanformular, som brugerne kan interagere med.
<html> <body> <wink-itinerary-form></wink-itinerary-form> </body></html>
Ved at ændre rejseplanen i en hvilken som helst af vores rejseplankomponenter, udløses rejseplanopdateringshændelsen for den inventar, du i øjeblikket har vist på siden.
Kontoknappen giver dig mulighed for at tilføje Wink-godkendelse til dit websted.
<html> <body> <wink-account></wink-account> </body></html>
Hvis du klikker på knappen, når brugeren ikke er godkendt, videresendes brugeren til godkendelse. Når brugeren er godkendt, vises brugerens profilikon.
Når du klikker på knappen, åbnes den brugerspecifikke rullemenu.
Integrer TripPay
Section titled “Integrer TripPay”Der er to ting, du skal inkludere på enhver side, hvor du vil bruge TripPay-betalingswebkomponenten.
- Inkluder vores stylesheet.
- Inkluder vores Javascript.
Stilark
Section titled “Stilark”Inkluder vores CSS-stilarter i hovedet på dit dokument.
<html> <head> <link rel="stylesheet" href="https://elements.trippay.io/styles.css"></link> </head></html>
Javascript
Section titled “Javascript”Inkluder vores Javascript nederst i dit dokument. (Vi anbefaler lige over slutteksten).
<html> <body> <script src="https://elements.trippay.io/elements.js" type="module" defer></script> </body></html>
Dit websted er nu klar og kan vise vores webkomponenter.
Komponenter
Section titled “Komponenter”Betaling
Section titled “Betaling”Betalingskomponenten giver dig mulighed for at informere TripPay om, at en rejsende ønsker at købe noget, og om reglerne og priserne for disse varer.
Der er én obligatorisk attribut til widgetten:
id
Identifikatoren for den bookingkontrakt, du ønsker underskrevet.
<html> <body> <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay> </body></html>
Widgeten forbereder kontrakten til udførelse og viser betalingsoplysninger(Figur 1)til brugeren for at færdiggøre bookingen.