Pāriet uz saturu

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.

Jebkurā lapā, kurā vēlaties parādīt kādu no mūsu tīmekļa komponentiem, jāiekļauj trīs lietas.

  1. Iekļaujiet mūsu stila lapu.
  2. Iekļaujiet mūsu Javascript.
  3. Iekļaujiet mūsu lietojumprogrammu ielādētāju.

Iekļaujiet mūsu CSS stilus dokumenta galvenē.

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

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.

Lasiet par mūsu komponentu bibliotēku zemāk.

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 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ūtssortir pieejams tikai tad, ja izkārtojums irRANKEDun jūs nevēlaties izmantot esošu ranžētu režģi. Šādos gadījumos atstājietidtukš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ēš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>
Meklēšanas tīmekļa komponents
Meklēšanas tīmekļa komponents

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.

Meklēšanas modālais logs
Meklēšanas modālais logs ar rezultātiem

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>
Maršruta tīmekļa komponents
Maršruta tīmekļa komponents

Noklikšķinot uz pogas iepriekš, tiek atvērts modālais logs, kas ļauj atjaunināt maršrutu.

Meklēšanas modālais logs
Maršruta atlasītājs kā modāls

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>
Meklēšanas tīmekļa komponents
Meklēšanas tīmekļa komponents

Noklikšķinot uz pogas iepriekš, tiek atvērts modālais logs, kas ļauj atjaunināt maršrutu.

Meklēšanas modālais logs
Maršruta atlasītājs kā modāls

Maršruta komponents parāda maršruta veidlapu, ar kuru lietotāji var mijiedarboties.

<html>
<body>
<wink-itinerary-form></wink-itinerary-form>
</body>
</html>
Maršruta veidlapas tīmekļa komponents
Maršruta veidlapas tīmekļa komponents

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>
Konta tīmekļa komponents
Konta pogas tīmekļa komponents

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.

Konta poga pēc autentifikācijas
Konta pogas (autentificēta) tīmekļa komponents

Noklikšķinot uz pogas, tiek atvērta lietotājam specifiska nolaižamā izvēlne.

Konta poga pēc autentifikācijas
Konta pogas (atvērt) tīmekļa komponents

Jebkurā lapā, kurā vēlaties izmantot TripPay maksājumu tīmekļa komponentu, ir jāiekļauj divas lietas.

  1. Iekļaujiet mūsu stila lapu.
  2. Iekļaujiet mūsu Javascript.

Iekļaujiet mūsu CSS stilus dokumenta galvenē.

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

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.

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:

  • idVē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.

Maksājuma informācija
1. attēls. Maksājuma veidlapas paraugs