Skip to content
Wink

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

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

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

Section titled “Вграждане на Wink”

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

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

Стилов лист

Section titled “Стилов лист”

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

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

Javascript

Section titled “Javascript”

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

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

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

Компоненти

Section titled “Компоненти”

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

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

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

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

<html>
  <body>
    <wink-app-loader
      client-id="ВАШИЯТ CLIENT ID ТУК"
      configuration-id="ВАШИЯТ CUSTOMIZATION ID ТУК"
    ></wink-app-loader>
  </body>
</html>

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

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

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

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

  • layout
  • id
  • sort

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

Налични типове layout:

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

Примери могат да се намерят за карти, мрежи и карти.

Търсене

Section titled “Търсене”

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

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>
Lookup web component
Lookup уеб компонент

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

Lookup modal
Lookup модален прозорец с резултати

Маршрут

Section titled “Маршрут”

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

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>
Itinerary web component
Itinerary уеб компонент

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

Search modal
Избор на маршрут като модален прозорец

Търсене

Section titled “Търсене”

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

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>
Search web component
Search уеб компонент

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

Search modal
Избор на маршрут като модален прозорец

Форма за маршрут

Section titled “Форма за маршрут”

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

<html>
  <body>
    <wink-itinerary-form></wink-itinerary-form>
  </body>
</html>
Itinerary formweb component
Форма за маршрут уеб компонент

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

Акаунт

Section titled “Акаунт”

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

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>
Account web component
Бутон за акаунт уеб компонент

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

Account button when authenticated
Бутон за акаунт (удостоверен) уеб компонент

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

Account button when authenticated
Бутон за акаунт (отворен) уеб компонент

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

Section titled “Вграждане на TripPay”

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

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

Стилов лист

Section titled “Стилов лист”

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

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

Javascript

Section titled “Javascript”

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

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

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

Компоненти

Section titled “Компоненти”

Плащане

Section titled “Плащане”

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

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

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

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

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

Грешки

Section titled “Грешки”

Ако получите съобщение за грешка при вграждане на някой от нашите уеб компоненти, било то в WinkLinks или на ваш собствен уебсайт, има няколко неща, които може да са се объркали:

Наличност

Section titled “Наличност”

Инвентарът може вече да не е наличен. Отидете в Wink Studio и проверете дали статусът на “картата” е наличен. Ако не е, ще се покаже в червено. В този случай можете да изчакате и може би доставчикът ще го направи отново наличен или да го премахнете от списъка си.

Премахнат

Section titled “Премахнат”

Инвентарът може да е бил премахнат. Отидете в Wink Studio и проверете дали статусът на “картата” е наличен. Ако не е, ще се покаже в червено. В този случай можете да изчакате и може би доставчикът ще го направи отново наличен или да го премахнете от списъка си.

Персонализация

Section titled “Персонализация”

Може случайно да сте премахнали персонализацията, която сте задали заедно с вашия инвентар. Уверете се, че персонализацията все още е налична и задайте нова, ако липсва.

Приложение

Section titled “Приложение”

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