Skip to content

Уеб компоненти

Уеб компонентие стандарт, който ви позволява да интегрирате цели Javascript функции във вашия уебсайт, без да знаете как да програмирате. Благодарение на тази страхотна технология, тя ви позволява да вграждате Wink travel inventory с много малко усилия. Тази статия ви превежда през нашата колекция от уеб компоненти и ви показва как да ги използвате.

Има три неща, които трябва да включите във всяка страница, където искате да покажете един от нашите уеб компоненти.

  1. Включете нашия стилов лист.
  2. Включете нашия Javascript.
  3. Включете нашия зареждащ механизъм за приложения.

Включете нашите CSS стилове в заглавната част на документа си.

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

Включете нашия Javascript в долната част на документа си. (Препоръчваме непосредствено над крайния таг на тялото).

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

Вашият сайт вече е готов и може да показва нашите уеб компоненти.

Прочетете за нашата библиотека с компоненти по-долу.

Зареждач на приложения

Section titled “Зареждач на приложения”

Зареждащият модул е ​​отговорен за поддържането на състоянието и управлението на взаимодействието между нашите компоненти.Включете го под нашия Javascript).

<html>
<body>
<wink-app-loader
client-id="YOUR CLIENT ID GOES HERE"
configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
></wink-app-loader>
</body>
</html>

Зареждане на съдържание

Section titled “Зареждане на съдържание”

Зареждащият инструмент за съдържание е в основата на нашата библиотека с уеб компоненти. Той е отговорен за показването на вашия инвентар (карти, решетки, карти).

Налични атрибути:

  • оформление
  • идентификатор
  • сортиране

Атрибутътsortе налично само когато оформлението еRANKEDи не искате да използвате съществуваща класирана мрежа. В тези случаи оставетеidпразен.

Налични типове оформление:

  • AD_BANNER
  • MAP
  • HOTEL
  • GUEST_ROOM
  • MEETING_ROOM
  • SPA
  • RESTAURANT
  • ACTIVITY
  • ATTRACTION
  • PLACE
  • ADD_ON
  • LIST
  • SEARCH
  • RANKED

Налични видове сортиране:

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

Могат да се намерят образци закарти,решеткиикарти.

Търсенето работи чудесно заедно с една от вашите класирани мрежи. То позволява на потребителите ви да търсят хотел и дестинация, а мрежата се актуализира в отговор на резултата от търсенето им.

<html>
<body>
<wink-lookup></wink-lookup>
</body>
</html>
Уеб компонент за търсене
Уеб компонент за търсене

Щракването върху компонента по-горе отваря модален прозорец, който ви позволява да въведете дестинацията или хотела, който търсите.

Модален прозорец за търсене
Модален прозорец за търсене с резултати

Бутонът за маршрут показва текущия маршрут. Когато щракнете върху него, пълният инструмент за избор на маршрут се показва като модален прозорец.

<html>
<body>
<wink-itinerary></wink-itinerary>
</body>
</html>
Уеб компонент за маршрут
Уеб компонент за маршрут

Щракването върху бутона по-горе отваря модален прозорец, който ви позволява да актуализирате маршрута си.

Модален прозорец за търсене
Избор на маршрут като модален прозорец

Търсенето е бутон, който се показва само с икона в инструмента за избор на маршрут. Когато щракнете върху него, пълният инструмент за избор на маршрут се показва като модален прозорец.

<html>
<body>
<wink-search></wink-search>
</body>
</html>
Компонент за търсене в мрежата
Компонент за търсене в мрежата

Щракването върху бутона по-горе отваря модален прозорец, който ви позволява да актуализирате маршрута си.

Модален прозорец за търсене
Избор на маршрут като модален прозорец

Компонентът за маршрут показва формуляр за маршрут, с който потребителите могат да взаимодействат.

<html>
<body>
<wink-itinerary-form></wink-itinerary-form>
</body>
</html>
Уеб компонент на формуляр за маршрут
Уеб компонент на формуляр за маршрут

Чрез промяна на маршрута, във всеки от нашите компоненти за маршрут, се задейства събитието за актуализиране на маршрута за всеки инвентар, който в момента се показва на страницата.

Бутонът за акаунт ви позволява да добавите Wink удостоверяване към вашия сайт.

<html>
<body>
<wink-account></wink-account>
</body>
</html>
Уеб компонент на акаунта
Уеб компонент на бутона за акаунт

Щракването върху бутона, когато потребителят не е удостоверен, ще го пренасочи за удостоверяване. Когато потребителят бъде удостоверен, се показва иконата на потребителския му профил.

Бутон за акаунт при удостоверяване
Уеб компонент на бутон за акаунт (удостоверен)

Когато щракнете върху бутона, се отваря падащото меню, специфично за потребителя.

Бутон за акаунт при удостоверяване
Уеб компонент на бутон за акаунт (отваряне)

Има две неща, които трябва да включите във всяка страница, където искате да използвате уеб компонента за плащане на TripPay.

  1. Включете нашия стилов лист.
  2. Включете нашия Javascript.

Включете нашите CSS стилове в заглавната част на документа си.

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

Включете нашия Javascript в долната част на документа си. (Препоръчваме непосредствено над крайния таг на тялото).

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

Вашият сайт вече е готов и може да показва нашите уеб компоненти.

Компонентът за плащане ви позволява да информирате TripPay, че пътникът иска да закупи нещо, както и за правилата и цените за тези артикули.

Има един задължителен атрибут за джаджата:

  • idИдентификаторът на договора за резервация, който искате да бъде изпълнен.
<html>
<body>
<trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
</body>
</html>

Джаджата подготвя договора за изпълнение и показва данни за плащането(Фигура 1)на потребителя, за да финализира резервацията.

Данни за плащане
Фигура 1. Примерен формуляр за плащане