Tīmekļa komponenti
Tīmekļa komponentiir standarts, kas ļauj integrēt visas Javascript funkcijas jūsu tīmekļa vietnē, nezinot, kā kodēt. Pateicoties šai lieliskajai tehnoloģijai, tā ļauj bez liekas piepūles iegult Wink ceļojumu inventāru. Šajā rakstā jūs iepazīstinās ar mūsu tīmekļa komponentu kolekciju un parādīs, kā tos izmantot.
Iegult Wink
Section titled “Iegult Wink”Jebkurā lapā, kurā vēlaties parādīt kādu no mūsu tīmekļa komponentiem, jāiekļauj trīs lietas.
- Iekļaujiet mūsu stila lapu.
- Iekļaujiet mūsu Javascript.
- Iekļaujiet mūsu lietojumprogrammu ielādētāju.
Stilu lapa
Section titled “Stilu lapa”Iekļaujiet mūsu CSS stilus dokumenta galvenē.
<html> <head> <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link> </head></html>
Javascript
Section titled “Javascript”Iekļaujiet mūsu Javascript sava dokumenta apakšdaļā. (Iesakām tieši virs beigu pamatteksta taga).
<html> <body> <script src="https://elements.wink.travel/elements.js" type="module" defer></script> </body></html>
Jūsu vietne tagad ir gatava un var parādīt mūsu tīmekļa komponentus.
Sastāvdaļas
Section titled “Sastāvdaļas”Lasiet par mūsu komponentu bibliotēku zemāk.
Lietojumprogrammu ielādētājs
Section titled “Lietojumprogrammu ielādētājs”Ielādētājs ir atbildīgs par stāvokļa saglabāšanu un mijiedarbības pārvaldību starp mūsu komponentiem.Iekļaujiet to zem mūsu Javascript).
<html> <body> <wink-app-loader client-id="YOUR CLIENT ID GOES HERE" configuration-id="YOUR CUSTOMIZATION ID GOES HERE" ></wink-app-loader> </body></html>
Satura ielādētājs
Section titled “Satura ielādētājs”Satura ielādētājs ir mūsu tīmekļa komponentu bibliotēkas sirds. Tas ir atbildīgs par jūsu inventāra (karšu, režģu, karšu) attēlošanu.
Pieejamie atribūti:
- izkārtojums
- id
- kārtot
Atribūtssort
ir pieejams tikai tad, ja izkārtojums irRANKED
un jūs nevēlaties izmantot esošu ranžētu režģi. Šādos gadījumos atstājietid
tukšs.
Pieejamie izkārtojuma veidi:
AD_BANNER
MAP
HOTEL
GUEST_ROOM
MEETING_ROOM
SPA
RESTAURANT
ACTIVITY
ATTRACTION
PLACE
ADD_ON
LIST
SEARCH
RANKED
Pieejamie kārtošanas veidi:
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>
Paraugus var atrast parkārtis,režģiunkartes.
Meklēt
Section titled “Meklēt”Meklēšana lieliski darbojas kopā ar vienu no jūsu sarindotajiem režģiem. Tā ļauj lietotājiem meklēt viesnīcu un galamērķi, un režģis tiek atjaunināts atbilstoši viņu meklēšanas rezultātam.
<html> <body> <wink-lookup></wink-lookup> </body></html>
Noklikšķinot uz iepriekš redzamās komponentes, tiek atvērts modālais logs, kurā varat ierakstīt meklējamo galamērķi vai viesnīcu.
Maršruts
Section titled “Maršruts”Maršruta poga rāda pašreizējo maršrutu uz pogas. Noklikšķinot uz tās, pilns maršruta atlasītājs tiek parādīts kā modāls logs.
<html> <body> <wink-itinerary></wink-itinerary> </body></html>
Noklikšķinot uz pogas iepriekš, tiek atvērts modālais logs, kas ļauj atjaunināt maršrutu.
Meklēt
Section titled “Meklēt”Meklēšana ir maršruta atlasītāja poga, kas sastāv tikai no ikonas. Noklikšķinot uz tās, pilns maršruta atlasītājs tiek parādīts kā modālais logs.
<html> <body> <wink-search></wink-search> </body></html>
Noklikšķinot uz pogas iepriekš, tiek atvērts modālais logs, kas ļauj atjaunināt maršrutu.
Maršruta veidlapa
Section titled “Maršruta veidlapa”Maršruta komponents parāda maršruta veidlapu, ar kuru lietotāji var mijiedarboties.
<html> <body> <wink-itinerary-form></wink-itinerary-form> </body></html>
Mainot maršrutu jebkurā no mūsu maršruta komponentiem, tiek aktivizēts maršruta atjaunināšanas notikums jebkuram inventāram, kas pašlaik tiek rādīts lapā.
Konta poga ļauj vietnei pievienot Wink autentifikāciju.
<html> <body> <wink-account></wink-account> </body></html>
Noklikšķinot uz pogas, kad lietotājs nav autentificēts, lietotājs tiks novirzīts uz autentifikācijas lapu. Kad lietotājs ir autentificēts, tiek parādīta lietotāja profila ikona.
Noklikšķinot uz pogas, tiek atvērta lietotājam specifiska nolaižamā izvēlne.
Iegult TripPay
Section titled “Iegult TripPay”Jebkurā lapā, kurā vēlaties izmantot TripPay maksājumu tīmekļa komponentu, ir jāiekļauj divas lietas.
- Iekļaujiet mūsu stila lapu.
- Iekļaujiet mūsu Javascript.
Stilu lapa
Section titled “Stilu lapa”Iekļaujiet mūsu CSS stilus dokumenta galvenē.
<html> <head> <link rel="stylesheet" href="https://elements.trippay.io/styles.css"></link> </head></html>
Javascript
Section titled “Javascript”Iekļaujiet mūsu Javascript sava dokumenta apakšdaļā. (Iesakām tieši virs beigu pamatteksta taga).
<html> <body> <script src="https://elements.trippay.io/elements.js" type="module" defer></script> </body></html>
Jūsu vietne tagad ir gatava un var parādīt mūsu tīmekļa komponentus.
Sastāvdaļas
Section titled “Sastāvdaļas”Maksājums
Section titled “Maksājums”Maksājuma komponents ļauj informēt TripPay, ka ceļotājs vēlas kaut ko iegādāties, kā arī šo preču noteikumus un cenas.
Logrīkam ir viens obligāts atribūts:
id
Vēlamā rezervēšanas līguma identifikators.
<html> <body> <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay> </body></html>
Logrīks sagatavo līgumu izpildei un parāda maksājuma informāciju(1. attēls)lietotājam, lai pabeigtu rezervāciju.