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

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

Вставить Подмигивание

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

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

Таблица стилей

Включите наши стили 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

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

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