Siirry sisältöön
Academy

Web-komponentit

Web Components on standardi, joka mahdollistaa koko JavaScript-ominaisuuksien integroinnin verkkosivustollesi ilman koodaustaitoja. Tämän hienon teknologian ansiosta voit upottaa Wink-matkavaraston vaivattomasti. Tämä artikkeli opastaa sinut web-komponenttien kokoelmamme läpi ja näyttää, miten niitä käytetään.

Upota Wink

Osio nimeltä “Upota Wink”

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

  1. Sisällytä tyylitiedostomme.
  2. Sisällytä JavaScriptimme.
  3. Sisällytä sovelluksen lataaja.

Tyylitiedosto

Osio nimeltä “Tyylitiedosto”

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

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

Javascript

Osio nimeltä “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

Osio nimeltä “Komponentit”

Lue alla komponenttikirjastostamme.

Sovelluksen lataaja

Osio nimeltä “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

Osio nimeltä “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

Osio nimeltä “Haku”

Lookup 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

Osio nimeltä “Matkaohjelma”

Matkaohjelmapainike näyttää nykyisen matkaohjelman painikkeessa. Klikatessasi se avaa koko matkaohjelman valitsimen modaalina.

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>
Itinerary web component
Matkaohjelman web-komponentti

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

Search modal
Matkaohjelman valitsin modaalina

Haku

Osio nimeltä “Haku”

Haku on pelkkä kuvakepainike matkaohjelman valitsimelle. Klikatessasi se avaa koko matkaohjelman valitsimen 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.

Search modal
Matkaohjelman valitsin modaalina

Matkaohjelmalomake

Osio nimeltä “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ä oleville varastoille.

Tili

Osio nimeltä “Tili”

Tilipainike mahdollistaa Wink-todennuksen lisäämisen sivustollesi.

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>
Account web component
Tilipainikkeen web-komponentti

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.

Account button when authenticated
Tilipainike (todennettu) web-komponentti

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

Account button when authenticated
Tilipainike (avattu) web-komponentti

Upota TripPay

Osio nimeltä “Upota TripPay”

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

  1. Sisällytä tyylitiedostomme.
  2. Sisällytä JavaScriptimme.

Tyylitiedosto

Osio nimeltä “Tyylitiedosto”

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

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

Javascript

Osio nimeltä “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

Osio nimeltä “Komponentit”

Maksu

Osio nimeltä “Maksu”

Maksukomponentti ilmoittaa TripPaylle, että matkustaja haluaa ostaa jotain sekä esittää näiden tuotteiden säännöt ja hinnat.

Widgetillä on yksi pakollinen attribuutti:

  • id Varauksen sopimuksen 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

Osio nimeltä “Virheet”

Jos saat virheilmoituksen upottaessasi jotakin web-komponenteistamme, joko WinkLinksissä tai omalla verkkosivustollasi, muutama asia on voinut mennä pieleen:

Saatavuus

Osio nimeltä “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 saatavaksi tai poistaa sen listaltasi.

Poistettu

Osio nimeltä “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 saatavaksi tai poistaa sen listaltasi.

Mukautus

Osio nimeltä “Mukautus”

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

Sovellus

Osio nimeltä “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.