Skip to content
Academy

Spletne komponente

Spletne komponente so standard, ki vam omogoča integracijo celotnih funkcionalnosti JavaScript v vašo spletno stran, 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.

Vdelajte Wink

Section titled “Vdelajte Wink”

Obstajajo tri stvari, ki jih morate vključiti na katerokoli 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”

Preberite o naši knjižnici komponent spodaj.

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
Spletna komponenta Lookup

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

Lookup modal
Modalno okno Lookup z rezultati

Potek poti

Section titled “Potek poti”

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

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>
Itinerary web component
Spletna komponenta poteka poti

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 samo z ikono izbirnika poteka poti. Ko kliknete nanj, se prikaže celoten izbirnik poteka poti kot modalno okno.

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>
Search web component
Spletna komponenta Iskanje

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
Spletna komponenta obrazca poteka poti

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
Spletna komponenta gumba za račun

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
Spletna komponenta gumba za račun (prijavljen)

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

Account button when authenticated
Spletna komponenta gumba za račun (odprt)

Vdelajte TripPay

Section titled “Vdelajte TripPay”

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

  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”

Komponenta za plačilo omogoča, da TripPay obvestite, da potnik želi 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 prikaže podrobnosti plačila (Slika 1) uporabniku za dokončanje rezervacije.

Payment details
Slika 1. Vzorec obrazca za plačilo

Napake

Section titled “Napake”

Če vas ob vdelavi ene od naših spletnih komponent, bodisi na WinkLinks ali na vaši lastni spletni strani, pozdravi sporočilo o napaki, 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 prikazana rdeča barva. V tem primeru lahko počakate in morda dobavitelj ponovno omogoči dostop ali pa jo 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 prikazana rdeča barva. V tem primeru lahko počakate in morda dobavitelj ponovno omogoči dostop ali pa jo odstranite s svojega seznama.

Prilagoditev

Section titled “Prilagoditev”

Morda ste po nesreči odstranili prilagoditev, ki ste jo definirali 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 in s tem onemogočili dostop do client ID, prosimo, ustvarite novo aplikacijo in uporabite nov client ID za vdelavo naših spletnih komponent.