Skip to content
Wink

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

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

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 spletno 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 spustni meni.

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

Vdelajte TripPay

Section titled “Vdelajte TripPay”

Obstajata dve stvari, ki ju morate vključiti na katero koli 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”

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 prikazana rdeča barva. V tem primeru lahko počakate in morda dobavitelj ponovno omogoči razpoložljivost ali pa jo odstranite s 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 razpoložljivost ali pa jo odstranite s seznama.

Prilagoditev

Section titled “Prilagoditev”

Morda ste po pomoti 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 pomoti odstranili Aplikacijo, zaradi česar client ID ni več na voljo, ustvarite novo aplikacijo in uporabite novi client ID za vdelavo naših spletnih komponent.