Web-komponentit

Web Components on standardi, jonka avulla voit integroida kokonaisia JavaScript-ominaisuuksia verkkosivustollesi ilman koodausosaamista. Tämän hienon teknologian ansiosta voit upottaa Wink-matkavaraston hyvin vaivattomasti. Tämä artikkeli opastaa sinut web-komponenttien kokoelmamme läpi ja näyttää, miten niitä käytetään.

Upota Wink

Sivulle, jolle haluat näyttää jonkin web-komponenteistamme, sinun tulee sisällyttää kolme asiaa.

Sisällytä tyylitiedostomme.
Sisällytä JavaScriptimme.
Sisällytä sovelluksen lataaja.

Tyylitiedosto

Sisällytä CSS-tyylimme dokumenttisi head-osaan.

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

Javascript

Sisällytä JavaScriptimme dokumenttisi loppuun. (Suosittelemme juuri ennen </body>-tunnistetta).

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

Sivustosi on nyt valmis näyttämään web-komponenttimme.

Komponentit

Lue alla komponenttikirjastostamme.

Sovelluksen lataaja

Lataaja vastaa tilan ylläpidosta ja komponenttiemme välisen vuorovaikutuksen hallinnasta. (Sisällytä se JavaScriptimme 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ön lataaja

Sisällön lataaja on web-komponenttikirjastomme ydin. Se vastaa varastosi näyttämisestä (kortit, ruudukot, kartat).

Saatavilla olevat attribuutit:

layout
id
sort

Attribuutti sort on käytettävissä vain, kun layout on RANKED eikä halua käyttää olemassa olevaa järjestettyä ruudukkoa. Näissä tapauksissa jätä id tyhjäksi.

Saatavilla olevat layout-tyypit:

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

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

Esimerkkejä löytyy korteista, ruudukoista ja kartoista.

Haku

Haku toimii erinomaisesti yhdessä järjestettyjen ruudukkojesi kanssa. Se antaa käyttäjillesi mahdollisuuden hakea hotelleja ja kohteita, ja ruudukko päivittyy hakutulosten mukaan.

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

Lookup web component — *Lookup web -komponentti*

Komponenttia napsauttamalla avautuu modaalinäkymä, johon voit kirjoittaa haettavan kohteen tai hotellin.

Lookup modal — *Lookup-moduuli hakutuloksilla*

Matkaohjelma

Matkaohjelmapainike näyttää nykyisen matkaohjelman painikkeessa. Kun napsautat sitä, koko matkaohjelman valitsin avautuu modaalina.

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

Matkaohjelman web-komponentti

Painiketta napsauttamalla avautuu modaalinäkymä, jossa voit päivittää matkaohjelmaasi.

Search modal — *Matkaohjelman valitsin modaalina*

Haku

Haku on pelkkä kuvakepainike matkaohjelman valitsimelle. Kun napsautat sitä, koko matkaohjelman valitsin avautuu modaalina.

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

Search web component — *Haku web-komponentti*

Painiketta napsauttamalla avautuu modaalinäkymä, jossa voit päivittää matkaohjelmaasi.

Matkaohjelmalomake

Matkaohjelmakomponentti näyttää matkaohjelmalomakkeen, jonka kanssa käyttäjät voivat olla vuorovaikutuksessa.

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

Itinerary formweb component — *Matkaohjelmalomakkeen web-komponentti*

Matkaohjelman muuttaminen missä tahansa matkaohjelmakomponentissamme laukaisee matkaohjelman päivitystapahtuman kaikille sivulla tällä hetkellä näkyvillä olevalle varastolle.

Tili

Tilikomponentti antaa sinun lisätä Wink-todennuksen sivustollesi.

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

Account web component — *Tilikomponentin painike*

Painiketta napsauttamalla, kun käyttäjä ei ole todennettu, käyttäjä ohjataan todennukseen. Kun käyttäjä on todennettu, näytetään käyttäjän profiilikuvake.

Painiketta napsauttamalla avautuu käyttäjäkohtainen alasvetovalikko.

Upota TripPay

Sivulle, jolle haluat käyttää TripPay-maksun web-komponenttia, sinun tulee sisällyttää kaksi asiaa.

Sisällytä tyylitiedostomme.
Sisällytä JavaScriptimme.

Tyylitiedosto

Sisällytä CSS-tyylimme dokumenttisi head-osaan.

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

Javascript

Sisällytä JavaScriptimme dokumenttisi loppuun. (Suosittelemme juuri ennen <body>-tunnistetta).

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

Sivustosi on nyt valmis näyttämään web-komponenttimme.

Komponentit

Maksu

Maksukomponentti antaa sinun ilmoittaa TripPay:lle, että matkustaja haluaa ostaa jotain, sekä määritellä näiden tuotteiden säännöt ja hinnat.

Widgetillä on yksi pakollinen attribuutti:

id Varaussopimuksen tunniste, jonka haluat suorittaa.

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

Widget valmistaa sopimuksen suoritettavaksi ja näyttää maksutiedot (Kuva 1) käyttäjälle varauksen viimeistelyä varten.

Payment details — *Kuva 1. Esimerkkimaksulomake*

Virheet

Jos saat virheilmoituksen upottaessasi jotakin web-komponenteistamme, joko WinkLinksissä tai omalla verkkosivustollasi, voi olla muutama mahdollinen syy:

Saatavuus

Varasto ei välttämättä ole enää saatavilla. Mene Wink Studioon ja tarkista, onko “kortin” tila saatavilla. Jos ei ole, se näkyy punaisena. Tällöin voit odottaa, että toimittaja tekee sen taas saataville tai poistaa sen listaltasi.

Poistettu

Varasto on voitu poistaa. Mene Wink Studioon ja tarkista, onko “kortin” tila saatavilla. Jos ei ole, se näkyy punaisena. Tällöin voit odottaa, että toimittaja tekee sen taas saataville tai poistaa sen listaltasi.

Mukauttaminen

Saatat olla vahingossa poistanut varastoon liittyvän mukautuksen. Varmista, että mukautus on edelleen saatavilla ja aseta uusi, jos jokin puuttuu.

Sovellus

Tämä koskee vain web-kehittäjiä. Jos olet vahingossa poistanut Sovelluksen, jolloin client ID ei ole enää käytettävissä, luo uusi sovellus ja käytä uutta client ID:tä upottaessasi Web-komponenttejamme.