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í

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

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

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

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

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

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í

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

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

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

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

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.

Účet

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.

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

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

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

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

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:

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.