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 vrlo jednostavno ugrađivati Wink travel inventar. Ovaj članak vas vodi kroz našu kolekciju web komponenti i pokazuje kako ih koristiti.

Ugradite Wink

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

Uključite naš stilopis.
Uključite naš Javascript.
Uključite naš aplikacijski loader.

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

Uključite naš Javascript na dno vašeg dokumenta. (Preporučujemo odmah iznad završnog </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

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

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

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

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

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 kao odgovor na njihov rezultat pretraživanja.

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

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

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

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

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>

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

Itinerary form

Komponenta itinerara prikazuje obrazac itinerara s kojim korisnici mogu komunicirati.

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

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

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 — *Account button web komponenta*

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

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

Ugradite TripPay

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

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

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

Uključite naš Javascript na dno vašeg dokumenta. (Preporučujemo odmah iznad završnog <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

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

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

Inventar možda više nije dostupan. Idite na 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

Inventar je možda uklonjen. Idite na 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

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

Aplikacija

Ovo je namijenjeno samo web developerima. Ako ste slučajno uklonili Aplikaciju ; čime client ID više nije dostupan, molimo kreirajte novu aplikaciju i koristite novi client ID za ugrađivanje naših Web Komponenti.