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
Section titled “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
Section titled “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
Section titled “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
Section titled “Komponenter”Les om komponentbiblioteket vårt nedenfor.
Applikasjonslaster
Section titled “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
Section titled “Innholdslaster”Innholdslasteren er kjernen i vårt webkomponentbibliotek. Den er ansvarlig for å vise inventaret ditt (kort, rutenett, kart).
Tilgjengelige attributter:
- oppsett
- ID
- sortere
Attributtetsort
er bare tilgjengelig når oppsettet erRANKED
og du vil ikke bruke et eksisterende rangert rutenett. I disse tilfellene lar duid
tom.
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
Section titled “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
Section titled “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>
Ved å klikke på knappen ovenfor åpnes en modal som lar deg oppdatere reiseruten din.
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
Section titled “Reiseplanskjema”Reiseplankomponenten viser et reiseplanskjema som brukerne kan samhandle med.
<html> <body> <wink-itinerary-form></wink-itinerary-form> </body></html>
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>
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
Section titled “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
Section titled “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
Section titled “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
Section titled “Komponenter”Betaling
Section titled “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:
id
Identifikatoren 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.