Skip to content

Nettkomponenter

Nettkomponenterer en standard som lar deg integrere hele Javascript-funksjoner på nettstedet ditt uten å vite hvordan du koder. Takket være denne kule teknologien kan du legge inn Wink-reisekataloger med svært lite styr. Denne artikkelen veileder deg gjennom samlingen vår av webkomponenter og viser deg hvordan du bruker dem.

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

  1. Inkluder stilarket vårt.
  2. Inkluder Javascript-en vår.
  3. Inkluder applikasjonslasteren vår.

Inkluder CSS-stilene våre i overskriften til dokumentet ditt.

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

Inkluder Javascript-en vår nederst i dokumentet ditt. (Vi anbefaler rett over slutttekst-taggen).

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

Nettstedet ditt er nå klart og kan vise webkomponentene våre.

Les om komponentbiblioteket vårt nedenfor.

Lasteren er ansvarlig for å opprettholde tilstanden og administrere samhandlingen mellom komponentene våre. (Legg det til under Javascript-en vår).

<html>
<body>
<wink-app-loader
client-id="YOUR CLIENT ID GOES HERE"
configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
></wink-app-loader>
</body>
</html>

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

Tilgjengelige attributter:

  • oppsett
  • ID
  • sortere

Attributtetsorter bare tilgjengelig når oppsettet erRANKEDog du vil ikke bruke et eksisterende rangert rutenett. I disse tilfellene lar duidtom.

Tilgjengelige layouttyper:

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

Prøver kan finnes forkort,rutenettogkart.

Oppslag fungerer utmerket sammen med et av dine rangerte rutenett. Det lar brukerne dine søke etter hotell og destinasjon, og rutenettet oppdateres som svar på søkeresultatet deres.

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

Hvis du klikker på komponenten ovenfor, åpnes et vindu som lar deg skrive inn destinasjonen eller hotellet du søker etter.

Oppslagsmodal
Oppslagsmodal med resultater

Reiseplanknappen 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>
Reiseplanens webkomponent
Reiseplanens webkomponent

Ved å klikke på knappen ovenfor åpnes en modal som lar deg oppdatere reiseruten din.

Søk i modal
Reiseplanvelger som modal

Søk er en knapp som bare viser et ikon i reiseplanvelgeren. Når du klikker på den, vises hele reiseplanvelgeren som et modalvindu.

<html>
<body>
<wink-search></wink-search>
</body>
</html>
Søk i webkomponent
Søk i webkomponent

Ved å klikke på knappen ovenfor åpnes en modal som lar deg oppdatere reiseruten din.

Søk i modal
Reiseplanvelger som modal

Reiseplankomponenten viser et reiseplanskjema som brukerne kan samhandle med.

<html>
<body>
<wink-itinerary-form></wink-itinerary-form>
</body>
</html>
Reiseplanleggingsskjema, webkomponent
Nettkomponent for reiseplanskjema

Ved å endre reiseruten i en hvilken som helst av våre reiserutekomponenter, utløses reiseruteoppdateringshendelsen for eventuell inventar du for øyeblikket har vist på siden.

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

<html>
<body>
<wink-account></wink-account>
</body>
</html>
Konto-nettkomponent
Kontoknapp-nettkomponent

Hvis du klikker på knappen når brukeren ikke er autentisert, videresendes brukeren til autentisering. Når brukeren er autentisert, vises brukerens profilikon.

Kontoknapp når autentisering
Kontoknapp (autentisert) webkomponent

Når du klikker på knappen, åpnes den brukerspesifikke rullegardinmenyen.

Kontoknapp når autentisering
Kontoknapp (åpen) webkomponent

Det er to ting du må inkludere på alle sider der du vil bruke TripPay-betalingsnettkomponenten.

  1. Inkluder stilarket vårt.
  2. Inkluder Javascript-en vår.

Inkluder CSS-stilene våre i overskriften til dokumentet ditt.

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

Inkluder Javascript-en vår nederst i dokumentet ditt. (Vi anbefaler rett over slutttekst-taggen).

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

Nettstedet ditt er nå klart og kan vise webkomponentene våre.

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

Det er én obligatorisk attributt til widgeten:

  • idIdentifikatoren for bestillingskontrakten du ønsker å undertegne.
<html>
<body>
<trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
</body>
</html>

For å lære hvordan du genererer bestillingskontraktenid, les veiledningen:Integrering med TripPay.

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

Betalingsdetaljer
Figur 1. Eksempel på betalingsskjema