Webové komponenty

Web Components je standard, který vám umožňuje integrovat celé funkce v JavaScriptu 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

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

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

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

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

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

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ŮJ CLIENT ID"
      configuration-id="ZDE VLOŽTE SVŮJ KONFIGURAČNÍ ID"
    ></wink-app-loader>
  </body>
</html>

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

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

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 webová komponenta

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

Search

Search je tlačítko pouze s ikonou výběru 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ář.

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

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 — *Account button webová komponenta*

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

Po kliknutí na tlačítko se otevře uživatelský rozbalovací seznam.

Vložení TripPay

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

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

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

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

Payment

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

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

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

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í

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 nastavte nové, pokud nějaké chybí.

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.