Web komponenty

Web komponenty sú štandard, ktorý vám umožňuje integrovať celé JavaScript funkcie do vašej webovej stránky bez znalosti programovania. Vďaka tejto skvelej technológii môžete jednoducho vložiť Wink cestovný inventár s minimálnou námahou. Tento článok vás prevedie našou kolekciou web komponentov a ukáže vám, ako ich používať.

Vloženie Wink

Existujú tri veci, ktoré musíte zahrnúť do každej stránky, kde chcete zobraziť jeden z našich web komponentov.

Zahrňte náš štýl.
Zahrňte náš Javascript.
Zahrňte náš aplikačný loader.

Štýl

Zahrňte naše CSS štýly do hlavičky vášho dokumentu.

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
</html>

Javascript

Zahrňte náš Javascript na konci vášho dokumentu. (Odporúčame tesne pred koncovým tagom body).

<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 web komponenty.

Komponenty

Nižšie si prečítajte o našej knižnici komponentov.

Aplikačný loader

Loader je zodpovedný za udržiavanie stavu a riadenie interakcie medzi našimi komponentmi. (Zahrňte ho pod náš Javascript).

<html>
  <body>
    <wink-app-loader
      client-id="TU ZADAJTE SVOJ CLIENT ID"
      configuration-id="TU ZADAJTE SVOJ KONFIGURAČNÝ ID"
    ></wink-app-loader>
  </body>
</html>

Content loader

Content loader je jadrom našej knižnice web komponentov. Je zodpovedný za zobrazovanie vášho inventára (karty, mriežky, mapy).

Dostupné atribúty:

layout
id
sort

Atribút sort je dostupný iba keď je layout RANKED a nechcete použiť existujúcu radenú mriežku. V týchto prípadoch nechajte id prázdne.

Dostupné typy layoutu:

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>

Ukážky nájdete pre karty, mriežky a mapy.

Vyhľadávanie (Lookup)

Lookup funguje skvele spolu s jednou z vašich radených mriežok. Umožňuje používateľom vyhľadávať hotel a destináciu a mriežka sa aktualizuje podľa výsledkov vyhľadávania.

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>

Lookup web component — *Lookup web komponent*

Kliknutím na komponent vyššie sa otvorí modálne okno, kde môžete zadať destináciu alebo hotel, ktorý hľadáte.

Lookup modal — *Lookup modálne okno s výsledkami*

Itinerár

Tlačidlo itinerára zobrazuje aktuálny itinerár na tlačidle. Po kliknutí sa zobrazí plný výber itinerára ako modálne okno.

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>

Itinerary web komponent

Kliknutím na tlačidlo vyššie sa otvorí modálne okno, kde môžete aktualizovať svoj itinerár.

Search modal — *Výber itinerára ako modálne okno*

Vyhľadávanie (Search)

Search je tlačidlo s ikonou itinerára. Po kliknutí sa zobrazí plný výber itinerára ako modálne okno.

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>

Search web component — *Search web komponent*

Kliknutím na tlačidlo vyššie sa otvorí modálne okno, kde môžete aktualizovať svoj 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>

Itinerary formweb component — *Itinerary form web komponent*

Zmena itinerára v ktoromkoľvek z našich itinerárnych komponentov spustí udalosť aktualizácie itinerára pre akýkoľvek inventár, ktorý máte momentálne zobrazený na stránke.

Účet

Tlačidlo účtu vám umožňuje pridať Wink autentifikáciu na vašu stránku.

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>

Account web component — *Tlačidlo účtu web komponent*

Kliknutím na tlačidlo, keď je používateľ neautentifikovaný, bude používateľ presmerovaný na autentifikáciu. Keď je používateľ autentifikovaný, zobrazí sa ikona profilu používateľa.

Kliknutím na tlačidlo sa otvorí používateľské rozbaľovacie menu.

Vloženie TripPay

Existujú dve veci, ktoré musíte zahrnúť do každej stránky, kde chcete použiť TripPay platobný web komponent.

Zahrňte náš štýl.
Zahrňte náš Javascript.

Štýl

Zahrňte naše CSS štýly do hlavičky vášho dokumentu.

<html>
  <head>
    <link rel="stylesheet" href="https://elements.trippay.io/styles.css"></link>
  </head>
</html>

Javascript

Zahrňte náš Javascript na konci vášho dokumentu. (Odporúčame tesne pred koncovým tagom body).

<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 web komponenty.

Komponenty

Platba

Platobný komponent umožňuje informovať TripPay, že cestujúci chce niečo kúpiť, a nastavuje pravidlá a ceny týchto položiek.

Widget vyžaduje jeden povinný atribút:

id Identifikátor rezervačnej zmluvy, ktorú chcete vykonať.

<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

Widget pripraví zmluvu na vykonanie a zobrazí používateľovi platobné údaje (Obrázok 1) na dokončenie rezervácie.

Payment details — *Obrázok 1. Ukážka platobného formulára*

Chyby

Ak sa pri vkladaní jedného z našich web komponentov, či už na WinkLinks alebo na vašej vlastnej webovej stránke, zobrazí chybové hlásenie, mohlo sa stať niekoľko vecí:

Dostupnosť

Inventár už nemusí byť dostupný. Prejdite do Wink Studio a skontrolujte, či je stav “karty” dostupný. Ak nie je, zobrazí sa červená farba. V takom prípade môžete počkať, možno dodávateľ opäť sprístupní inventár, alebo ho odstrániť zo svojho zoznamu.

Odstránené

Inventár mohol byť odstránený. Prejdite do Wink Studio a skontrolujte, či je stav “karty” dostupný. Ak nie je, zobrazí sa červená farba. V takom prípade môžete počkať, možno dodávateľ opäť sprístupní inventár, alebo ho odstrániť zo svojho zoznamu.

Prispôsobenie

Možno ste omylom odstránili prispôsobenie, ktoré ste definovali pre svoj inventár. Uistite sa, že prispôsobenie je stále dostupné a nastavte nové, ak nejaké chýba.

Aplikácia

Toto je určené iba pre webových vývojárov. Ak ste omylom odstránili Aplikáciu, čím sa klientské ID stalo nedostupným, vytvorte novú aplikáciu a použite nové klientské ID na vloženie našich web komponentov.