Skip to content
Wink

Spletne komponente

Spletne komponente so standard, ki vam omogoča, da v svojo spletno stran integrirate celotne funkcije JavaScript brez znanja programiranja. 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

Section titled “Vdelaj Wink”

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

  1. Vključite naš slogovni list.
  2. Vključite naš Javascript.
  3. Vključite naš aplikacijski nalagalnik.

Slogovni list

Section titled “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

Section titled “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

Section titled “Komponente”

Spodaj preberite o naši knjižnici komponent.

Aplikacijski nalagalnik

Section titled “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

Section titled “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

Section titled “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.

Lookup modal
Lookup modal z rezultati

Potek poti

Section titled “Potek poti”

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

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>
Itinerary web component
Potek poti spletna komponenta

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

Search modal
Izbirnik poteka poti kot modalno okno

Iskanje

Section titled “Iskanje”

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

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>
Search web component
Iskalna spletna komponenta

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

Search modal
Izbirnik poteka poti kot modalno okno

Obrazec poteka poti

Section titled “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

Section titled “Račun”

Gumb za račun vam omogoča dodajanje Wink avtentikacije na vašo stran.

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

Account button when authenticated
Gumb za račun (prijavljen) spletna komponenta

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

Account button when authenticated
Gumb za račun (odprt) spletna komponenta

Vdelaj TripPay

Section titled “Vdelaj TripPay”

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

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

Slogovni list

Section titled “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

Section titled “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

Section titled “Komponente”

Plačilo

Section titled “Plačilo”

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

Obstaja en obvezen atribut za pripomoček:

  • 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

Section titled “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

Section titled “Razpoložljivost”

Inventar morda ni več na voljo. Pojdite na Wink 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

Section titled “Odstranjeno”

Inventar je morda bil odstranjen. Pojdite na Wink 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

Section titled “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

Section titled “Aplikacija”

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