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
Section titled “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
Section titled “Tyylitiedosto”Sisällytä CSS-tyylimme dokumenttisi otsikkoon.
<html> <head> <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link> </head></html>
Javascript
Section titled “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
Section titled “Komponentit”Lue lisää komponenttikirjastostamme alta.
Sovelluslataaja
Section titled “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
Section titled “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ä
Ominaisuussort
on käytettävissä vain, kun asettelu onRANKED
etkä halua käyttää olemassa olevaa rankattua ruudukkoa. Näissä tapauksissa jätäid
tyhjä.
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>
Yllä olevan komponentin napsauttaminen avaa modaali-ikkunan, johon voit kirjoittaa etsimäsi kohteen tai hotellin.
Matkasuunnitelma
Section titled “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>
Yllä olevaa painiketta napsauttamalla avautuu ikkuna, jonka avulla voit päivittää matkasuunnitelmaasi.
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
Section titled “Matkasuunnitelmalomake”Matkasuunnitelmakomponentti näyttää matkasuunnitelmalomakkeen, jonka kanssa käyttäjät voivat olla vuorovaikutuksessa.
<html> <body> <wink-itinerary-form></wink-itinerary-form> </body></html>
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>
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
Section titled “Upota TripPay”TripPay-maksuverkkokomponenttia käyttävälle sivulle on sisällytettävä kaksi asiaa.
- Sisällytä tyylitiedostomme.
- Sisällytä Javascriptimme.
Tyylitiedosto
Section titled “Tyylitiedosto”Sisällytä CSS-tyylimme dokumenttisi otsikkoon.
<html> <head> <link rel="stylesheet" href="https://elements.trippay.io/styles.css"></link> </head></html>
Javascript
Section titled “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
Section titled “Komponentit”Maksukomponentin avulla voit ilmoittaa TripPaylle, että matkustaja haluaa ostaa jotakin, sekä näiden tuotteiden säännöt ja hinnat.
Widgetillä on yksi pakollinen attribuutti:
id
Sen 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.