Gå til indhold

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.

Der er tre ting, du skal inkludere på enhver side, hvor du vil vise en af ​​vores webkomponenter.

  1. Inkluder vores stylesheet.
  2. Inkluder vores Javascript.
  3. Inkluder vores applikationsindlæser.

Inkluder vores CSS-stilarter i hovedet på dit dokument.

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

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.

Læs om vores komponentbibliotek nedenfor.

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æ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

Attributtensorter kun tilgængelig, når layoutet erRANKEDog du ønsker ikke at bruge et eksisterende rangeret gitter. I disse tilfælde skal du ladeidtom.

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 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>
Opslagswebkomponent
Opslagswebkomponent

Hvis du klikker på komponenten ovenfor, åbnes en modal, hvor du kan indtaste den destination eller det hotel, du søger efter.

Opslagsmodal
Opslagsmodal med resultater

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>
Rejseplan webkomponent
Rejseplan webkomponent

Hvis du klikker på knappen ovenfor, åbnes en modal, hvor du kan opdatere din rejseplan.

Søgemodal
Rejseplanvælger som modal

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>
Søgewebkomponent
Søgewebkomponent

Hvis du klikker på knappen ovenfor, åbnes en modal, hvor du kan opdatere din rejseplan.

Søgemodal
Rejseplanvælger som modal

Rejseplankomponenten viser en rejseplanformular, som brugerne kan interagere med.

<html>
<body>
<wink-itinerary-form></wink-itinerary-form>
</body>
</html>
Rejseplanens webkomponent
Webkomponent til rejseplanformular

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>
Konto webkomponent
Webkomponent til kontoknap

Hvis du klikker på knappen, når brugeren ikke er godkendt, videresendes brugeren til godkendelse. Når brugeren er godkendt, vises brugerens profilikon.

Kontoknap ved godkendelse
Webkomponent til kontoknap (godkendt)

Når du klikker på knappen, åbnes den brugerspecifikke rullemenu.

Kontoknap ved godkendelse
Webkomponent til kontoknap (åbn)

Der er to ting, du skal inkludere på enhver side, hvor du vil bruge TripPay-betalingswebkomponenten.

  1. Inkluder vores stylesheet.
  2. Inkluder vores Javascript.

Inkluder vores CSS-stilarter i hovedet på dit dokument.

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

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.

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:

  • idIdentifikatoren 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.

Betalingsoplysninger
Figur 1. Eksempel på betalingsformular