Skip to content
Academy

Veb Komponente

Veb Komponente su standard koji vam omogućava da integrišete kompletne JavaScript funkcionalnosti u vaš sajt bez potrebe da znate kako da kodirate. Zahvaljujući ovoj sjajnoj tehnologiji, možete lako ugraditi Wink putnički inventar. Ovaj članak vas vodi kroz našu kolekciju veb komponenti i pokazuje kako da ih koristite.

Ugradite Wink

Section titled “Ugradite Wink”

Postoje tri stvari koje morate uključiti na svaku stranicu na kojoj želite da prikažete neku od naših veb komponenti.

  1. Uključite naš stil.
  2. Uključite naš Javascript.
  3. Uključite naš aplikacioni loader.

Stil

Section titled “Stil”

Uključite naše CSS stilove u head 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 dnu 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š sajt je sada spreman i sposoban da prikazuje naše veb komponente.

Komponente

Section titled “Komponente”

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

Aplikacioni loader

Section titled “Aplikacioni 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="OVDE IDE VAŠ CLIENT ID"
      configuration-id="OVDE IDE VAŠ ID PRILAGOĐAVANJA"
    ></wink-app-loader>
  </body>
</html>

Content loader

Section titled “Content loader”

Content loader je srce naše biblioteke veb komponenti. Odgovoran je za prikazivanje vašeg inventara (kartice, mreže, mape).

Dostupni atributi:

  • layout
  • id
  • sort

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

Dostupni tipovi layout-a:

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

Primeri se mogu pronaći za kartice, mreže i mape.

Lookup

Section titled “Lookup”

Lookup odlično funkcioniše zajedno sa jednom od vaših rangiranih mreža. Omogućava korisnicima da pretražuju hotele i destinacije, a mreža se ažurira u skladu sa rezultatima pretrage.

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

Klikom na komponentu iznad otvara se modal koji vam omogućava da unesete destinaciju ili hotel koji tražite.

Lookup modal
Lookup modal sa rezultatima

Itinerary

Section titled “Itinerary”

Dugme za itinerar prikazuje trenutni itinerar na dugmetu. Kada kliknete na njega, puni izbor itinerara se prikazuje kao modal.

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

Klikom na dugme iznad otvara se modal koji vam omogućava da ažurirate svoj itinerar.

Search modal
Izbor itinerara kao modal
Section titled “Search”

Search je dugme sa samo ikonom za izbor itinerara. Kada kliknete na njega, puni izbor itinerara se prikazuje kao modal.

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

Klikom na dugme iznad otvara se modal koji vam omogućava da ažurirate svoj itinerar.

Search modal
Izbor itinerara kao modal

Itinerary form

Section titled “Itinerary form”

Itinerary komponenta prikazuje formu itinerara sa kojom korisnici mogu da interaguju.

<html>
  <body>
    <wink-itinerary-form></wink-itinerary-form>
  </body>
</html>
Itinerary formweb component
Itinerary form veb komponenta

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

Account

Section titled “Account”

Dugme za nalog vam omogućava da dodate Wink autentifikaciju na vaš sajt.

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>
Account web component
Dugme za nalog veb komponenta

Klikom na dugme, kada korisnik nije autentifikovan, biće preusmeren da se autentifikuje. Kada je korisnik autentifikovan, prikazuje se ikona korisničkog profila.

Account button when authenticated
Dugme za nalog (autentifikovano) veb komponenta

Klikom na dugme otvara se korisnički specifični padajući meni.

Account button when authenticated
Dugme za nalog (otvoreno) veb komponenta

Ugradite TripPay

Section titled “Ugradite TripPay”

Postoje dve stvari koje morate uključiti na svaku stranicu na kojoj želite da koristite TripPay veb komponentu za plaćanje.

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

Stil

Section titled “Stil”

Uključite naše CSS stilove u head 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 dnu 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š sajt je sada spreman i sposoban da prikazuje naše veb komponente.

Komponente

Section titled “Komponente”

Plaćanje

Section titled “Plaćanje”

Plaćanje komponenta vam omogućava da obavestite TripPay da putnik želi da kupi nešto i pravila i cene za te stavke.

Postoji jedan obavezan atribut za vidžet:

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

Vidžet priprema ugovor za izvršenje i prikazuje detalje plaćanja (Slika 1) korisniku da finalizuje rezervaciju.

Payment details
Slika 1. Primer forme za plaćanje

Greške

Section titled “Greške”

Ako dobijete poruku o grešci prilikom ugradnje neke od naših veb komponenti, bilo na WinkLinks ili na vašem sopstvenom sajtu, postoji nekoliko stvari koje su možda pošle po zlu:

Dostupnost

Section titled “Dostupnost”

Inventar možda više nije dostupan. Idite na Wink Studio i proverite da li je status “kartice” dostupan. Ako nije, prikazaće se crveno. U tom slučaju, možete sačekati da možda dobavljač ponovo učini dostupnim ili ga ukloniti sa vaše liste.

Uklonjeno

Section titled “Uklonjeno”

Inventar je možda uklonjen. Idite na Wink Studio i proverite da li je status “kartice” dostupan. Ako nije, prikazaće se crveno. U tom slučaju, možete sačekati da možda dobavljač ponovo učini dostupnim ili ga ukloniti sa vaše liste.

Prilagođavanje

Section titled “Prilagođavanje”

Možda ste slučajno uklonili prilagođavanje koje ste definisali za vaš inventar. Proverite da li je prilagođavanje i dalje dostupno i postavite novo ako nedostaje.

Aplikacija

Section titled “Aplikacija”

Ovo je samo za veb programere. 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 Veb Komponenti.