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

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

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

Поиск

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

<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 — это кнопка с иконкой для выбора маршрута. При клике открывается полный выбор маршрута в модальном окне.

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

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

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

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

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

<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, так и на вашем собственном сайте, вы видите сообщение об ошибке, возможно, произошли следующие проблемы:

Доступность

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

Удалено

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

Настройка

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

Приложение

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