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

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

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

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

Læs om vores komponentbibliotek nedenfor.

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

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

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.

Rute

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

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

Søge

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

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.

Konto

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.

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

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

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

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

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:

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.