Webkomponenter

Web Components er en standard som lar deg integrere hele Javascript-funksjoner på nettstedet ditt uten å kunne kode. Takket være denne kule teknologien kan du enkelt legge inn Wink reiseinventar. Denne artikkelen guider deg gjennom vår samling av webkomponenter og viser deg hvordan du bruker dem.

Legg inn Wink

Det er tre ting du må inkludere på enhver side hvor du vil vise en av våre webkomponenter.

Inkluder vårt stilark.
Inkluder vår Javascript.
Inkluder vår applikasjonslaster.

Stilark

Inkluder våre CSS-stiler i dokumentets head.

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

Javascript

Inkluder vår Javascript nederst i dokumentet. (Vi anbefaler rett over slutten av </body>-taggen).

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

Nettstedet ditt er nå klart til å vise våre webkomponenter.

Komponenter

Les om vårt komponentbibliotek nedenfor.

Applikasjonslaster

Lasteren er ansvarlig for å holde tilstand og håndtere interaksjon mellom våre komponenter. (Inkluder den under vår Javascript).

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

Innholdslaster

Innholdslasteren er kjernen i vårt webkomponentbibliotek. Den er ansvarlig for å vise ditt inventar (kort, rutenett, kart).

Tilgjengelige attributter:

layout
id
sort

Attributtet sort er kun tilgjengelig når layout er RANKED og du ikke ønsker å bruke et eksisterende rangert rutenett. I disse tilfellene, la id være tom.

Tilgjengelige layout-typer:

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

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

Eksempler finnes for kort, rutenett og kart.

Oppslag

Oppslag fungerer utmerket sammen med et av dine rangerte rutenett. Det lar brukerne søke etter hotell og destinasjon, og rutenettet oppdateres i respons til søket.

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

Lookup web component — *Lookup webkomponent*

Ved å klikke på komponenten over åpnes en modal som lar deg skrive inn destinasjonen eller hotellet du søker etter.

Lookup modal — *Lookup-modal med resultater*

Reiseplan

Reiseplan-knappen viser gjeldende reiseplan på knappen. Når du klikker på den, vises hele reiseplanvelgeren som en modal.

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

Reiseplan webkomponent

Ved å klikke på knappen over åpnes en modal som lar deg oppdatere reiseplanen.

Search modal — *Reiseplanvelger som modal*

Søk

Søk er en ikon-knapp for reiseplanvelgeren. Når du klikker på den, vises hele reiseplanvelgeren som en modal.

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

Search web component — *Søk webkomponent*

Ved å klikke på knappen over åpnes en modal som lar deg oppdatere reiseplanen.

Reiseplansskjema

Reiseplankomponenten viser et reiseplansskjema som brukerne kan interagere med.

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

Itinerary formweb component — *Reiseplansskjema webkomponent*

Ved å endre reiseplanen i hvilken som helst av våre reiseplankomponenter, utløses reiseplanoppdateringshendelsen til alt inventar du for øyeblikket viser på siden.

Konto

Kontoknappen lar deg legge til Wink-autentisering på nettstedet ditt.

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

Account web component — *Kontoknapp webkomponent*

Ved å klikke på knappen, når brukeren ikke er autentisert, blir brukeren sendt videre for å autentisere seg. Når brukeren er autentisert, vises brukerens profilikon.

Når du klikker på knappen, åpnes en bruker-spesifikk nedtrekksmeny.

Legg inn TripPay

Det er to ting du må inkludere på enhver side hvor du vil bruke TripPay betalingswebkomponent.

Inkluder vårt stilark.
Inkluder vår Javascript.

Stilark

Inkluder våre CSS-stiler i dokumentets head.

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

Javascript

Inkluder vår Javascript nederst i dokumentet. (Vi anbefaler rett over slutten av <body>-taggen).

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

Nettstedet ditt er nå klart til å vise våre webkomponenter.

Komponenter

Betaling

Betalingskomponenten lar deg informere TripPay om at en reisende ønsker å kjøpe noe, samt reglene og prisene for disse varene.

Det er ett påkrevd attributt til widgeten:

id Identifikatoren til bookingkontrakten du ønsker å utføre.

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

Widgeten forbereder kontrakten for utførelse og viser betalingsdetaljer (Figur 1) til brukeren for å fullføre bookingen.

Payment details — *Figur 1. Eksempel på betalingsskjema*

Feil

Hvis du får en feilmelding når du legger inn en av våre webkomponenter, enten på WinkLinks eller på ditt eget nettsted, kan det være noen ting som har gått galt:

Tilgjengelighet

Inventaret kan være utilgjengelig. Gå til Wink Studio og sjekk om statusen til “kortet” er tilgjengelig. Hvis det ikke er det, vil det vises som rødt. I så fall kan du vente og kanskje leverandøren gjør det tilgjengelig igjen, eller fjerne det fra listen din.

Fjernet

Inventaret kan ha blitt fjernet. Gå til Wink Studio og sjekk om statusen til “kortet” er tilgjengelig. Hvis det ikke er det, vil det vises som rødt. I så fall kan du vente og kanskje leverandøren gjør det tilgjengelig igjen, eller fjerne det fra listen din.

Tilpasning

Du kan ha ved et uhell fjernet tilpasningen du har definert for inventaret ditt. Sørg for at tilpasningen fortsatt er tilgjengelig, og sett en ny hvis en mangler.

Applikasjon

Dette gjelder kun for webutviklere. Hvis du ved et uhell har fjernet Application slik at klient-ID ikke lenger er tilgjengelig, vennligst opprett en ny applikasjon og bruk den nye klient-IDen for å legge inn våre Webkomponenter.