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

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

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

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

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

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

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

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.

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

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>

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.

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

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.

Účet

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.

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

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

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

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

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:

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*