Webové komponenty
Webové komponentyje standard, který vám umožňuje integrovat celé funkce Javascriptu do vašeho webu bez znalosti kódování. Díky této skvělé technologii můžete bez námahy vkládat cestovní inventář Wink. Tento článek vás provede naší kolekcí webových komponent a ukáže vám, jak je používat.
Vložit mrknutí
Section titled “Vložit mrknutí”Na každou stránku, kde chcete zobrazit jednu z našich webových komponent, musíte zahrnout tři věci.
- Přidejte náš stylový list.
- Zahrňte náš Javascript.
- Zahrňte náš zavaděč aplikací.
Stylový list
Section titled “Stylový list”Vložte naše CSS styly do záhlaví 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 spodní části dokumentu. (Doporučujeme hned nad koncovou značkou těla).
<html> <body> <script src="https://elements.wink.travel/elements.js" type="module" defer></script> </body></html>
Vaše stránky jsou nyní připraveny a mohou zobrazovat naše webové komponenty.
Součásti
Section titled “Součásti”Přečtěte si níže o naší knihovně komponent.
Zavaděč aplikací
Section titled “Zavaděč aplikací”Zavaděč je zodpovědný za udržování stavu a správu interakce mezi našimi komponentami.Vložte to 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>
Zavaděč obsahu
Section titled “Zavaděč obsahu”Zavaděč obsahu je srdcem naší knihovny webových komponent. Je zodpovědný za zobrazení vašeho inventáře (karet, mřížek, map).
Dostupné atributy:
- rozvržení
- identifikační číslo
- třídit
Atributsort
je k dispozici pouze tehdy, když je rozvrženíRANKED
a nechcete použít existující řazenou mřížku. V těchto případech ponechteid
prázdný.
Dostupné typy rozvržení:
AD_BANNER
MAP
HOTEL
GUEST_ROOM
MEETING_ROOM
SPA
RESTAURANT
ACTIVITY
ATTRACTION
PLACE
ADD_ON
LIST
SEARCH
RANKED
Dostupné typy řazení:
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 lze nalézt prokarty,mřížkyamapy.
Vyhledávání
Section titled “Vyhledávání”Vyhledávání funguje skvěle v kombinaci s jednou z vašich řazených mřížek. Umožňuje uživatelům vyhledávat hotely a destinace a mřížka se aktualizuje v reakci na výsledek jejich vyhledávání.
<html> <body> <wink-lookup></wink-lookup> </body></html>
Kliknutím na výše uvedenou komponentu se otevře modální okno, kde můžete zadat destinaci nebo hotel, který hledáte.
Itinerář
Section titled “Itinerář”Tlačítko itineráře zobrazuje aktuální itinerář. Po kliknutí na něj se zobrazí celý výběr itineráře jako modální okno.
<html> <body> <wink-itinerary></wink-itinerary> </body></html>
Kliknutím na tlačítko výše se otevře modální okno, které vám umožní aktualizovat váš itinerář.
Vyhledávání
Section titled “Vyhledávání”Hledat je tlačítko ve výběru itineráře, které slouží pouze jako ikona. Po kliknutí na něj se zobrazí celý výběr itineráře jako modální okno.
<html> <body> <wink-search></wink-search> </body></html>
Kliknutím na tlačítko výše se otevře modální okno, které vám umožní aktualizovat váš itinerář.
Formulář itineráře
Section titled “Formulář itineráře”Komponenta itineráře zobrazuje formulář itineráře, se kterým mohou uživatelé interagovat.
<html> <body> <wink-itinerary-form></wink-itinerary-form> </body></html>
Změnou itineráře v kterékoli z našich komponent itineráře se spustí událost aktualizace itineráře pro jakýkoli inventář, který máte aktuálně zobrazený na stránce.
Tlačítko účtu vám umožňuje přidat na váš web ověřování Wink.
<html> <body> <wink-account></wink-account> </body></html>
Kliknutím na tlačítko, pokud je uživatel neověřený, bude přesměrován k ověření. Po ověření se zobrazí ikona jeho profilu.
Po kliknutí na tlačítko se otevře rozbalovací nabídka specifická pro daného uživatele.
Vložit TripPay
Section titled “Vložit TripPay”Na každé stránce, kde chcete používat webovou komponentu pro platby TripPay, musíte zahrnout dvě věci.
- Přidejte náš stylový list.
- Zahrňte náš Javascript.
Stylový list
Section titled “Stylový list”Vložte naše CSS styly do záhlaví 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 spodní části dokumentu. (Doporučujeme hned nad koncovou značkou těla).
<html> <body> <script src="https://elements.trippay.io/elements.js" type="module" defer></script> </body></html>
Vaše stránky jsou nyní připraveny a mohou zobrazovat naše webové komponenty.
Součásti
Section titled “Součásti”Platba
Section titled “Platba”Platební komponenta vám umožňuje informovat TripPay, že si cestovatel chce něco zakoupit, a také o pravidlech a cenách pro tyto položky.
Widget má jeden povinný atribut:
id
Identifikátor rezervační smlouvy, kterou chcete podepsat.
<html> <body> <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay> </body></html>
Widget připraví smlouvu k provedení a zobrazí platební údaje(Obrázek 1)uživateli k dokončení rezervace.