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
Szekció neve “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
Szekció neve “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
Szekció neve “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
Szekció neve “Alkatrészek”Olvasson többet az összetevőkönyvtárunkról alább.
Alkalmazásbetöltő
Szekció neve “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ő
Szekció neve “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útumsort
csak 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
Szekció neve “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.
Útiterv
Szekció neve “Ú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>
A fenti gombra kattintva megnyílik egy modális ablak, amely lehetővé teszi az útiterv frissítését.
Keresés
Szekció neve “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
Szekció neve “Ú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>
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>
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
Szekció neve “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
Szekció neve “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
Szekció neve “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
Szekció neve “Alkatrészek”Fizetés
Szekció neve “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:
id
A 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.