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

Веб-компоненти — це стандарт, який дозволяє інтегрувати повноцінні функції JavaScript у ваш вебсайт без знання програмування. Завдяки цій крутій технології ви можете легко вбудувати Wink travel inventory. Ця стаття проведе вас по нашій колекції веб-компонентів і покаже, як їх використовувати.

Вбудувати 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="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></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>

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

Пошук

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

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>

Lookup web component — *Веб-компонент пошуку (Lookup)*

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

Lookup modal — *Модальне вікно пошуку з результатами*

Маршрут

Кнопка маршруту показує поточний маршрут на кнопці. При натисканні відкривається повний вибір маршруту у модальному вікні.

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>

Веб-компонент маршруту (Itinerary)

Клік по кнопці вище відкриває модальне вікно, де ви можете оновити свій маршрут.

Search modal — *Вибір маршруту у модальному вікні*

Пошук (Search)

Search — це кнопка лише з іконкою для вибору маршруту. При натисканні відкривається повний вибір маршруту у модальному вікні.

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

Search web component — *Веб-компонент пошуку (Search)*

Клік по кнопці вище відкриває модальне вікно, де ви можете оновити свій маршрут.

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

Компонент маршруту відображає форму маршруту, з якою користувачі можуть взаємодіяти.

<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 і перевірте, чи статус “картки” доступний. Якщо ні, вона буде позначена червоним. У такому випадку ви можете почекати, можливо постачальник знову зробить її доступною, або видалити її зі свого списку.

Налаштування

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

Додаток

Це для веб-розробників. Якщо ви випадково видалили Додаток, через що client ID став недоступним, будь ласка, створіть новий додаток і використовуйте новий client ID для вбудовування наших веб-компонентів.