Spletne komponente

Spletne komponenteje standard, ki vam omogoča integracijo celotnih funkcij Javascripta v vaše spletno mesto, ne da bi vedeli, kako programirati. Zahvaljujoč tej odlični tehnologiji lahko z zelo malo truda vdelate Wink potovalni inventar. Ta članek vas vodi skozi našo zbirko spletnih komponent in vam pokaže, kako jih uporabljati.

Vdelaj Wink

Na vsako stran, kjer želite prikazati eno od naših spletnih komponent, morate vključiti tri stvari.

Vključite našo predlogo slogov.
Vključite naš Javascript.
Vključite naš nalagalnik aplikacij.

Slogovna predloga

V glavo dokumenta vključite naše CSS sloge.

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

Javascript

Vključite naš Javascript na dno dokumenta. (Priporočamo tik nad oznako končnega telesa).

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

Vaše spletno mesto je zdaj pripravljeno in lahko prikazuje naše spletne komponente.

Komponente

Spodaj si preberite o naši knjižnici komponent.

Nalagalnik aplikacij

Nalagalnik je odgovoren za ohranjanje stanja in upravljanje interakcije med našimi komponentami.Vključite ga pod naš Javascript).

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

Nalagalnik vsebine

Nalagalnik vsebine je v središču naše knjižnice spletnih komponent. Odgovoren je za prikaz vašega inventarja (kartic, mrež, zemljevidov).

Razpoložljivi atributi:

postavitev
identifikacija
razvrsti

Atributsortje na voljo le, če je postavitevRANKEDin ne želite uporabiti obstoječe razvrščene mreže. V teh primerih pustiteidprazno.

Razpoložljive vrste postavitev:

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

Razpoložljive vrste razvrščanja:

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>

Vzorce lahko najdete zakartice,mrežeinzemljevidi.

Iskanje

Iskanje odlično deluje skupaj z eno od vaših razvrščenih mrež. Omogoča vašim uporabnikom iskanje hotelov in destinacij, mreža pa se posodablja glede na rezultate iskanja.

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

S klikom na zgornjo komponento se odpre modalno okno, v katerega lahko vnesete destinacijo ali hotel, ki ga iščete.

Načrt potovanja

Gumb za načrt poti prikazuje trenutni načrt poti. Ko ga kliknete, se celoten izbirnik načrta poti prikaže kot modalno okno.

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

Spletna komponenta načrta potovanja

S klikom na zgornji gumb se odpre modalno okno, ki vam omogoča posodobitev načrta potovanja.

Iskanje

Iskanje je gumb, ki deluje samo kot ikona v izbirniku načrta potovanja. Ko ga kliknete, se celoten izbirnik načrta potovanja prikaže kot modalno okno.

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

S klikom na zgornji gumb se odpre modalno okno, ki vam omogoča posodobitev načrta potovanja.

Obrazec za načrt potovanja

Komponenta načrta potovanja prikazuje obrazec načrta potovanja, s katerim lahko uporabniki komunicirajo.

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

*Spletna komponenta obrazca za načrt potovanja*

S spremembo načrta potovanja v kateri koli naši komponenti načrta potovanja se sproži dogodek posodobitve načrta potovanja za katero koli zalogo, ki jo trenutno prikazujete na strani.

Račun

Gumb za račun vam omogoča, da na svoje spletno mesto dodate preverjanje pristnosti Wink.

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

Spletna komponenta računa — *Spletna komponenta gumba računa*

S klikom na gumb, ko uporabnik ni overjen, bo preusmerjen na postopek overjanja. Ko je uporabnik overjen, se prikaže ikona njegovega profila.

Ko kliknete na gumb, se odpre spustni meni, specifičen za uporabnika.

Vdelaj TripPay

Na katero koli stran, kjer želite uporabljati spletno komponento za plačilo TripPay, morate vključiti dve stvari.

Vključite našo predlogo slogov.
Vključite naš Javascript.

Slogovna predloga

V glavo dokumenta vključite naše CSS sloge.

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

Javascript

Vključite naš Javascript na dno dokumenta. (Priporočamo tik nad oznako končnega telesa).

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

Vaše spletno mesto je zdaj pripravljeno in lahko prikazuje naše spletne komponente.

Komponente

Plačilo

Plačilna komponenta vam omogoča, da TripPay obvestite, da želi popotnik nekaj kupiti, ter o pravilih in cenah za te artikle.

Pripomoček ima en obvezen atribut:

idIdentifikator pogodbe o rezervaciji, ki jo želite izvesti.

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

Pripomoček pripravi pogodbo za izvedbo in prikaže podrobnosti o plačilu(Slika 1)uporabniku, da dokonča rezervacijo.