Spletne komponente

Spletne komponente so standard, ki vam omogoča, da v svojo spletno stran vključite celotne funkcije JavaScripta, ne da bi morali znati programirati. Zahvaljujoč tej kul tehnologiji lahko Wink potovalni inventar vdelate z zelo malo truda. Ta članek vas vodi skozi našo zbirko spletnih komponent in vam pokaže, kako jih uporabljati.

Vdelaj Wink

Obstajajo tri stvari, ki jih morate vključiti na katero koli stran, kjer želite prikazati eno od naših spletnih komponent.

Vključite naš slogovni list.
Vključite naš Javascript.
Vključite naš aplikacijski nalagalnik.

Slogovni list

Vključite naše CSS stile v glavo vašega dokumenta.

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

Javascript

Vključite naš Javascript na dno vašega dokumenta. (Priporočamo takoj nad končnim </body> tagom).

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

Vaša stran je zdaj pripravljena in sposobna prikazovati naše spletne komponente.

Komponente

Preberite o naši knjižnici komponent spodaj.

Aplikacijski nalagalnik

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="VAŠ CLIENT ID TUKAJ"
      configuration-id="VAŠ ID PRILAGODITVE TUKAJ"
    ></wink-app-loader>
  </body>
</html>

Nalagalnik vsebine

Nalagalnik vsebine je srce naše knjižnice spletnih komponent. Odgovoren je za prikaz vašega inventarja (kartice, mreže, zemljevide).

Na voljo so atributi:

layout
id
sort

Atribut sort je na voljo samo, ko je layout RANKED in ne želite uporabiti obstoječe rangirane mreže. V teh primerih pustite id prazno.

Na voljo so tipi postavitve:

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

Na voljo so tipi sortiranja:

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 za kartice, mreže in zemljevide.

Iskanje

Iskanje odlično deluje skupaj z eno od vaših rangiranih mrež. Omogoča uporabnikom iskanje hotela in destinacije, mreža pa se posodobi glede na njihov rezultat iskanja.

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

Lookup web component — *Lookup spletna komponenta*

Klik na zgornjo komponento odpre modalno okno, kjer lahko vpišete destinacijo ali hotel, ki ga iščete.

Potek poti

Gumb poteka poti prikazuje trenutni potek poti na gumbu. Ko kliknete nanj, se kot modalno okno prikaže celoten izbirnik poteka poti.

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

Itinerary spletna komponenta

Klik na gumb zgoraj odpre modalno okno, kjer lahko posodobite svoj potek poti.

Search modal — *Izbirnik poteka poti kot modalno okno*

Iskanje

Iskanje je gumb samo z ikono izbirnika poteka poti. Ko kliknete nanj, se kot modalno okno prikaže celoten izbirnik poteka poti.

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

Search web component — *Search spletna komponenta*

Klik na gumb zgoraj odpre modalno okno, kjer lahko posodobite svoj potek poti.

Obrazec poteka poti

Komponenta poteka poti prikazuje obrazec poteka poti, s katerim lahko uporabniki interagirajo.

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

Itinerary formweb component — *Obrazec poteka poti spletna komponenta*

S spremembo poteka poti v kateri koli naši komponenti poteka poti sprožite dogodek posodobitve poteka poti za kateri koli inventar, ki ga trenutno prikazujete na strani.

Račun

Gumb za račun vam omogoča, da na svojo stran dodate Wink avtentikacijo.

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

Account web component — *Gumb za račun spletna komponenta*

Klik na gumb, ko uporabnik ni prijavljen, ga preusmeri na prijavo. Ko je uporabnik prijavljen, se prikaže ikona uporabnikovega profila.

Ko kliknete na gumb, se odpre uporabniški spustni meni.

Vdelaj TripPay

Obstajata dve stvari, ki ju morate vključiti na katero koli stran, kjer želite uporabiti TripPay spletno komponento za plačilo.

Vključite naš slogovni list.
Vključite naš Javascript.

Slogovni list

Vključite naše CSS stile v glavo vašega dokumenta.

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

Javascript

Vključite naš Javascript na dno vašega dokumenta. (Priporočamo takoj nad končnim <body> tagom).

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

Vaša stran je zdaj pripravljena in sposobna prikazovati naše spletne komponente.

Komponente

Plačilo

Plačilna komponenta omogoča, da TripPay obvestite, da želi potnik nekaj kupiti, ter pravila in cene za te izdelke.

Obvezni atribut za pripomoček je:

id Identifikator 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 uporabniku prikaže podrobnosti plačila (Slika 1) za dokončanje rezervacije.

Payment details — *Slika 1. Vzorec plačilnega obrazca*

Napake

Če se vam prikaže sporočilo o napaki pri vdelavi ene od naših spletnih komponent, bodisi na WinkLinks ali na vaši lastni spletni strani, je lahko nekaj stvari šlo narobe:

Razpoložljivost

Inventar morda ni več na voljo. Pojdite na Studio in preverite, ali je status “kartice” na voljo. Če ni, bo prikazan rdeče. V tem primeru lahko počakate in morda dobavitelj ponovno omogoči dostop ali pa ga odstranite s svojega seznama.

Odstranjeno

Inventar je morda bil odstranjen. Pojdite na Studio in preverite, ali je status “kartice” na voljo. Če ni, bo prikazan rdeče. V tem primeru lahko počakate in morda dobavitelj ponovno omogoči dostop ali pa ga odstranite s svojega seznama.

Prilagoditev

Morda ste po nesreči odstranili prilagoditev, ki ste jo določili za vaš inventar. Prepričajte se, da je prilagoditev še vedno na voljo in nastavite novo, če katera manjka.

Aplikacija

To je namenjeno samo spletnim razvijalcem. Če ste po nesreči odstranili Aplikacijo, zaradi česar client ID ni več na voljo, ustvarite novo aplikacijo in uporabite novi client ID za vdelavo naših spletnih komponent.