Preskočiť na obsah
Wink

Webové komponenty

Web Components je š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 webových komponentov a ukáže vám, ako ich používať.

Vloženie Wink

Section titled “Vloženie Wink”

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

  1. Zahrnúť náš štýl.
  2. Zahrnúť náš Javascript.
  3. Zahrnúť náš aplikačný loader.

Štýl

Section titled “Š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

Section titled “Javascript”

Zahrňte náš Javascript na spodok vášho dokumentu. (Odporúčame tesne nad 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 webové komponenty.

Komponenty

Section titled “Komponenty”

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

Aplikačný loader

Section titled “Aplikačný loader”

Loader je zodpovedný za udržiavanie stavu a správu 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

Section titled “Content loader”

Content loader je jadrom našej knižnice webových 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.

Lookup

Section titled “Lookup”

Lookup funguje skvele spolu s jednou z vašich radených mriežok. Umožňuje vašim 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 webový 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

Itinerary

Section titled “Itinerary”

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 component
Itinerary webový 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
Section titled “Search”

Search je tlačidlo iba s ikonou výberu 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 webový 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

Itinerary form

Section titled “Itinerary form”

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 webový komponent

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

Account

Section titled “Account”

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 webový 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.

Account button when authenticated
Tlačidlo účtu (autentifikované) webový komponent

Kliknutím na tlačidlo sa otvorí používateľsky špecifický rozbaľovací zoznam.

Account button when authenticated
Tlačidlo účtu (otvorené) webový komponent

Vloženie TripPay

Section titled “Vloženie TripPay”

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

  1. Zahrnúť náš štýl.
  2. Zahrnúť náš Javascript.

Štýl

Section titled “Š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

Section titled “Javascript”

Zahrňte náš Javascript na spodok vášho dokumentu. (Odporúčame tesne nad 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 webové komponenty.

Komponenty

Section titled “Komponenty”

Platba

Section titled “Platba”

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

Widget má 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 podrobnosti o platbe (Obrázok 1), aby mohol dokončiť rezerváciu.

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

Chyby

Section titled “Chyby”

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

Dostupnosť

Section titled “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é

Section titled “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

Section titled “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 ak chýba, nastavte nové.

Aplikácia

Section titled “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 webových komponentov.