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

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

Вбудувати Wink

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

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

Таблиця стилів

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

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

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

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

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

макет
ідентифікатор
сортувати

Атрибут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

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

Додайте нашу таблицю стилів.
Включіть наш Javascript.

Таблиця стилів

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

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

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

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