Skip to content

Veebikomponendid

Veebikomponendidon standard, mis võimaldab teil integreerida oma veebisaidile terveid Javascripti funktsioone ilma kodeerimisoskusteta. Tänu sellele lahedale tehnoloogiale saate Winki reisiinventari väga vähese vaevaga manustada. See artikkel tutvustab teile meie veebikomponentide kollektsiooni ja näitab, kuidas neid kasutada.

Igale lehele, kus soovite kuvada ühte meie veebikomponentidest, tuleb lisada kolm asja.

  1. Lisa meie stiilileht.
  2. Lisage meie Javascript.
  3. Lisage meie rakenduste laadur.

Lisage meie CSS-stiilid oma dokumendi päisesse.

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

Lisage meie Javascript oma dokumendi lõppu. (Soovitame vahetult lõputeksti kohal).

<html>
<body>
<script src="https://elements.wink.travel/elements.js" type="module" defer></script>
</body>
</html>

Teie sait on nüüd valmis ja saab meie veebikomponente kuvada.

Loe meie komponentide teegi kohta allpool.

Laadur vastutab oleku hoidmise ja meie komponentide vahelise interaktsiooni haldamise eest.Lisage see meie JavaScripti alla).

<html>
<body>
<wink-app-loader
client-id="YOUR CLIENT ID GOES HERE"
configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
></wink-app-loader>
</body>
</html>

Sisulaadur on meie veebikomponentide teegi keskmes. See vastutab teie inventari (kaartide, ruudustike, kaartide) kuvamise eest.

Saadaval olevad atribuudid:

  • paigutus
  • ID
  • sorteeri

Atribuutsorton saadaval ainult siis, kui paigutus onRANKEDja te ei soovi kasutada olemasolevat järjestatud ruudustikku. Sellistel juhtudel jätkeidtühi.

Saadaval olevad paigutuse tüübid:

  • AD_BANNER
  • MAP
  • HOTEL
  • GUEST_ROOM
  • MEETING_ROOM
  • SPA
  • RESTAURANT
  • ACTIVITY
  • ATTRACTION
  • PLACE
  • ADD_ON
  • LIST
  • SEARCH
  • RANKED

Saadaval olevad sortimistüübid:

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

Näidiseid leiab aadressiltkaardid,võrgudjakaardid.

Otsing töötab suurepäraselt koos ühe teie järjestatud ruudustikuga. See võimaldab teie kasutajatel otsida hotelli ja sihtkohta ning ruudustik värskendatakse vastavalt nende otsingutulemustele.

<html>
<body>
<wink-lookup></wink-lookup>
</body>
</html>
Otsingu veebikomponent
Otsingu veebikomponent

Ülaltoodud komponendile klõpsamine avab modaalakna, kuhu saate sisestada otsitava sihtkoha või hotelli.

Otsingu modaalaken
Otsingu modaalaken tulemustega

Reisiplaani nupp kuvab nupul praeguse reisiplaani. Sellele klõpsamisel kuvatakse modaalaknas täielik reisiplaani valija.

<html>
<body>
<wink-itinerary></wink-itinerary>
</body>
</html>
Reisiplaani veebikomponent
Reisiplaani veebikomponent

Ülaltoodud nupule klõpsamine avab modaalakna, mis võimaldab teil oma teekonda uuendada.

Otsingu modaalaken
Marsruudi valija modaalsena

Otsing on teekonna valija ikooniga nupp. Sellele klõpsamisel kuvatakse kogu teekonna valija modaalaknas.

<html>
<body>
<wink-search></wink-search>
</body>
</html>
Otsingu veebikomponent
Otsingu veebikomponent

Ülaltoodud nupule klõpsamine avab modaalakna, mis võimaldab teil oma teekonda uuendada.

Otsingu modaalaken
Marsruudi valija modaalsena

Reisikava komponent kuvab reisikava vormi, millega kasutajad saavad suhelda.

<html>
<body>
<wink-itinerary-form></wink-itinerary-form>
</body>
</html>
Reisiplaani vormi veebikomponent
Reisiplaani vormi veebikomponent

Reisikava muutmine mis tahes meie reisikava komponendis käivitab reisikava uuendamise sündmuse mis tahes lehel kuvatavas inventaris.

Konto nupp võimaldab teil oma saidile Winki autentimise lisada.

<html>
<body>
<wink-account></wink-account>
</body>
</html>
Konto veebikomponent
Konto nupu veebikomponent

Nupule klõpsamine, kui kasutaja pole autentitud, suunatakse autentimisele. Kui kasutaja on autentitud, kuvatakse kasutaja profiiliikoon.

Konto nupp autentimisel
Konto nupu (autentitud) veebikomponent

Nupule klõpsates avaneb kasutajapõhine rippmenüü.

Konto nupp autentimisel
Konto nupu (ava) veebikomponent

Igale lehele, kus soovite TripPay makseveebikomponenti kasutada, peate lisama kaks asja.

  1. Lisa meie stiilileht.
  2. Lisage meie Javascript.

Lisage meie CSS-stiilid oma dokumendi päisesse.

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

Lisage meie Javascript oma dokumendi lõppu. (Soovitame vahetult lõputeksti kohal).

<html>
<body>
<script src="https://elements.trippay.io/elements.js" type="module" defer></script>
</body>
</html>

Teie sait on nüüd valmis ja saab meie veebikomponente kuvada.

Maksekomponent võimaldab teil TripPay’le teada anda, et reisija soovib midagi osta, ning nende esemete reeglid ja hinnad.

Vidinal on üks kohustuslik atribuut:

  • idBroneerimislepingu identifikaator, mida soovite täita.
<html>
<body>
<trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
</body>
</html>

Vidin valmistab lepingu täitmiseks ette ja kuvab makseandmed(Joonis 1)kasutajale broneeringu lõpuleviimiseks.

Makseandmed
Joonis 1. Maksevormi näidis