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.

Manusta silmapilgutus

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

Lisa meie stiilileht.
Lisage meie Javascript.
Lisage meie rakenduste laadur.

Stiilileht

Lisage meie CSS-stiilid oma dokumendi päisesse.

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

Javascripti

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.

Komponendid

Loe meie komponentide teegi kohta allpool.

Rakenduste laadur

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>

Sisu laadur

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

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>

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

Reisiplaan

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

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

Otsi

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

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

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

Reisiplaani vorm

Reisikava komponent kuvab reisikava vormi, millega kasutajad saavad suhelda.

<html>
  <body>
    <wink-itinerary-form></wink-itinerary-form>
  </body>
</html>

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

Konto

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.

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

TripPay manustamine

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

Lisa meie stiilileht.
Lisage meie Javascript.

Stiilileht

Lisage meie CSS-stiilid oma dokumendi päisesse.

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

Javascripti

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.

Komponendid

Makse

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.