Verkkokomponentit

Verkkokomponentiton standardi, jonka avulla voit integroida kokonaisia Javascript-ominaisuuksia verkkosivustollesi ilman koodauksen osaamista.

Tämän hienon teknologian ansiosta voit upottaa Wink-matkavaraston erittäin vaivattomasti. Tämä artikkeli opastaa sinut verkkokomponenttiemme kokoelmassa ja näyttää, kuinka niitä käytetään.

Upota Wink

Kolme asiaa on sisällytettävä mille tahansa sivulle, jolla haluat näyttää jonkin verkkokomponenteistamme.

Sisällytä tyylitiedostomme.
Sisällytä Javascriptimme.
Sisällytä sovelluslataajamme.

Tyylitiedosto

Sisällytä CSS-tyylimme dokumenttisi otsikkoon.

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

Javascript

Sisällytä Javascript-koodimme dokumenttisi loppuun. (Suosittelemme välittömästi lopputekstitagin yläpuolella).

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

Sivustosi on nyt valmis ja voi näyttää verkkokomponenttejamme.

Komponentit

Lue lisää komponenttikirjastostamme alta.

Sovelluslataaja

Lataaja on vastuussa tilan ylläpitämisestä ja komponenttiemme välisen vuorovaikutuksen hallinnasta.Sisällytä se JavaScript-koodin alle).

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

Sisällönlataaja

Sisällönlataaja on verkkokomponenttikirjastomme ydin. Se vastaa inventaariosi (korttien, ruudukoiden ja karttojen) näyttämisestä.

Käytettävissä olevat ominaisuudet:

layout
tunnus
järjestellä

Ominaisuussorton käytettävissä vain, kun asettelu onRANKEDetkä halua käyttää olemassa olevaa rankattua ruudukkoa. Näissä tapauksissa jätäidtyhjä.

Käytettävissä olevat asettelutyypit:

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

Käytettävissä olevat lajittelutyypit:

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äytteitä löytyy mm.kortit,ruudukotjakartat.

Haku

Haku toimii loistavasti yhdessä jonkin rankatun ruudukkosi kanssa. Sen avulla käyttäjäsi voivat hakea hotellia ja kohdetta, ja ruudukko päivittyy heidän hakutuloksensa perusteella.

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

Yllä olevan komponentin napsauttaminen avaa modaali-ikkunan, johon voit kirjoittaa etsimäsi kohteen tai hotellin.

Matkasuunnitelma

Matkasuunnitelmapainike näyttää nykyisen matkasuunnitelman. Kun napsautat sitä, koko matkasuunnitelman valitsin tulee näkyviin modaali-ikkunassa.

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

Matkasuunnitelman verkkokomponentti

Yllä olevaa painiketta napsauttamalla avautuu ikkuna, jonka avulla voit päivittää matkasuunnitelmaasi.

Haku

Haku on matkasuunnitelmavalitsimen pelkkä kuvakepainike. Kun napsautat sitä, koko matkasuunnitelmavalitsin tulee näkyviin modaali-ikkunassa.

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

Yllä olevaa painiketta napsauttamalla avautuu ikkuna, jonka avulla voit päivittää matkasuunnitelmaasi.

Matkasuunnitelmalomake

Matkasuunnitelmakomponentti näyttää matkasuunnitelmalomakkeen, jonka kanssa käyttäjät voivat olla vuorovaikutuksessa.

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

Matkasuunnitelmalomakeverkkokomponentti — *Matkasuunnitelmalomakkeen verkkokomponentti*

Matkasuunnitelman muuttaminen missä tahansa matkasuunnitelmakomponentissamme käynnistää matkasuunnitelman päivitystapahtuman sivulla tällä hetkellä näytettävälle varastolle.

Tili

Tilipainikkeen avulla voit lisätä Wink-todennuksen sivustollesi.

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>

Tilin verkkokomponentti — *Tilipainikkeen verkkokomponentti*

Painikkeen napsauttaminen käyttäjän todennuksen poistamisen jälkeen ohjaa käyttäjän todennukseen. Kun käyttäjä on todennettu, näkyviin tulee käyttäjän profiilikuvake.

Kun napsautat painiketta, se avaa käyttäjäkohtaisen alasvetovalikon.

Upota TripPay

TripPay-maksuverkkokomponenttia käyttävälle sivulle on sisällytettävä kaksi asiaa.

Sisällytä tyylitiedostomme.
Sisällytä Javascriptimme.

Tyylitiedosto

Sisällytä CSS-tyylimme dokumenttisi otsikkoon.

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

Javascript

Sisällytä Javascript-koodimme dokumenttisi loppuun. (Suosittelemme välittömästi lopputekstitagin yläpuolella).

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

Sivustosi on nyt valmis ja voi näyttää verkkokomponenttejamme.

Komponentit

Maksu

Maksukomponentin avulla voit ilmoittaa TripPaylle, että matkustaja haluaa ostaa jotakin, sekä näiden tuotteiden säännöt ja hinnat.

Widgetillä on yksi pakollinen attribuutti:

idSen varaussopimuksen tunniste, jonka haluat toteutettavan.

<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

Widget valmistelee sopimuksen täytäntöönpanoa varten ja näyttää maksutiedot(Kuva 1)käyttäjälle varauksen viimeistelemiseksi.