Skip to content
Academy

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

Уеб компонентите са стандарт, който ви позволява да интегрирате цели 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="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></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 за вграждане на нашите уеб компоненти.