Webkomponensek

A Webkomponensek egy szabvány, amely lehetővé teszi, hogy teljes JavaScript funkciókat integráljon a weboldalába anélkül, hogy tudnia kellene kódolni. Ennek a menő technológiának köszönhetően nagyon egyszerűen beágyazhatja a Wink utazási készletét. Ez a cikk végigvezeti Önt webkomponens-gyűjteményünkön, és megmutatja, hogyan használhatja őket.

Wink beágyazása

Három dolgot kell beillesztenie bármely oldalba, ahol meg szeretné jeleníteni valamelyik webkomponensünket.

Tartalmazza a stíluslapunkat.
Tartalmazza a JavaScriptünket.
Tartalmazza az alkalmazás betöltőjét.

Stíluslap

Illessze be CSS stílusainkat a dokumentum fej részébe.

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

Javascript

Illessze be JavaScriptünket a dokumentum aljára. (Ajánlott közvetlenül a </body> zárótag elé).

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

Az oldala most már készen áll, és képes megjeleníteni webkomponenseinket.

Komponensek

Olvassa el az alábbiakban a komponenskönyvtárunkról szóló információkat.

Alkalmazás betöltő

A betöltő felelős az állapot megőrzéséért és a komponenseink közötti interakció kezeléséért. (Illessze be a JavaScriptünk alá).

<html>
  <body>
    <wink-app-loader
      client-id="AZ ÖN ÜGYFÉL AZONOSÍTÓJA IDE KERÜL"
      configuration-id="AZ ÖN TESTRESZABÁSI AZONOSÍTÓJA IDE KERÜL"
    ></wink-app-loader>
  </body>
</html>

Tartalom betöltő

A tartalom betöltő a webkomponens könyvtárunk szíve. Ez felelős az Ön készletének megjelenítéséért (kártyák, rácsok, térképek).

Elérhető attribútumok:

layout
id
sort

A sort attribútum csak akkor érhető el, ha a layout RANKED, és nem szeretne egy meglévő rangsorolt rácsot használni. Ezekben az esetekben hagyja az id mezőt üresen.

Elérhető layout típusok:

AD_BANNER
MAP
HOTEL
GUEST_ROOM
MEETING_ROOM
SPA
RESTAURANT
ACTIVITY
ATTRACTION
PLACE
ADD_ON
LIST
SEARCH
RANKED

Elérhető rendezési típusok:

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>

Mintákat talál kártyákhoz, rácsokhoz és térképekhez.

Keresés (Lookup)

A Lookup remekül működik együtt valamelyik rangsorolt rácsával. Lehetővé teszi a felhasználók számára, hogy szállodára és úti célra keressenek, és a rács a keresési eredményükre reagálva frissül.

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>

Lookup web component — *Lookup webkomponens*

A fenti komponensre kattintva megnyílik egy modális ablak, ahol beírhatja a keresett úti célt vagy szállodát.

Lookup modal — *Lookup modális eredményekkel*

Útiterv

Az útiterv gomb megjeleníti az aktuális útitervet a gombon. Ha rákattint, a teljes útitervválasztó modálként jelenik meg.

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>

Útiterv webkomponens

A fenti gombra kattintva megnyílik egy modális ablak, amelyben frissítheti az útitervét.

Search modal — *Útitervválasztó modálként*

Keresés

A keresés az útitervválasztó csak ikon gombja. Ha rákattint, a teljes útitervválasztó modálként jelenik meg.

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>

Search web component — *Keresés webkomponens*

A fenti gombra kattintva megnyílik egy modális ablak, amelyben frissítheti az útitervét.

Útiterv űrlap

Az útiterv komponens megjelenít egy útiterv űrlapot, amellyel a felhasználók interakcióba léphetnek.

<html>
  <body>
    <wink-itinerary-form></wink-itinerary-form>
  </body>
</html>

Itinerary formweb component — *Útiterv űrlap webkomponens*

Az útiterv bármelyik komponensében történő változtatás kiváltja az útiterv frissítési eseményt az oldalon jelenleg megjelenített készlet számára.

Fiók

A fiók gomb lehetővé teszi, hogy Wink hitelesítést adjon hozzá az oldalához.

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>

Account web component — *Fiók gomb webkomponens*

Ha a gombra kattint, és a felhasználó nincs hitelesítve, akkor a felhasználót a hitelesítéshez irányítja. Ha a felhasználó hitelesítve van, megjeleníti a felhasználó profil ikonját.

Ha a gombra kattint, megnyílik a felhasználó-specifikus legördülő menü.

TripPay beágyazása

Két dolgot kell beillesztenie bármely oldalba, ahol használni szeretné a TripPay fizetési webkomponenst.

Tartalmazza a stíluslapunkat.
Tartalmazza a JavaScriptünket.

Stíluslap

Illessze be CSS stílusainkat a dokumentum fej részébe.

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

Javascript

Illessze be JavaScriptünket a dokumentum aljára. (Ajánlott közvetlenül a </body> zárótag elé).

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

Az oldala most már készen áll, és képes megjeleníteni webkomponenseinket.

Komponensek

Fizetés

A fizetési komponens lehetővé teszi, hogy a TripPay-nek jelezze, hogy egy utazó vásárolni szeretne valamit, valamint a szabályokat és árakat az adott tételekre.

A widgetnek egy kötelező attribútuma van:

id A foglalási szerződés azonosítója, amelyet végre szeretne hajtatni.

<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

A widget előkészíti a szerződést végrehajtásra, és megjeleníti a fizetési adatokat (1. ábra) a felhasználónak a foglalás véglegesítéséhez.

Payment details — *1. ábra. Minta fizetési űrlap*

Hibák

Ha hibaüzenetet kap, amikor beágyaz egy webkomponenst, akár WinkLinks-en, akár a saját webhelyén, néhány dolog hibás lehet:

Elérhetőség

Lehet, hogy a készlet már nem elérhető. Látogasson el a Studio oldalra, és ellenőrizze, hogy a “kártya” státusza elérhető-e. Ha nem, pirosan jelenik meg. Ilyen esetben várhat, hátha a szolgáltató újra elérhetővé teszi, vagy eltávolíthatja a listájából.

Eltávolítva

Lehet, hogy a készletet eltávolították. Látogasson el a Studio oldalra, és ellenőrizze, hogy a “kártya” státusza elérhető-e. Ha nem, pirosan jelenik meg. Ilyen esetben várhat, hátha a szolgáltató újra elérhetővé teszi, vagy eltávolíthatja a listájából.

Testreszabás

Lehet, hogy véletlenül eltávolította a készletéhez definiált testreszabást. Győződjön meg róla, hogy a testreszabás még elérhető, és állítson be újat, ha hiányzik.

Alkalmazás

Ez csak webfejlesztőknek szól. Ha véletlenül eltávolította az Alkalmazást, így az ügyfélazonosító már nem elérhető, kérjük, hozzon létre egy új alkalmazást, és az új ügyfélazonosítót használja webkomponenseink beágyazásához.