Web-komponentit

Web-komponentit on standardi, joka mahdollistaa koko Javascript-ominaisuuksien integroinnin 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-tagin loppua).

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

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

Komponentit

Lue alla komponenttikirjastostamme.

Sovelluksen lataaja

Lataaja vastaa tilan ylläpidosta ja komponenttien välisen vuorovaikutuksen hallinnasta. (Sisällytä se Javascriptimme alle).

<html>
  <body>
    <wink-app-loader
      client-id="ASIALLA OLEVA ASIAKAS-ID"
      configuration-id="ASIALLA OLEVA MUKAUTUS-ID"
    ></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ärjestetyn ruudukon 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. Klikkaamalla sitä avautuu koko matkaohjelman valitsin 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. Klikkaamalla sitä avautuu koko matkaohjelman valitsin 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 käyttäjät voivat täyttää.

<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 näkyville varastoille.

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 kirjautunut, käyttäjä ohjataan kirjautumaan sisään. Kun käyttäjä on kirjautunut, 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-tagin loppua).

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

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

Komponentit

Maksu

Maksukomponentti ilmoittaa TripPay:lle, että matkustaja haluaa ostaa jotain sekä määrittelee 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

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

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

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

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 asiakas-ID ei ole enää käytettävissä, luo uusi sovellus ja käytä uutta asiakas-ID:tä upottaessasi Web-komponenttejamme.