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