Перейти к содержимому

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

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

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

  1. Включите нашу таблицу стилей.
  2. Включите наш Javascript.
  3. Включите наш загрузчик приложений.

Включите наши стили CSS в заголовок вашего документа.

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

Включите наш 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="YOUR CLIENT ID GOES HERE"
configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
></wink-app-loader>
</body>
</html>

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

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

  • макет
  • идентификатор
  • сортировать

Атрибутsortдоступно только при макетеRANKEDи вы не хотите использовать существующую ранжированную сетку. Для этих случаев оставьтеid пустой.

Доступные типы макетов:

  • 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>
Веб-компонент поиска
Веб-компонент поиска

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

Модальный поиск
Модальный поиск с результатами

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

<html>
<body>
<wink-itinerary></wink-itinerary>
</body>
</html>
Веб-компонент маршрута
Веб-компонент маршрута

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

Поиск модальный
Модальный выбор маршрута

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

<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, необходимо включить две вещи.

  1. Включите нашу таблицу стилей.
  2. Включите наш Javascript.

Включите наши стили CSS в заголовок вашего документа.

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

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

Реквизиты для оплаты
Рисунок 1. Образец платежной формы