Pāriet uz saturu
Academy

Tīmekļa komponentes

Tīmekļa komponentes ir standarts, kas ļauj integrēt pilnas JavaScript funkcijas jūsu vietnē, nezinot programmēšanu. Pateicoties šai foršajai tehnoloģijai, varat viegli iegult Wink ceļojumu inventāru. Šis raksts soli pa solim iepazīstina ar mūsu tīmekļa komponentu kolekciju un parāda, kā tās izmantot.

Iegult Wink

Section titled “Iegult Wink”

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

  1. Iekļaujiet mūsu stilu lapu.
  2. Iekļaujiet mūsu JavaScript.
  3. Iekļaujiet mūsu lietojumprogrammas ielādētāju.

Stilu lapa

Section titled “Stilu lapa”

Iekļaujiet mūsu CSS stilus dokumenta galvā.

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

JavaScript

Section titled “JavaScript”

Iekļaujiet mūsu JavaScript dokumenta apakšā. (Mēs iesakām tieši pirms beigu body taga).

<html>
  <body>
    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>
  </body>
</html>

Jūsu vietne tagad ir gatava un spēj parādīt mūsu tīmekļa komponentes.

Komponentes

Section titled “Komponentes”

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

Lietojumprogrammas ielādētājs

Section titled “Lietojumprogrammas ielādētājs”

Ielādētājs ir atbildīgs par stāvokļa uzturēšanu un mijiedarbības pārvaldību starp mūsu komponentēm. (Iekļaujiet to zem mūsu JavaScript).

<html>
  <body>
    <wink-app-loader
      client-id="JŪSU KLIENTA ID ŠEIT"
      configuration-id="JŪSU PIELĀGOJUMA ID ŠEIT"
    ></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 (kartiņu, režģu, karšu) attēlošanu.

Pieejamie atribūti:

  • layout
  • id
  • sort

Atribūts sort ir pieejams tikai, ja layout ir RANKED un jūs nevēlaties izmantot esošu rangotu režģi. Šādos gadījumos atstājiet id tukšu.

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 kartiņām, režģiem un kartēm.

Meklēšana

Section titled “Meklēšana”

Meklēšana lieliski darbojas kopā ar kādu no jūsu rangotajiem režģiem. Tā ļauj lietotājiem meklēt viesnīcu un galamērķi, un režģis atjaunojas atbilstoši meklēšanas rezultātiem.

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>
Meklēšanas tīmekļa komponente
Meklēšanas tīmekļa komponente

Noklikšķinot uz iepriekš redzamās komponentes, atveras modāls, kurā varat ierakstīt meklējamo galamērķi vai viesnīcu.

Meklēšanas modāls
Meklēšanas modāls ar rezultātiem

Ceļojuma plāns

Section titled “Ceļojuma plāns”

Ceļojuma plāna poga rāda pašreizējo ceļojuma plānu uz pogas. Noklikšķinot uz tās, pilns ceļojuma plāna izvēlēšanas logs tiek parādīts kā modāls.

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>
Ceļojuma plāna tīmekļa komponente
Ceļojuma plāna tīmekļa komponente

Noklikšķinot uz iepriekš redzamās pogas, atveras modāls, kurā varat atjaunināt savu ceļojuma plānu.

Meklēšanas modāls
Ceļojuma plāna izvēlēšanas logs kā modāls

Meklēšana

Section titled “Meklēšana”

Meklēšana ir tikai ikonas poga ceļojuma plāna izvēlēšanai. Noklikšķinot uz tās, pilns ceļojuma plāna izvēlēšanas logs tiek parādīts kā modāls.

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>
Meklēšanas tīmekļa komponente
Meklēšanas tīmekļa komponente

Noklikšķinot uz iepriekš redzamās pogas, atveras modāls, kurā varat atjaunināt savu ceļojuma plānu.

Meklēšanas modāls
Ceļojuma plāna izvēlēšanas logs kā modāls

Ceļojuma plāna forma

Section titled “Ceļojuma plāna forma”

Ceļojuma plāna komponente attēlo ceļojuma plāna formu, ar kuru lietotāji var mijiedarboties.

<html>
  <body>
    <wink-itinerary-form></wink-itinerary-form>
  </body>
