Web komponente
Web komponenteje standard koji vam omogućuje integraciju cijelih Javascript značajki na vašu web stranicu bez znanja programiranja. Zahvaljujući ovoj sjajnoj tehnologiji, omogućuje vam ugradnju Wink putničkog inventara uz vrlo malo muke. Ovaj članak vas vodi kroz našu kolekciju web komponenti i pokazuje vam kako ih koristiti.
Ugradi Wink
Section titled “Ugradi 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š stilski list.
- Uključite naš Javascript.
- Uključite naš program za učitavanje aplikacija.
Stilski list
Section titled “Stilski list”Uključite naše CSS stilove u zaglavlje 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 dokumenta. (Preporučujemo odmah iznad oznake za kraj tijela).
<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 više o našoj biblioteci komponenti u nastavku.
Učitavač aplikacija
Section titled “Učitavač aplikacija”Učitavač je odgovoran za održavanje stanja i upravljanje interakcijom između naših komponenti.Uključite ga ispod našeg Javascripta).
<html> <body> <wink-app-loader client-id="YOUR CLIENT ID GOES HERE" configuration-id="YOUR CUSTOMIZATION ID GOES HERE" ></wink-app-loader> </body></html>
Učitavač sadržaja
Section titled “Učitavač sadržaja”Učitavač sadržaja je srž naše biblioteke web komponenti. Odgovoran je za prikaz vašeg inventara (kartica, mreža, mapa).
Dostupni atributi:
- raspored
- identifikacija
- vrsta
Atributsort
dostupno je samo kada je izgledRANKED
i ne želite koristiti postojeću rangiranu mrežu. U tim slučajevima ostaviteid
prazno.
Dostupne vrste rasporeda:
AD_BANNER
MAP
HOTEL
GUEST_ROOM
MEETING_ROOM
SPA
RESTAURANT
ACTIVITY
ATTRACTION
PLACE
ADD_ON
LIST
SEARCH
RANKED
Dostupne vrste 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>
Uzorci se mogu pronaći zakartice,rešetkeikarte.
Pretraživanje
Section titled “Pretraživanje”Lookup odlično funkcionira s jednom od vaših rangiranih mreža. Omogućuje vašim korisnicima pretraživanje hotela i odredišta, a mreža se ažurira kao odgovor na rezultat pretraživanja.
<html> <body> <wink-lookup></wink-lookup> </body></html>
Klikom na gornju komponentu otvara se modalni prozor u koji možete upisati odredište ili hotel koji tražite.
Plan putovanja
Section titled “Plan putovanja”Gumb za plan puta prikazuje trenutni plan puta na gumbu. Kada kliknete na njega, cijeli alat za odabir plana puta prikazuje se kao modalni prozor.
<html> <body> <wink-itinerary></wink-itinerary> </body></html>
Klikom na gornji gumb otvara se modalni prozor koji vam omogućuje ažuriranje plana putovanja.
Pretraživanje
Section titled “Pretraživanje”Pretraživanje je gumb koji se nalazi samo na ikoni u alatu za odabir plana puta. Kada kliknete na njega, cijeli alat za odabir plana puta prikazuje se kao modalni prozor.
<html> <body> <wink-search></wink-search> </body></html>
Klikom na gornji gumb otvara se modalni prozor koji vam omogućuje ažuriranje plana putovanja.
Obrazac plana putovanja
Section titled “Obrazac plana putovanja”Komponenta itinerera prikazuje obrazac itinerera s kojim korisnici mogu komunicirati.
<html> <body> <wink-itinerary-form></wink-itinerary-form> </body></html>
Promjenom plana putovanja, u bilo kojoj od naših komponenti plana putovanja, pokreće se događaj ažuriranja plana putovanja za bilo koji inventar koji trenutno imate prikazan na stranici.
Gumb za račun omogućuje vam dodavanje Wink autentifikacije na vašu web-lokaciju.
<html> <body> <wink-account></wink-account> </body></html>
Klikom na gumb, kada korisnik nije autentificiran, korisnik će biti preusmjeren na autentifikaciju. Kada je korisnik autentificiran, prikazuje se ikona korisničkog profila.
Kada kliknete na gumb, otvara se padajući izbornik specifičan za korisnika.
Ugradi TripPay
Section titled “Ugradi 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š stilski list.
- Uključite naš Javascript.
Stilski list
Section titled “Stilski list”Uključite naše CSS stilove u zaglavlje 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 dokumenta. (Preporučujemo odmah iznad oznake za kraj tijela).
<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 plaćanja omogućuje vam da obavijestite TripPay da putnik želi nešto kupiti te o pravilima i cijenama za te artikle.
Widgetu je potreban jedan atribut:
id
Identifikator ugovora o rezervaciji koji želite potpisati.
<html> <body> <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay> </body></html>
Za više informacija o generiranju ugovora o rezervacijiid
, pročitajte vodič:Integracija s TripPayom.
Widget priprema ugovor za izvršenje i prikazuje podatke o plaćanju(Slika 1)korisniku kako bi dovršio rezervaciju.