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

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

Вграждане на Wink

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

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

Стилов лист

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

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

Javascript

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

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

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

Компоненти

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

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

Зареждащият модул е отговорен за поддържането на състоянието и управлението на взаимодействието между нашите компоненти.Включете го под нашия 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>

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

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

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

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

Атрибутът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

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

Включете нашия стилов лист.
Включете нашия 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)на потребителя, за да финализира резервацията.