Webkomponenter

Webkomponenter er en standard, der lader dig integrere hele Javascript-funktioner på dit website uden at skulle kunne kode. Takket være denne smarte teknologi kan du nemt integrere Wink rejseinventar. Denne artikel guider dig gennem vores samling af webkomponenter og viser, hvordan du bruger dem.

Integrer Wink

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

Stylesheet

Inkluder vores CSS-stilarter i dokumentets head.

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

Javascript

Inkluder vores Javascript nederst i dokumentet. (Vi anbefaler lige over slutningen af body-tagget).

<html>
  <body>
    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>
  </body>
</html>

Dit site er nu klar til at vise vores webkomponenter.

Komponenter

Læs om vores komponentbibliotek nedenfor.

Applikationsloader

Loaderen er ansvarlig for at holde styr på tilstand og styre interaktionen mellem vores komponenter. (Inkluder den under vores Javascript).

<html>
  <body>
    <wink-app-loader
      client-id="DIN CLIENT ID HER"
      configuration-id="DIN TILPASNING ID HER"
    ></wink-app-loader>
  </body>
</html>

Indholdsloader

Indholdsloaderen er kernen i vores webkomponentbibliotek. Den er ansvarlig for at vise dit inventar (kort, grids, kort).

Tilgængelige attributter:

layout
id
sort

Attributten sort er kun tilgængelig, når layout er RANKED, og du ikke ønsker at bruge et eksisterende rangeret grid. I disse tilfælde skal id være tom.

Tilgængelige layout-typer:

AD_BANNER
MAP
HOTEL
GUEST_ROOM
MEETING_ROOM
SPA
RESTAURANT
ACTIVITY
ATTRACTION
PLACE
ADD_ON
LIST
SEARCH
RANKED

Tilgængelige sorterings-typer:

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>

Eksempler kan findes for kort, grids og kort.

Opslag

Opslag fungerer godt sammen med et af dine rangerede grids. Det lader dine brugere søge efter hotel og destination, og grid’et opdateres som svar på deres søgeresultat.

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>

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

Rejseplan

Rejseplan-knappen viser den aktuelle rejseplan på knappen. Når du klikker på den, vises den fulde rejseplanvælger som en modal.

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>

Rejseplan webkomponent

Ved at klikke på knappen ovenfor åbnes en modal, hvor du kan opdatere din rejseplan.

Search modal — *Rejseplanvælger som modal*

Søg

Søg er en ikon-knap til rejseplanvælgeren. Når du klikker på den, vises den fulde rejseplanvælger som en modal.

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>

Search webkomponent — *Søg webkomponent*

Ved at klikke på knappen ovenfor åbnes en modal, hvor du kan opdatere din rejseplan.

Rejseplansformular

Rejseplanskomponenten viser en rejseplansformular, som brugerne kan interagere med.

<html>
  <body>
    <wink-itinerary-form></wink-itinerary-form>
  </body>
</html>

Itinerary formweb component — *Rejseplansformular webkomponent*

Ved at ændre rejseplanen i en af vores rejseplanskomponenter udløses en opdateringsbegivenhed til alt inventar, du aktuelt har vist på siden.

Konto

Konto-knappen giver dig mulighed for at tilføje Wink-autentificering til dit site.

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>

Account webkomponent — *Konto-knap webkomponent*

Når du klikker på knappen, og brugeren ikke er autentificeret, bliver brugeren sendt videre til autentificering. Når brugeren er autentificeret, vises brugerens profilikon.

Når du klikker på knappen, åbnes brugerens specifikke dropdown.

Integrer TripPay

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

Inkluder vores stylesheet.
Inkluder vores Javascript.

Stylesheet

Inkluder vores CSS-stilarter i dokumentets head.

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

Javascript

Inkluder vores Javascript nederst i dokumentet. (Vi anbefaler lige over slutningen af body-tagget).

<html>
  <body>
    <script src="https://elements.trippay.io/elements.js" type="module" defer></script>
  </body>
</html>

Dit site er nu klar til at vise vores webkomponenter.

Komponenter

Betaling

Betalingskomponenten lader dig informere TripPay om, at en rejsende ønsker at købe noget, samt regler og priser for disse varer.

Der er én påkrævet attribut til widget’en:

id Identifikatoren for den bookingkontrakt, du ønsker at udføre.

<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

Widget’en forbereder kontrakten til udførelse og viser betalingsdetaljer (Figur 1) til brugeren for at færdiggøre bookingen.

Fejl

Hvis du møder en fejlmeddelelse, når du integrerer en af vores webkomponenter, enten på WinkLinks eller på dit eget website, kan der være flere ting, der er gået galt:

Tilgængelighed

Inventar kan være udgået. Gå til Wink Studio og tjek, om status for “kortet” er tilgængeligt. Hvis det ikke er, vises det som rødt. I så fald kan du vente og håbe, at leverandøren gør det tilgængeligt igen, eller fjerne det fra din liste.

Fjernet

Inventar kan være fjernet. Gå til Wink Studio og tjek, om status for “kortet” er tilgængeligt. Hvis det ikke er, vises det som rødt. I så fald kan du vente og håbe, at leverandøren gør det tilgængeligt igen, eller fjerne det fra din liste.

Tilpasning

Du kan ved et uheld have fjernet den tilpasning, du har defineret til dit inventar. Sørg for, at tilpasningen stadig er tilgængelig, og sæt en ny, hvis en mangler.

Applikation

Dette er kun for webudviklere. Hvis du ved et uheld har fjernet Applikationen, så klient-ID’et ikke længere er tilgængeligt, skal du oprette en ny applikation og bruge det nye klient-ID til at integrere vores Webkomponenter.