Веб-компоненты

Веб-компоненты — это стандарт, который позволяет интегрировать целые функции на Javascript в ваш сайт без необходимости программировать. Благодаря этой классной технологии вы можете встроить инвентарь Wink для путешествий с минимальными усилиями. В этой статье мы расскажем о нашей коллекции веб-компонентов и покажем, как их использовать.

Встраивание Wink

Для любой страницы, на которой вы хотите отобразить один из наших веб-компонентов, необходимо включить три элемента.

Подключить наш файл стилей.
Подключить наш Javascript.
Подключить загрузчик приложения.

Файл стилей

Подключите наши CSS-стили в секции head вашего документа.

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

Javascript

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

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

Теперь ваш сайт готов отображать наши веб-компоненты.

Компоненты

Ниже вы найдете описание нашей библиотеки компонентов.

Загрузчик приложения

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

<html>
  <body>
    <wink-app-loader
      client-id="ВАШ CLIENT ID ЗДЕСЬ"
      configuration-id="ВАШ ID НАСТРОЙКИ ЗДЕСЬ"
    ></wink-app-loader>
  </body>
</html>

Загрузчик контента

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

Доступные атрибуты:

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>

Примеры можно найти для карточек, сеток и карт.

Поиск

Поиск отлично работает вместе с одной из ваших ранжированных сеток. Он позволяет пользователям искать отели и направления, а сетка обновляется в ответ на результаты поиска.

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>

Lookup web component — *Веб-компонент Lookup*

Клик по компоненту выше открывает модальное окно, в котором можно ввести направление или отель для поиска.

Lookup modal — *Модальное окно Lookup с результатами*

Маршрут

Кнопка маршрута показывает текущий маршрут на кнопке. При клике открывается полный выбор маршрута в модальном окне.

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>

Веб-компонент маршрута

Клик по кнопке выше открывает модальное окно, позволяющее обновить маршрут.

Search modal — *Выбор маршрута в модальном окне*

Поиск (Search)

Search — это кнопка с иконкой для выбора маршрута. При клике открывается полный выбор маршрута в модальном окне.

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>

Search web component — *Веб-компонент Search*

Клик по кнопке выше открывает модальное окно, позволяющее обновить маршрут.

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

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

<html>
  <body>
    <wink-itinerary-form></wink-itinerary-form>
  </body>
</html>

Itinerary formweb component — *Веб-компонент формы маршрута*

Изменение маршрута в любом из наших компонентов маршрута вызывает событие обновления маршрута для любого инвентаря, который в данный момент отображается на странице.

Аккаунт

Кнопка аккаунта позволяет добавить аутентификацию Wink на ваш сайт.

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>

Account web component — *Веб-компонент кнопки аккаунта*

При клике на кнопку, если пользователь не аутентифицирован, его перенаправит на страницу аутентификации. Если пользователь аутентифицирован, отображается иконка профиля пользователя.

При клике на кнопку открывается выпадающее меню, специфичное для пользователя.

Встраивание TripPay

Для любой страницы, на которой вы хотите использовать веб-компонент оплаты TripPay, необходимо включить два элемента.

Подключить наш файл стилей.
Подключить наш Javascript.

Файл стилей

Подключите наши CSS-стили в секции head вашего документа.

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

Javascript

Подключите наш Javascript внизу вашего документа. (Рекомендуем сразу перед закрывающим тегом <body>).

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

Теперь ваш сайт готов отображать наши веб-компоненты.

Компоненты

Оплата

Компонент оплаты позволяет сообщить TripPay, что путешественник хочет что-то купить, а также правила и цены для этих товаров.

Для виджета требуется один обязательный атрибут:

id Идентификатор контракта бронирования, который вы хотите выполнить.

<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

Виджет подготавливает контракт к выполнению и отображает пользователю детали оплаты (Рисунок 1) для завершения бронирования.

Payment details — *Рисунок 1. Пример формы оплаты*

Ошибки

Если при встраивании одного из наших веб-компонентов, будь то на WinkLinks или на вашем собственном сайте, вы видите сообщение об ошибке, возможно, произошли следующие проблемы:

Доступность

Инвентарь может быть больше недоступен. Перейдите в Wink Studio и проверьте статус “карточки”. Если он неактивен, она будет выделена красным. В таком случае вы можете подождать, возможно, поставщик снова сделает её доступной, или удалить её из вашего списка.

Удалено

Инвентарь мог быть удалён. Перейдите в Wink Studio и проверьте статус “карточки”. Если он неактивен, она будет выделена красным. В таком случае вы можете подождать, возможно, поставщик снова сделает её доступной, или удалить её из вашего списка.

Настройка

Возможно, вы случайно удалили настройку, которую определили для вашего инвентаря. Убедитесь, что настройка всё ещё доступна, и установите новую, если она отсутствует.

Приложение

Это касается только веб-разработчиков. Если вы случайно удалили Приложение, из-за чего client ID стал недоступен, создайте новое приложение и используйте новый client ID для встраивания наших веб-компонентов.