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

Веб-компоненты — это стандарт, который позволяет интегрировать целые функции на 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>

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

Маршрут

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

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

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

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

Модальное окно поиска — *Выбор маршрута в модальном окне*

Поиск (Search)

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

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

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

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

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

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

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

Аккаунт

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

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

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

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

Встраивание 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) для завершения бронирования.

Ошибки

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

Доступность

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

Удалено

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

Настройка

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

Приложение

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