Webkomponensek

Webkomponensekegy olyan szabvány, amely lehetővé teszi teljes JavaScript funkciók integrálását a webhelyedbe anélkül, hogy tudnál programozni.

Ennek a klassz technológiának köszönhetően nagyon egyszerűen beágyazhatod a Wink utazási leltárt. Ez a cikk végigvezet a webes komponenseink gyűjteményén, és bemutatja, hogyan kell használni őket.

Beágyazott kacsintás

Három dolgot kell belefoglalnod minden olyan oldalba, ahol meg szeretnéd jeleníteni az egyik webkomponensünket.

Mellékeld a stíluslapunkat.
Tartalmazza a Javascriptünket.
Vegye fel az alkalmazásbetöltőnket.

Stíluslap

Illeszd be a CSS stílusainkat a dokumentumod fejlécébe.

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

Javascript

Illeszd be a Javascript kódunkat a dokumentumod aljára. (Közvetlenül a törzscímke fölé javasoljuk).

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

A webhelyed most már készen áll, és képes megjeleníteni a webes komponenseinket.

Alkatrészek

Olvasson többet az összetevőkönyvtárunkról alább.

Alkalmazásbetöltő

A betöltő felelős az állapot fenntartásáért és az összetevőink közötti interakció kezeléséért.Illeszd be a JavaScriptünk alá).

<html>
  <body>
    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

Tartalombetöltő

A tartalombetöltő a webes komponenskönyvtárunk lelke. Ez felelős a készleted (kártyák, rácsok, térképek) megjelenítéséért.

Elérhető attribútumok:

elrendezés
azonosító
fajta

Az attribútumsortcsak akkor érhető el, ha az elrendezésRANKEDés nem szeretne egy meglévő rangsorolt rácsot használni. Ezekben az esetekben hagyjaidüres.

Elérhető elrendezési 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ák találhatók a következőhöz:kártyák,rácsokéstérképek.

Keresés

A Lookup remekül működik együtt az egyik rangsorolt rácsoddal. Lehetővé teszi a felhasználók számára, hogy szállodákat és úti célokat keressenek, és a rács frissül a keresési eredményüknek megfelelően.

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

A fenti összetevőre kattintva megnyílik egy modális ablak, amelyben beírhatja a keresett úti célt vagy szállodát.

Modális keresés — *Eredményekkel rendelkező keresőmodális ablak*

Útiterv

Az útiterv gomb az aktuális útitervet mutatja. Ha rákattintasz, a teljes útiterv-választó modális ablakban jelenik meg.

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

Útiterv webes komponens

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ó ikonos gombja. Ha rákattint, a teljes útiterv-választó modális ablakban 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.

Útvonalterv űrlap

Az útiterv-összetevő egy útiterv-űrlapot jelenít meg, amellyel a felhasználók interakcióba léphetnek.

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

Útiterv űrlapwebes komponens — *Útiterv űrlap webes komponens*

Az útiterv bármelyik útiterv-összetevőnkben történő módosításával az útiterv-frissítési esemény aktiválódik az oldalon jelenleg megjelenített készletben.

Fiók

A fiók gombbal Wink hitelesítést adhatsz hozzá a webhelyedhez.

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

Fiók webes összetevője — *Fiók gomb webes komponens*

A gombra kattintva, amikor a felhasználó nincs hitelesítve, a rendszer átirányítja a felhasználót a hitelesítéshez.

A felhasználó hitelesítése után megjelenik a felhasználói profil ikonja.

Amikor a gombra kattint, megnyílik a felhasználóra jellemző legördülő menü.

TripPay beágyazása

Két dolgot kell belefoglalnod minden olyan oldalba, ahol használni szeretnéd a TripPay fizetési webes komponenst.

Mellékeld a stíluslapunkat.
Tartalmazza a Javascriptünket.

Stíluslap

Illeszd be a CSS stílusainkat a dokumentumod fejlécébe.

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

Javascript

Illeszd be a Javascriptünket a dokumentumod aljára. (Közvetlenül a törzscímke fölé javasoljuk).

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

A webhelyed most már készen áll, és képes megjeleníteni a webes komponenseinket.

Alkatrészek

Fizetés

A fizetési komponens lehetővé teszi, hogy tájékoztasd a TripPay-t arról, hogy az utazó vásárolni szeretne valamit, valamint az adott tételek szabályairól és árairól.

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

idA végrehajtani kívánt foglalási szerződés azonosítója.

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

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