Skip to content
Wink

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

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

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

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

Премахнат

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

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

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

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

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

Приложение

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

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