Skip to content
Academy

Web komponente

Web komponente su standard koji vam omogućuje integraciju cijelih JavaScript funkcionalnosti u vašu web stranicu bez potrebe za znanjem programiranja. Zahvaljujući ovoj sjajnoj tehnologiji, možete jednostavno ugrađivati Wink putnički inventar s vrlo malo muke. Ovaj članak vodi vas kroz našu kolekciju web komponenti i pokazuje kako ih koristiti.

Ugradnja Wink-a

Section titled “Ugradnja Wink-a”

Postoje tri stvari koje morate uključiti na bilo koju stranicu na kojoj želite prikazati neku od naših web komponenti.

  1. Uključite naš stilopis.
  2. Uključite naš Javascript.
  3. Uključite naš aplikacijski loader.

Stilopis

Section titled “Stilopis”

Uključite naše CSS stilove u zaglavlje vašeg dokumenta.

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

Javascript

Section titled “Javascript”

Uključite naš Javascript na dno vašeg dokumenta. (Preporučujemo odmah iznad zatvarajućeg body taga).

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

Vaša stranica je sada spremna i može prikazivati naše web komponente.

Komponente

Section titled “Komponente”

Pročitajte o našoj biblioteci komponenti u nastavku.

Aplikacijski loader

Section titled “Aplikacijski loader”

Loader je odgovoran za održavanje stanja i upravljanje interakcijom između naših komponenti. (Uključite ga ispod našeg Javascript-a).

<html>
  <body>
    <wink-app-loader
      client-id="OVDJE IDE VAŠ CLIENT ID"
      configuration-id="OVDJE IDE VAŠ ID PRILAGOĐAVANJA"
    ></wink-app-loader>
  </body>
</html>

Content loader

Section titled “Content loader”

Content loader je srce naše biblioteke web komponenti. Odgovoran je za prikaz vašeg inventara (kartice, mreže, karte).

Dostupni atributi:

  • layout
  • id
  • sort

Atribut sort je dostupan samo kada je layout RANKED i ne želite koristiti postojeću rangiranu mrežu. U tim slučajevima ostavite id praznim.

Dostupni tipovi layouta:

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

Dostupni tipovi 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>

Primjere možete pronaći za kartice, mreže i karte.

Lookup

Section titled “Lookup”

Lookup izvrsno funkcionira zajedno s jednom od vaših rangiranih mreža. Omogućuje korisnicima pretraživanje hotela i destinacija, a mreža se ažurira u skladu s rezultatima pretraživanja.

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>
Lookup web komponenta
Lookup web komponenta

Klikom na gornju komponentu otvara se modalni prozor koji vam omogućuje da upišete destinaciju ili hotel koji tražite.

Lookup modal
Lookup modal s rezultatima

Itinerary

Section titled “Itinerary”

Gumb za itinerar prikazuje trenutni itinerar na gumbu. Kada kliknete na njega, puni odabir itinerara prikazuje se kao modalni prozor.

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>
Itinerary web komponenta
Itinerary web komponenta

Klikom na gumb iznad otvara se modalni prozor koji vam omogućuje ažuriranje itinerara.

Search modal
Odabir itinerara kao modalni prozor
Section titled “Search”

Search je gumb s ikonom odabira itinerara. Kada kliknete na njega, puni odabir itinerara prikazuje se kao modalni prozor.

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>
Search web komponenta
Search web komponenta

Klikom na gumb iznad otvara se modalni prozor koji vam omogućuje ažuriranje itinerara.

Search modal
Odabir itinerara kao modalni prozor

Itinerary form

Section titled “Itinerary form”

Komponenta itinerara prikazuje obrazac itinerara s kojim korisnici mogu komunicirati.

<html>
  <body>
    <wink-itinerary-form></wink-itinerary-form>
  </body>
</html>
Itinerary form web komponenta
Itinerary form web komponenta

Promjena itinerara u bilo kojoj od naših komponenti itinerara pokreće događaj ažuriranja itinerara za bilo koji inventar koji trenutno prikazujete na stranici.

Account

Section titled “Account”

Gumb za račun omogućuje vam dodavanje Wink autentifikacije na vašu stranicu.

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>
Account web komponenta
Gumb za račun web komponenta

Klikom na gumb, kada korisnik nije autentificiran, korisnik se preusmjerava na autentifikaciju. Kada je korisnik autentificiran, prikazuje se ikona korisničkog profila.

Gumb za račun kada je autentificiran
Gumb za račun (autentificiran) web komponenta

Klikom na gumb otvara se korisnički specifični padajući izbornik.

Gumb za račun kada je autentificiran
Gumb za račun (otvoren) web komponenta

Ugradnja TripPay-a

Section titled “Ugradnja TripPay-a”

Postoje dvije stvari koje morate uključiti na bilo koju stranicu na kojoj želite koristiti TripPay web komponentu za plaćanje.

  1. Uključite naš stilopis.
  2. Uključite naš Javascript.

Stilopis

Section titled “Stilopis”

Uključite naše CSS stilove u zaglavlje vašeg dokumenta.

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

Javascript

Section titled “Javascript”

Uključite naš Javascript na dno vašeg dokumenta. (Preporučujemo odmah iznad zatvarajućeg body taga).

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

Vaša stranica je sada spremna i može prikazivati naše web komponente.

Komponente

Section titled “Komponente”

Plaćanje

Section titled “Plaćanje”

Komponenta za plaćanje omogućuje vam da obavijestite TripPay da putnik želi nešto kupiti te pravila i cijene za te stavke.

Postoji jedan obavezni atribut za widget:

  • id Identifikator ugovora o rezervaciji koji želite izvršiti.
<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

Widget priprema ugovor za izvršenje i prikazuje detalje plaćanja (Slika 1) korisniku za dovršetak rezervacije.

Detalji plaćanja
Slika 1. Primjer obrasca za plaćanje

Pogreške

Section titled “Pogreške”

Ako dobijete poruku o pogrešci prilikom ugrađivanja jedne od naših web komponenti, bilo na WinkLinks ili na vašoj vlastitoj web stranici, postoji nekoliko stvari koje bi mogle biti uzrok problema:

Dostupnost

Section titled “Dostupnost”

Inventar možda više nije dostupan. Posjetite Wink Studio i provjerite je li status “kartice” dostupan. Ako nije, prikazat će se crveno. U tom slučaju možete pričekati i možda će dobavljač ponovno učiniti dostupnim ili ga ukloniti s vaše liste.

Uklonjeno

Section titled “Uklonjeno”

Inventar je možda uklonjen. Posjetite Wink Studio i provjerite je li status “kartice” dostupan. Ako nije, prikazat će se crveno. U tom slučaju možete pričekati i možda će dobavljač ponovno učiniti dostupnim ili ga ukloniti s vaše liste.

Prilagodba

Section titled “Prilagodba”

Možda ste slučajno uklonili prilagodbu koju ste definirali za svoj inventar. Provjerite je li prilagodba još uvijek dostupna i postavite novu ako nedostaje.

Aplikacija

Section titled “Aplikacija”

Ovo je namijenjeno samo web programerima. Ako ste slučajno uklonili Aplikaciju ; zbog čega client ID više nije dostupan, molimo kreirajte novu aplikaciju i koristite novi client ID za ugradnju naših Web komponenti.