Перейти до вмісту

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

Веб-компоненти– це стандарт, який дозволяє інтегрувати всі функції Javascript на ваш вебсайт без знання програмування. Завдяки цій чудовій технології ви можете вбудовувати туристичний інвентар Wink без особливих зусиль. Ця стаття проведе вас через нашу колекцію вебкомпонентів і покаже, як їх використовувати.

Є три речі, які ви повинні включити на будь-яку сторінку, де ви хочете відобразити один із наших веб-компонентів.

  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>

Зразки можна знайти длякартки,сіткиікарти.

Пошук чудово працює разом з однією з ваших ранжованих сіток. Він дозволяє вашим користувачам шукати готелі та напрямки, а сітка оновлюється у відповідь на результат пошуку.

<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>

:::примітка Щоб дізнатися, як створити договір бронюванняid, прочитайте посібник:Інтеграція з TripPay. :::

Віджет готує договір до виконання та відображає платіжні реквізити(Рисунок 1)користувачеві для завершення бронювання.

Платіжні реквізити
Рисунок 1. Зразок платіжної форми