Skip to content
Wink

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

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

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

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

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

  1. Включете нашия стилов файл.
  2. Включете нашия Javascript.
  3. Включете нашия application loader.

Стилов файл

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 “Компоненти”

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

Application loader

Section titled “Application loader”

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

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

Content loader

Section titled “Content loader”

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

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

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

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

Lookup

Section titled “Lookup”

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

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

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

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

Itinerary

Section titled “Itinerary”

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

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

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

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

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

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

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

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

Itinerary form

Section titled “Itinerary form”

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

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

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

Account

Section titled “Account”

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

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

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

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

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

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

Вграждане на 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 “Наличност”

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

Премахнат

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

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

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

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

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

Application

Section titled “Application”

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