</html>
Ceļojuma plāna formas tīmekļa komponente
Ceļojuma plāna formas tīmekļa komponente

Mainot ceļojuma plānu jebkurā no mūsu ceļojuma plāna komponentēm, tiek izsaukts ceļojuma plāna atjaunināšanas notikums jebkuram inventāram, kas pašlaik tiek rādīts lapā.

Konts

Section titled “Konts”

Kontu poga ļauj pievienot Wink autentifikāciju jūsu vietnei.

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>
Kontu tīmekļa komponente
Kontu pogas tīmekļa komponente

Noklikšķinot uz pogas, ja lietotājs nav autentificējies, tas novirza lietotāju uz autentifikāciju. Kad lietotājs ir autentificējies, tiek parādīts lietotāja profila ikona.

Kontu poga, kad autentificēts
Kontu pogas (autentificēts) tīmekļa komponente

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

Kontu poga, kad autentificēts
Kontu pogas (atvērta) tīmekļa komponente

Iegult TripPay

Section titled “Iegult TripPay”

Ir divas lietas, kas jāiekļauj jebkurā lapā, kur vēlaties izmantot TripPay maksājumu tīmekļa komponenti.

  1. Iekļaujiet mūsu stilu lapu.
  2. Iekļaujiet mūsu JavaScript.

Stilu lapa

Section titled “Stilu lapa”

Iekļaujiet mūsu CSS stilus dokumenta galvā.

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

JavaScript

Section titled “JavaScript”

Iekļaujiet mūsu JavaScript dokumenta apakšā. (Mēs iesakām tieši pirms beigu body taga).

<html>
  <body>
    <script src="https://elements.trippay.io/elements.js" type="module" defer></script>
  </body>
</html>

Jūsu vietne tagad ir gatava un spēj parādīt mūsu tīmekļa komponentes.

Komponentes

Section titled “Komponentes”

Maksājums

Section titled “Maksājums”

Maksājumu komponente ļauj informēt TripPay, ka ceļotājs vēlas kaut ko iegādāties, kā arī noteikt noteikumus un cenas šiem priekšmetiem.

Ir viens obligāts atribūts logrīkā:

  • id Rezervācijas līguma identifikators, kuru vēlaties izpildīt.
<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

Logrīks sagatavo līgumu izpildei un parāda lietotājam maksājuma detaļas (1. attēls), lai pabeigtu rezervāciju.

Maksājuma detaļas
1. attēls. Parauga maksājuma forma

Kļūdas

Section titled “Kļūdas”

Ja, ieguldot kādu no mūsu tīmekļa komponentēm, gan WinkLinks, gan jūsu pašu vietnē, saņemat kļūdas ziņojumu, var būt dažas iespējamās problēmas:

Pieejamība

Section titled “Pieejamība”

Inventārs var vairs nebūt pieejams. Dodieties uz Wink Studio un pārbaudiet, vai “kartiņas” statuss ir pieejams. Ja nav, tas tiks parādīts sarkanā krāsā. Šādā gadījumā varat pagaidīt, varbūt piegādātājs to atkal padara pieejamu, vai arī noņemt to no sava saraksta.

Noņemts

Section titled “Noņemts”

Inventārs var būt noņemts. Dodieties uz Wink Studio un pārbaudiet, vai “kartiņas” statuss ir pieejams. Ja nav, tas tiks parādīts sarkanā krāsā. Šādā gadījumā varat pagaidīt, varbūt piegādātājs to atkal padara pieejamu, vai arī noņemt to no sava saraksta.

Pielāgošana

Section titled “Pielāgošana”

Varbūt nejauši esat noņēmis pielāgošanu, ko esat definējis kopā ar savu inventāru. Pārliecinieties, ka pielāgošana joprojām ir pieejama, un, ja kāda trūkst, iestatiet jaunu.

Lietojumprogramma

Section titled “Lietojumprogramma”

Tas attiecas tikai uz tīmekļa izstrādātājiem. Ja nejauši esat noņēmis Lietojumprogrammu ; un klienta ID vairs nav pieejams, lūdzu, izveidojiet jaunu lietojumprogrammu un izmantojiet jauno klienta ID, lai iegultu mūsu tīmekļa komponentes.