Skip to content
Academy

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

Уеб компонентите са стандарт, който ви позволява да интегрирате цели 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 “Търсене”

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

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

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

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

Маршрут

Section titled “Маршрут”

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

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

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

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

Търсене

Section titled “Търсене”

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

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

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

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 “Приложение”

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