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 oldalra, ahol meg szeretné jeleníteni valamelyik webkomponensünket.

Illessze be a stíluslapunkat.
Illessze be a JavaScriptünket.
Illessze be 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. (Javasoljuk közvetlenül a záró body 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 keresés remekül működik egy rangsorolt rács mellett. Lehetővé teszi a felhasználók számára, hogy szállodát és úti célt 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, ahol 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 útiterv vá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, amely lehetővé teszi az útiterv frissítését.

Keresés

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

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

A fenti gombra kattintva megnyílik egy modális ablak, amely lehetővé teszi az útiterv frissítésé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ő módosítása 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>

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

Ha a felhasználó nincs hitelesítve, a gombra kattintás továbbirányítja a hitelesítéshez. 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 oldalra, ahol használni szeretné a TripPay fizetési webkomponenst.

Illessze be a stíluslapunkat.
Illessze be 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. (Javasoljuk közvetlenül a záró body 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 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üzenetet kap, amikor beágyaz egy webkomponenst, akár WinkLinks-en, akár a saját webhelyén, néhány dolog történhetett:

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 használja az új ügyfélazonosítót a Webkomponensek beágyazásához.