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 programozni. 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 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 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ényre 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. Kattintásra 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, amely lehetővé teszi az útiterv frissítését.

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

Keresés

A keresés az útitervválasztó ikon-gombja. Kattintásra 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, 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>

Itinerary formweb component — *Útiterv űrlap webkomponens*

Az útiterv bármelyik komponensben 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 a Wink hitelesítés hozzáadását az oldalához.

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

Account web component — *Fiók gomb webkomponens*

A gombra kattintva, ha a felhasználó nincs hitelesítve, átirányítja a hitelesítéshez. Ha a felhasználó hitelesítve van, megjeleníti a felhasználó profil ikonját.

A gombra kattintva 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á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.

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