Přeskočit na obsah

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.

Na každou stránku, kde chcete zobrazit jednu z našich webových komponent, musíte zahrnout tři věci.

  1. Přidejte náš stylový list.
  2. Zahrňte náš Javascript.
  3. Zahrňte náš zavaděč aplikací.

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>

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.

Přečtěte si níže o naší knihovně komponent.

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

Atributsortje k dispozici pouze tehdy, když je rozvrženíRANKEDa nechcete použít existující řazenou mřížku. V těchto případech ponechteidprá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í 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>
Vyhledávací webová komponenta
Vyhledávací webová komponenta

Kliknutím na výše uvedenou komponentu se otevře modální okno, kde můžete zadat destinaci nebo hotel, který hledáte.

Vyhledávací modální okno
Vyhledávací modální okno s výsledky

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>
Webová komponenta itineráře
Webová komponenta itineráře

Kliknutím na tlačítko výše se otevře modální okno, které vám umožní aktualizovat váš itinerář.

Modální vyhledávání
Výběr itineráře jako modální okno

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>
Vyhledávací webová komponenta
Vyhledávací webová komponenta

Kliknutím na tlačítko výše se otevře modální okno, které vám umožní aktualizovat váš itinerář.

Modální vyhledávání
Výběr itineráře jako modální okno

Komponenta itineráře zobrazuje formulář itineráře, se kterým mohou uživatelé interagovat.

<html>
<body>
<wink-itinerary-form></wink-itinerary-form>
</body>
</html>
Webová komponenta formuláře itineráře
Webová komponenta formuláře itineráře

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>
Webová komponenta účtu
Webová komponenta tlačítka účtu

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.

Tlačítko účtu po ověření
Webová komponenta tlačítka účtu (ověřená)

Po kliknutí na tlačítko se otevře rozbalovací nabídka specifická pro daného uživatele.

Tlačítko účtu po ověření
Webová komponenta tlačítka účtu (otevřít)

Na každé stránce, kde chcete používat webovou komponentu pro platby TripPay, musíte zahrnout dvě věci.

  1. Přidejte náš stylový list.
  2. Zahrňte náš Javascript.

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>

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.

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:

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

Platební údaje
Obrázek 1. Ukázkový platební formulář