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 sa vrlo malo komplikacija. 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š stilopis.
  2. Uključite naš Javascript.
  3. Uključite naš aplikacioni učitavač.

Stilopis

Section titled “Stilopis”

Uključite naš CSS stil 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 zatvarajućeg 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 učitavač

Section titled “Aplikacioni učitavač”

Učitavač 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>

Učitavač sadržaja

Section titled “Učitavač sadržaja”

Učitavač sadržaja 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.

Pretraga

Section titled “Pretraga”

Pretraga 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

Itinerer

Section titled “Itinerer”

Dugme itinerera prikazuje trenutni itinerer na dugmetu. Kada kliknete na njega, puni izbor itinerera 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 itinerer.

Search modal
Izbor itinerera kao modal

Pretraga

Section titled “Pretraga”

Pretraga je dugme koje prikazuje samo ikonu itinerera. Kada kliknete na njega, puni izbor itinerera se prikazuje kao modal.

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

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

Search modal
Izbor itinerera kao modal

Forma itinerera

Section titled “Forma itinerera”

Komponenta itinerera prikazuje formu itinerera sa kojom korisnici mogu da interaguju.

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

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

Nalog

Section titled “Nalog”

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

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>
Account web component
Dugme naloga 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 naloga (autentifikovano) veb komponenta

Kada kliknete na dugme, otvara se korisnički specifični padajući meni.

Account button when authenticated
Dugme naloga (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š stilopis.
  2. Uključite naš Javascript.

Stilopis

Section titled “Stilopis”

Uključite naš CSS stil 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 zatvarajućeg 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”

Komponenta za plaćanje 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 mogle poći 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 i možda će dobavljač ponovo učiniti 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 i možda će dobavljač ponovo učiniti 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 da ide uz 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.