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

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

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

Вбудування Wink

Section titled “Вбудування Wink”

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

  1. Включіть наш файл стилів.
  2. Включіть наш Javascript.
  3. Включіть наш завантажувач додатка.

Файл стилів

Section titled “Файл стилів”

Включіть наш CSS у секцію head вашого документа.

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

Javascript

Section titled “Javascript”

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

<html>
  <body>
    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>
  </body>
</html>

Ваш сайт тепер готовий і може відображати наші веб-компоненти.

Компоненти

Section titled “Компоненти”

Детальніше про нашу бібліотеку компонентів нижче.

Завантажувач додатка

Section titled “Завантажувач додатка”

Завантажувач відповідає за збереження стану та керування взаємодією між нашими компонентами. (Включайте його після нашого 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>

Завантажувач контенту

Section titled “Завантажувач контенту”

Завантажувач контенту є серцем нашої бібліотеки веб-компонентів. Він відповідає за відображення вашого інвентарю (картки, сітки, карти).

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

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

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

Пошук

Section titled “Пошук”

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

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>
Lookup web component
Веб-компонент пошуку

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

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

Маршрут

Section titled “Маршрут”

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

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

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

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

Пошук

Section titled “Пошук”

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

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>
Search web component
Веб-компонент пошуку

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

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

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

Section titled “Форма маршруту”

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

<html>
  <body>
    <wink-itinerary-form></wink-itinerary-form>
  </body>
</html>
Itinerary formweb component
Веб-компонент форми маршруту

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

Обліковий запис

Section titled “Обліковий запис”

Кнопка облікового запису дозволяє додати автентифікацію Wink на ваш сайт.

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>
Account web component
Веб-компонент кнопки облікового запису

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

Account button when authenticated
Веб-компонент кнопки облікового запису (авторизований)

Коли ви натискаєте на кнопку, відкривається користувацьке випадаюче меню.

Account button when authenticated
Веб-компонент кнопки облікового запису (відкритий)

Вбудування TripPay

Section titled “Вбудування TripPay”

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

  1. Включіть наш файл стилів.
  2. Включіть наш Javascript.

Файл стилів

Section titled “Файл стилів”

Включіть наш CSS у секцію head вашого документа.

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

Javascript

Section titled “Javascript”

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

<html>
  <body>
    <script src="https://elements.trippay.io/elements.js" type="module" defer></script>
  </body>
</html>

Ваш сайт тепер готовий і може відображати наші веб-компоненти.

Компоненти

Section titled “Компоненти”

Оплата

Section titled “Оплата”

Компонент оплати дозволяє повідомити TripPay, що мандрівник хоче щось придбати, а також правила і ціни для цих товарів.

Існує один обов’язковий атрибут для віджета:

  • id Ідентифікатор контракту бронювання, який ви хочете виконати.
<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

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

Payment details
Рисунок 1. Приклад форми оплати

Помилки

Section titled “Помилки”

Якщо при вбудовуванні одного з наших веб-компонентів, на WinkLinks або на вашому власному сайті, ви бачите повідомлення про помилку, можливі кілька причин:

Доступність

Section titled “Доступність”

Інвентар може бути більше недоступним. Перейдіть до Wink Studio і перевірте, чи статус “картки” доступний. Якщо ні, вона буде позначена червоним. У такому випадку ви можете почекати, можливо постачальник знову зробить її доступною, або видалити її зі свого списку.

Видалено

Section titled “Видалено”

Інвентар міг бути видалений. Перейдіть до Wink Studio і перевірте, чи статус “картки” доступний. Якщо ні, вона буде позначена червоним. У такому випадку ви можете почекати, можливо постачальник знову зробить її доступною, або видалити її зі свого списку.

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

Section titled “Налаштування”

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

Додаток

Section titled “Додаток”

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