Skip to content

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.

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

  1. Uključite naš stilski list.
  2. Uključite naš Javascript.
  3. Uključite naš program za učitavanje aplikacija.

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

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

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.

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

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 je srž naše biblioteke web komponenti. Odgovoran je za prikaz vašeg inventara (kartica, mreža, mapa).

Dostupni atributi:

  • raspored
  • identifikacija
  • vrsta

Atributsortdostupno je samo kada je izgledRANKEDi ne želite koristiti postojeću rangiranu mrežu. U tim slučajevima ostaviteidprazno.

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.

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>
Web komponenta pretraživanja
Web komponenta pretraživanja

Klikom na gornju komponentu otvara se modalni prozor u koji možete upisati odredište ili hotel koji tražite.

Modalni prozor za pretraživanje
Modalni prozor za pretraživanje s rezultatima

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>
Web komponenta itinerera
Web komponenta itinerera

Klikom na gornji gumb otvara se modalni prozor koji vam omogućuje ažuriranje plana putovanja.

Modalno pretraživanje
Birač plana puta kao modalni prozor

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>
Web komponenta za pretraživanje
Web komponenta za pretraživanje

Klikom na gornji gumb otvara se modalni prozor koji vam omogućuje ažuriranje plana putovanja.

Modalno pretraživanje
Birač plana puta kao modalni prozor

Komponenta itinerera prikazuje obrazac itinerera s kojim korisnici mogu komunicirati.

<html>
<body>
<wink-itinerary-form></wink-itinerary-form>
</body>
</html>
Web komponenta obrasca za itinerar
Web komponenta obrasca za plan puta

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>
Web komponenta računa
Web komponenta gumba računa

Klikom na gumb, kada korisnik nije autentificiran, korisnik će biti preusmjeren na autentifikaciju. Kada je korisnik autentificiran, prikazuje se ikona korisničkog profila.

Gumb računa nakon autentifikacije
Web komponenta gumba računa (autentificirano)

Kada kliknete na gumb, otvara se padajući izbornik specifičan za korisnika.

Gumb računa nakon autentifikacije
Web komponenta gumba računa (otvori)

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š stilski list.
  2. Uključite naš Javascript.

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

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

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.

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:

  • idIdentifikator 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.

Podaci o plaćanju
Slika 1. Primjer obrasca za plaćanje