Veebikomponendid
Veebikomponendidon standard, mis võimaldab teil integreerida oma veebisaidile terveid Javascripti funktsioone ilma kodeerimisoskusteta. Tänu sellele lahedale tehnoloogiale saate Winki reisiinventari väga vähese vaevaga manustada. See artikkel tutvustab teile meie veebikomponentide kollektsiooni ja näitab, kuidas neid kasutada.
Manusta silmapilgutus
Section titled “Manusta silmapilgutus”Igale lehele, kus soovite kuvada ühte meie veebikomponentidest, tuleb lisada kolm asja.
- Lisa meie stiilileht.
- Lisage meie Javascript.
- Lisage meie rakenduste laadur.
Stiilileht
Section titled “Stiilileht”Lisage meie CSS-stiilid oma dokumendi päisesse.
<html> <head> <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link> </head></html>
Javascripti
Section titled “Javascripti”Lisage meie Javascript oma dokumendi lõppu. (Soovitame vahetult lõputeksti kohal).
<html> <body> <script src="https://elements.wink.travel/elements.js" type="module" defer></script> </body></html>
Teie sait on nüüd valmis ja saab meie veebikomponente kuvada.
Komponendid
Section titled “Komponendid”Loe meie komponentide teegi kohta allpool.
Rakenduste laadur
Section titled “Rakenduste laadur”Laadur vastutab oleku hoidmise ja meie komponentide vahelise interaktsiooni haldamise eest.Lisage see meie JavaScripti alla).
<html> <body> <wink-app-loader client-id="YOUR CLIENT ID GOES HERE" configuration-id="YOUR CUSTOMIZATION ID GOES HERE" ></wink-app-loader> </body></html>
Sisu laadur
Section titled “Sisu laadur”Sisulaadur on meie veebikomponentide teegi keskmes. See vastutab teie inventari (kaartide, ruudustike, kaartide) kuvamise eest.
Saadaval olevad atribuudid:
- paigutus
- ID
- sorteeri
Atribuutsort
on saadaval ainult siis, kui paigutus onRANKED
ja te ei soovi kasutada olemasolevat järjestatud ruudustikku. Sellistel juhtudel jätkeid
tühi.
Saadaval olevad paigutuse tüübid:
AD_BANNER
MAP
HOTEL
GUEST_ROOM
MEETING_ROOM
SPA
RESTAURANT
ACTIVITY
ATTRACTION
PLACE
ADD_ON
LIST
SEARCH
RANKED
Saadaval olevad sortimistüübid:
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äidiseid leiab aadressiltkaardid,võrgudjakaardid.
Otsing
Section titled “Otsing”Otsing töötab suurepäraselt koos ühe teie järjestatud ruudustikuga. See võimaldab teie kasutajatel otsida hotelli ja sihtkohta ning ruudustik värskendatakse vastavalt nende otsingutulemustele.
<html> <body> <wink-lookup></wink-lookup> </body></html>
Ülaltoodud komponendile klõpsamine avab modaalakna, kuhu saate sisestada otsitava sihtkoha või hotelli.
Reisiplaan
Section titled “Reisiplaan”Reisiplaani nupp kuvab nupul praeguse reisiplaani. Sellele klõpsamisel kuvatakse modaalaknas täielik reisiplaani valija.
<html> <body> <wink-itinerary></wink-itinerary> </body></html>
Ülaltoodud nupule klõpsamine avab modaalakna, mis võimaldab teil oma teekonda uuendada.
Otsing on teekonna valija ikooniga nupp. Sellele klõpsamisel kuvatakse kogu teekonna valija modaalaknas.
<html> <body> <wink-search></wink-search> </body></html>
Ülaltoodud nupule klõpsamine avab modaalakna, mis võimaldab teil oma teekonda uuendada.
Reisiplaani vorm
Section titled “Reisiplaani vorm”Reisikava komponent kuvab reisikava vormi, millega kasutajad saavad suhelda.
<html> <body> <wink-itinerary-form></wink-itinerary-form> </body></html>
Reisikava muutmine mis tahes meie reisikava komponendis käivitab reisikava uuendamise sündmuse mis tahes lehel kuvatavas inventaris.
Konto nupp võimaldab teil oma saidile Winki autentimise lisada.
<html> <body> <wink-account></wink-account> </body></html>
Nupule klõpsamine, kui kasutaja pole autentitud, suunatakse autentimisele. Kui kasutaja on autentitud, kuvatakse kasutaja profiiliikoon.
Nupule klõpsates avaneb kasutajapõhine rippmenüü.
TripPay manustamine
Section titled “TripPay manustamine”Igale lehele, kus soovite TripPay makseveebikomponenti kasutada, peate lisama kaks asja.
- Lisa meie stiilileht.
- Lisage meie Javascript.
Stiilileht
Section titled “Stiilileht”Lisage meie CSS-stiilid oma dokumendi päisesse.
<html> <head> <link rel="stylesheet" href="https://elements.trippay.io/styles.css"></link> </head></html>
Javascripti
Section titled “Javascripti”Lisage meie Javascript oma dokumendi lõppu. (Soovitame vahetult lõputeksti kohal).
<html> <body> <script src="https://elements.trippay.io/elements.js" type="module" defer></script> </body></html>
Teie sait on nüüd valmis ja saab meie veebikomponente kuvada.
Komponendid
Section titled “Komponendid”Maksekomponent võimaldab teil TripPay’le teada anda, et reisija soovib midagi osta, ning nende esemete reeglid ja hinnad.
Vidinal on üks kohustuslik atribuut:
id
Broneerimislepingu identifikaator, mida soovite täita.
<html> <body> <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay> </body></html>
Vidin valmistab lepingu täitmiseks ette ja kuvab makseandmed(Joonis 1)kasutajale broneeringu lõpuleviimiseks.