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

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

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

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

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

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

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

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

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

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>

Maršruta tīmekļa komponents

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

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

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ā.

Konts

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.

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

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

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

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

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

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:

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*