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

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

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

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

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

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

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.

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.

*Modalni prozor za pretraživanje s rezultatima*

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>

Web komponenta itinerera

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

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

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.

Račun

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.

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

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

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

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

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:

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*