Přeskočit na obsah
Academy

Webové komponenty

Web Components je standard, který vám umožňuje integrovat celé JavaScript funkce do vašeho webu, aniž byste museli umět programovat. Díky této skvělé technologii můžete snadno vložit Wink cestovní inventář. Tento článek vás provede naší kolekcí webových komponent a ukáže vám, jak je používat.

Vložení Wink

Section titled “Vložení Wink”

Existují tři věci, které musíte zahrnout na jakoukoli stránku, kde chcete zobrazit jednu z našich webových komponent.

  1. Zahrňte náš stylopis.
  2. Zahrňte náš Javascript.
  3. Zahrňte náš aplikační loader.

Stylopis

Section titled “Stylopis”

Zahrňte náš CSS stylopis do hlavičky vašeho 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 konec vašeho dokumentu. (Doporučujeme těsně nad koncovým tagem </body>).

<html>
  <body>
    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>
  </body>
</html>

Váš web je nyní připraven a schopen zobrazovat naše webové komponenty.

Komponenty

Section titled “Komponenty”

Níže si přečtěte o naší knihovně komponent.

Aplikační loader

Section titled “Aplikační loader”

Loader je zodpovědný za udržování stavu a správu interakce mezi našimi komponentami. (Zahrňte jej pod náš Javascript).

<html>
  <body>
    <wink-app-loader
      client-id="ZDE VLOŽTE SVÉ CLIENT ID"
      configuration-id="ZDE VLOŽTE SVÉ KONFIGURAČNÍ ID"
    ></wink-app-loader>
  </body>
</html>

Content loader

Section titled “Content loader”

Content loader je srdcem naší knihovny webových komponent. Je zodpovědný za zobrazování vašeho inventáře (karty, mřížky, mapy).

Dostupné atributy:

  • layout
  • id
  • sort

Atribut sort je dostupný pouze pokud je layout RANKED a nechcete použít existující řazenou mřížku. V těchto případech nechte id prázdné.

Dostupné typy layoutu:

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

Ukázky najdete pro karty, mřížky a mapy.

Lookup

Section titled “Lookup”

Lookup skvěle funguje společně s jednou z vašich řazených mřížek. Umožňuje uživatelům vyhledávat hotel a destinaci a mřížka se aktualizuje podle výsledků vyhledávání.

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>
Lookup web component
Lookup webová komponenta

Kliknutím na komponentu výše se otevře modální okno, kde můžete zadat destinaci nebo hotel, který hledáte.

Lookup modal
Lookup modální okno s výsledky

Itinerary

Section titled “Itinerary”

Tlačítko itineráře zobrazuje aktuální itinerář na tlačítku. Po kliknutí se zobrazí plný výběr itineráře jako modální okno.

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>
Itinerary web component
Itinerary webová komponenta

Kliknutím na tlačítko výše se otevře modální okno, kde můžete aktualizovat svůj itinerář.

Search modal
Výběr itineráře jako modální okno
Section titled “Search”

Search je tlačítko pouze s ikonou pro výběr itineráře. Po kliknutí se zobrazí plný výběr itineráře jako modální okno.

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>
Search web component
Search webová komponenta

Kliknutím na tlačítko výše se otevře modální okno, kde můžete aktualizovat svůj itinerář.

Search modal
Výběr itineráře jako modální okno

Itinerary form

Section titled “Itinerary form”

Komponenta itineráře zobrazuje formulář itineráře, se kterým mohou uživatelé interagovat.

<html>
  <body>
    <wink-itinerary-form></wink-itinerary-form>
  </body>
</html>
Itinerary formweb component
Itinerary formulář webová komponenta

Změna itineráře v jakékoli naší komponentě itineráře spustí událost aktualizace itineráře pro jakýkoli inventář, který máte aktuálně zobrazený na stránce.

Account

Section titled “Account”

Tlačítko účtu vám umožňuje přidat Wink autentizaci na váš web.

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>
Account web component
Tlačítko účtu webová komponenta

Kliknutím na tlačítko, pokud uživatel není autentizován, bude přesměrován k autentizaci. Pokud je uživatel autentizován, zobrazí se ikona profilu uživatele.

Account button when authenticated
Tlačítko účtu (autentizováno) webová komponenta

Po kliknutí na tlačítko se otevře uživatelský dropdown specifický pro uživatele.

Account button when authenticated
Tlačítko účtu (otevřené) webová komponenta

Vložení TripPay

Section titled “Vložení TripPay”

Existují dvě věci, které musíte zahrnout na jakoukoli stránku, kde chcete použít TripPay platební webovou komponentu.

  1. Zahrňte náš stylopis.
  2. Zahrňte náš Javascript.

Stylopis

Section titled “Stylopis”

Zahrňte náš CSS stylopis do hlavičky vašeho 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 konec vašeho dokumentu. (Doporučujeme těsně nad koncovým tagem <body>).

<html>
  <body>
    <script src="https://elements.trippay.io/elements.js" type="module" defer></script>
  </body>
</html>

Váš web je nyní připraven a schopen zobrazovat naše webové komponenty.

Komponenty

Section titled “Komponenty”

Platba

Section titled “Platba”

Platební komponenta umožňuje informovat TripPay, že cestovatel chce něco zakoupit, a nastavuje pravidla a ceny těchto položek.

Widget má jeden povinný atribut:

  • id Identifikátor rezervační smlouvy, kterou chcete provést.
<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

Widget připraví smlouvu k provedení a zobrazí uživateli platební údaje (Obrázek 1) pro dokončení rezervace.

Payment details
Obrázek 1. Ukázkový platební formulář

Chyby

Section titled “Chyby”

Pokud se při vkládání jedné z našich webových komponent setkáte s chybovou zprávou, ať už na WinkLinks nebo na vašem vlastním webu, může být několik důvodů:

Dostupnost

Section titled “Dostupnost”

Inventář nemusí být již dostupný. Přejděte do Wink Studio a zkontrolujte, zda je stav “karty” dostupný. Pokud není, zobrazí se červeně. V takovém případě můžete počkat, zda dodavatel znovu zpřístupní, nebo ji odeberte ze svého seznamu.

Odebráno

Section titled “Odebráno”

Inventář mohl být odstraněn. Přejděte do Wink Studio a zkontrolujte, zda je stav “karty” dostupný. Pokud není, zobrazí se červeně. V takovém případě můžete počkat, zda dodavatel znovu zpřístupní, nebo ji odeberte ze svého seznamu.

Přizpůsobení

Section titled “Přizpůsobení”

Možná jste omylem odstranili přizpůsobení, které jste definovali pro svůj inventář. Ujistěte se, že přizpůsobení je stále dostupné, a pokud chybí, nastavte nové.

Aplikace

Section titled “Aplikace”

Toto je určeno pouze pro webové vývojáře. Pokud jste omylem odstranili Aplikaci, čímž se klientské ID stalo nedostupným, vytvořte novou aplikaci a použijte nové klientské ID pro vložení našich Web Components.