Skip to content

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.

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

  1. Sisällytä tyylitiedostomme.
  2. Sisällytä Javascriptimme.
  3. Sisällytä sovelluslataajamme.

Sisällytä CSS-tyylimme dokumenttisi otsikkoon.

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

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.

Lue lisää komponenttikirjastostamme alta.

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 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 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>
Haku-verkkokomponentti
Haku-verkkokomponentti

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

Haku modaali
Hakulomake tuloksilla

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
Matkasuunnitelman verkkokomponentti

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

Haku modaalinäkymässä
Matkasuunnitelman valitsin modaalisena valikkona

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

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

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

Haku modaalinäkymässä
Matkasuunnitelman valitsin modaalisena valikkona

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.

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.

Tilipainike todennuksen jälkeen
Tilipainikkeen (todennetun) verkkokomponentti

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

Tilipainike todennuksen jälkeen
Tilipainikkeen (avoin) verkkokomponentti

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

  1. Sisällytä tyylitiedostomme.
  2. Sisällytä Javascriptimme.

Sisällytä CSS-tyylimme dokumenttisi otsikkoon.

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

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.

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.

Maksutiedot
Kuva 1. Esimerkki maksulomakkeesta