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.

Legg inn et blunk

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

Inkluder stilarket vårt.
Inkluder Javascript-en vår.
Inkluder applikasjonslasteren vår.

Stilark

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>

Javascript

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.

Komponenter

Les om komponentbiblioteket vårt nedenfor.

Applikasjonslaster

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>

Innholdslaster

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

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>

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

Reiserute

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

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

Søk

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>

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

Reiseplanskjema

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.

Konto

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.

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

Bygg inn TripPay

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

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

Stilark

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>

Javascript

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.

Komponenter

Betaling

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.