Preskočiť na obsah
Academy

Web 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. Tento článok vás prevedie našou kolekciou web 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 web komponentov.

  1. Zahrňte náš štýl.
  2. Zahrňte náš Javascript.
  3. Zahrňte 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 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

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

Lookup

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

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

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 web 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
Account button 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.

Account button when authenticated
Account button (autentifikovaný) web komponent

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

Account button when authenticated
Account button (otvorené) web 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ý web komponent.

  1. Zahrňte náš štýl.
  2. Zahrňte 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 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

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

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ť, či dodávateľ opäť sprístupní inventár, alebo ho odstrániť zo 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ť, či dodávateľ opäť sprístupní inventár, alebo ho odstrániť zo zoznamu.

Prispôsobenie

Section titled “Prispôsobenie”

Možno ste omylom odstránili prispôsobenie, ktoré ste definovali pre váš 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 Web komponentov.