Webové komponenty
Webové komponentyje štandard, ktorý vám umožňuje integrovať celé funkcie Javascriptu do vašej webovej stránky bez znalosti kódovania. Vďaka tejto skvelej technológii môžete bez problémov vložiť cestovné ponuky Wink. Tento článok vás prevedie našou kolekciou webových komponentov a ukáže vám, ako ich používať.
Vložiť žmurknutie
Section titled “Vložiť žmurknutie”Na každej stránke, kde chcete zobraziť jeden z našich webových komponentov, musíte zahrnúť tri veci.
- Pridajte náš štýlový hárok.
- Zahrňte náš Javascript.
- Zahrňte náš zavádzač aplikácií.
Štýlový hárok
Section titled “Štýlový hárok”Vložte naše CSS štýly do hlavičky dokumentu.
<html> <head> <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link> </head></html>
Javascript
Section titled “Javascript”Vložte náš Javascript do spodnej časti dokumentu. (Odporúčame hneď nad koncovú značku tela).
<html> <body> <script src="https://elements.wink.travel/elements.js" type="module" defer></script> </body></html>
Vaša stránka je teraz pripravená a schopná zobrazovať naše webové komponenty.
Komponenty
Section titled “Komponenty”Prečítajte si o našej knižnici komponentov nižšie.
Zavádzač aplikácií
Section titled “Zavádzač aplikácií”Zavádzač je zodpovedný za udržiavanie stavu a riadenie interakcie medzi našimi komponentmi.Vložte ho pod náš Javascript).
<html> <body> <wink-app-loader client-id="YOUR CLIENT ID GOES HERE" configuration-id="YOUR CUSTOMIZATION ID GOES HERE" ></wink-app-loader> </body></html>
Načítavač obsahu
Section titled “Načítavač obsahu”Zavádzač obsahu je srdcom našej knižnice webových komponentov. Je zodpovedný za zobrazenie vášho inventára (kariet, mriežok, máp).
Dostupné atribúty:
- rozloženie
- identifikátor
- zoradiť
Atribútsort
je k dispozícii iba vtedy, keď je rozloženieRANKED
a nechcete použiť existujúcu zoradenú mriežku. V týchto prípadoch nechajteid
prázdny.
Dostupné typy rozloženia:
AD_BANNER
MAP
HOTEL
GUEST_ROOM
MEETING_ROOM
SPA
RESTAURANT
ACTIVITY
ATTRACTION
PLACE
ADD_ON
LIST
SEARCH
RANKED
Dostupné typy triedenia:
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>
Vzorky možno nájsť prekarty,mriežkyamapy.
Vyhľadávanie
Section titled “Vyhľadávanie”Vyhľadávanie funguje skvele v kombinácii s jednou z vašich hodnotených mriežok. Umožňuje vašim používateľom vyhľadávať hotely a destinácie a mriežka sa aktualizuje v reakcii na výsledok vyhľadávania.
<html> <body> <wink-lookup></wink-lookup> </body></html>
Kliknutím na komponent vyššie sa otvorí modálne okno, v ktorom môžete zadať hľadanú destináciu alebo hotel.
Itinerár
Section titled “Itinerár”Tlačidlo itinerára zobrazuje aktuálny itinerár. Po kliknutí naň sa zobrazí celý výber itinerára ako modálne okno.
<html> <body> <wink-itinerary></wink-itinerary> </body></html>
Kliknutím na tlačidlo vyššie sa otvorí modálne okno, ktoré vám umožní aktualizovať váš itinerár.
Hľadať
Section titled “Hľadať”Hľadať je tlačidlo, ktoré sa nachádza iba v ikone vo výbere itinerára. Po kliknutí naň sa zobrazí celý výber itinerára ako modálne okno.
<html> <body> <wink-search></wink-search> </body></html>
Kliknutím na tlačidlo vyššie sa otvorí modálne okno, ktoré vám umožní aktualizovať váš itinerár.
Formulár itinerára
Section titled “Formulár itinerára”Komponent itinerára zobrazuje formulár itinerára, s ktorým môžu používatelia interagovať.
<html> <body> <wink-itinerary-form></wink-itinerary-form> </body></html>
Zmenou itinerára v ktorejkoľvek z našich súčastí itinerára sa spustí udalosť aktualizácie itinerára pre akýkoľvek inventár, ktorý máte aktuálne zobrazený na stránke.
Tlačidlo účtu vám umožňuje pridať na vašu stránku overenie Wink.
<html> <body> <wink-account></wink-account> </body></html>
Kliknutím na tlačidlo, keď je používateľ neoverený, bude presmerovaný na overenie. Po overení sa zobrazí ikona jeho profilu.
Po kliknutí na tlačidlo sa otvorí rozbaľovacia ponuka špecifická pre daného používateľa.
Vložiť TripPay
Section titled “Vložiť TripPay”Na každej stránke, kde chcete použiť webový komponent platieb TripPay, musíte zahrnúť dve veci.
- Pridajte náš štýlový hárok.
- Zahrňte náš Javascript.
Štýlový hárok
Section titled “Štýlový hárok”Vložte naše CSS štýly do hlavičky dokumentu.
<html> <head> <link rel="stylesheet" href="https://elements.trippay.io/styles.css"></link> </head></html>
Javascript
Section titled “Javascript”Vložte náš Javascript do spodnej časti dokumentu. (Odporúčame hneď nad koncovú značku tela).
<html> <body> <script src="https://elements.trippay.io/elements.js" type="module" defer></script> </body></html>
Vaša stránka je teraz pripravená a schopná zobrazovať naše webové komponenty.
Komponenty
Section titled “Komponenty”Platba
Section titled “Platba”Platobná zložka vám umožňuje informovať TripPay o tom, že si cestovateľ chce niečo kúpiť, a o pravidlách a cenách pre tieto položky.
Widget má jeden povinný atribút:
id
Identifikátor rezervačnej zmluvy, ktorú chcete podpísať.
<html> <body> <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay> </body></html>
Widget pripraví zmluvu na realizáciu a zobrazí podrobnosti o platbe(Obrázok 1)používateľovi na dokončenie rezervácie.