Webkomponensek

A Webkomponensek egy szabvány, amely lehetővé teszi, hogy teljes JavaScript funkciókat integráljon a weboldalába anélkül, hogy tudna 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ánljuk 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

A Lookup remekül működik egy rangsorolt rácsával együtt. 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>

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

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

Keresés

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

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

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>

Az útiterv bármelyik komponensünkben történő megváltoztatása kiváltja az útiterv frissítési eseményt az oldalon jelenleg megjelenített készlethez.

Fiók

A fiók gomb lehetővé teszi, hogy Wink hitelesítést adjon hozzá a webhelyéhez.

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

Fiók webkomponens — *Fiók gomb webkomponens*

Ha a gombra kattint, amikor a felhasználó nincs hitelesítve, 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, megnyitja a felhasználó-specifikus legördülő menüt.

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ánljuk 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 értesítse a TripPay-t arról, 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 hajtani.

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

Hibák

Ha hibaüzenettel találkozik, 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 Wink 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 Wink 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 társított 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.