Tovább a tartalomhoz

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.

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

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

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>

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.

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

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>

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.

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>
Keresés webes komponens
Keresés webes komponens

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

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
Útiterv webes komponens

A fenti gombra kattintva megnyílik egy modális ablak, amely lehetővé teszi az útiterv frissítését.

Modális keresés
Útvonalválasztó modálisként

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>
Keresés webes összetevője
Keresés webes összetevője

A fenti gombra kattintva megnyílik egy modális ablak, amely lehetővé teszi az útiterv frissítését.

Modális keresés
Útvonalválasztó modálisként

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.

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.

Fiók gomb hitelesítés után
Fiók gomb (hitelesített) webes komponens

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

Fiók gomb hitelesítés után
Fiók gomb (megnyitás) webes komponens

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

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

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>

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.

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.

Fizetési adatok
1. ábra. Minta fizetési űrlap