Preskočiť na obsah

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ť.

Na každej stránke, kde chcete zobraziť jeden z našich webových komponentov, musíte zahrnúť tri veci.

  1. Pridajte náš štýlový hárok.
  2. Zahrňte náš Javascript.
  3. Zahrňte náš zavádzač aplikácií.

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>

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.

Prečítajte si o našej knižnici komponentov nižšie.

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>

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útsortje k dispozícii iba vtedy, keď je rozloženieRANKEDa nechcete použiť existujúcu zoradenú mriežku. V týchto prípadoch nechajteidprá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 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>
Vyhľadávací webový komponent
Vyhľadávací webový komponent

Kliknutím na komponent vyššie sa otvorí modálne okno, v ktorom môžete zadať hľadanú destináciu alebo hotel.

Modálne vyhľadávanie
Vyhľadávacie modálne okno s výsledkami

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>
Webový komponent itinerára
Webový komponent itinerára

Kliknutím na tlačidlo vyššie sa otvorí modálne okno, ktoré vám umožní aktualizovať váš itinerár.

Modálne vyhľadávanie
Výber itinerára ako modálne okno

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>
Vyhľadávací webový komponent
Vyhľadávací webový komponent

Kliknutím na tlačidlo vyššie sa otvorí modálne okno, ktoré vám umožní aktualizovať váš itinerár.

Modálne vyhľadávanie
Výber itinerára ako modálne okno

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>
Webový komponent formulára itinerára
Webový komponent formulára itinerára

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>
Webový komponent účtu
Webový komponent tlačidla účtu

Kliknutím na tlačidlo, keď je používateľ neoverený, bude presmerovaný na overenie. Po overení sa zobrazí ikona jeho profilu.

Tlačidlo účtu po overení
Webový komponent tlačidla účtu (overený)

Po kliknutí na tlačidlo sa otvorí rozbaľovacia ponuka špecifická pre daného používateľa.

Tlačidlo účtu po overení
Webový komponent tlačidla účtu (otvoriť)

Na každej stránke, kde chcete použiť webový komponent platieb TripPay, musíte zahrnúť dve veci.

  1. Pridajte náš štýlový hárok.
  2. Zahrňte náš Javascript.

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>

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.

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:

  • idIdentifiká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.

Platobné údaje
Obrázok 1. Vzorový platobný formulár