Веб-компоненти
Веб-компоненти– це стандарт, який дозволяє інтегрувати всі функції Javascript на ваш вебсайт без знання програмування. Завдяки цій чудовій технології ви можете вбудовувати туристичний інвентар Wink без особливих зусиль. Ця стаття проведе вас через нашу колекцію вебкомпонентів і покаже, як їх використовувати.
Вбудувати Wink
Section titled “Вбудувати Wink”Є три речі, які ви повинні включити на будь-яку сторінку, де ви хочете відобразити один із наших веб-компонентів.
- Додайте нашу таблицю стилів.
- Включіть наш Javascript.
- Включіть наш завантажувач програм.
Таблиця стилів
Section titled “Таблиця стилів”Включіть наші CSS-стилі в заголовок вашого документа.
<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 “Завантажувач контенту”Завантажувач контенту є основою нашої бібліотеки веб-компонентів. Він відповідає за відображення вашого інвентарю (карт, сіток, карт).
Доступні атрибути:
- макет
- ідентифікатор
- сортувати
Атрибут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>
Клацання на компонент вище відкриває модальне вікно, в якому можна ввести напрямок або готель, який ви шукаєте.
Маршрут
Section titled “Маршрут”Кнопка маршруту показує поточний маршрут. Після натискання на неї повний вибір маршруту відображається у вигляді модального вікна.
<html> <body> <wink-itinerary></wink-itinerary> </body></html>
Натискання кнопки вище відкриває модальне вікно, яке дозволяє оновити ваш маршрут.
Пошук – це кнопка вибору маршруту, яка має лише значок. Після натискання на неї повний вибір маршруту відображається у модальному вікні.
<html> <body> <wink-search></wink-search> </body></html>
Натискання кнопки вище відкриває модальне вікно, яке дозволяє оновити ваш маршрут.
Форма маршруту
Section titled “Форма маршруту”Компонент маршруту відображає форму маршруту, з якою користувачі можуть взаємодіяти.
<html> <body> <wink-itinerary-form></wink-itinerary-form> </body></html>
Зміна маршруту в будь-якому з наших компонентів ініціює подію оновлення маршруту для будь-якого інвентарю, який наразі відображається на сторінці.
Обліковий запис
Section titled “Обліковий запис”Кнопка облікового запису дозволяє додати автентифікацію Wink на ваш сайт.
<html> <body> <wink-account></wink-account> </body></html>
Натискання кнопки, коли користувач не пройшов автентифікацію, перенаправить його на автентифікацію. Після автентифікації користувача відображається значок його профілю.
Коли ви натискаєте кнопку, відкриється випадаюче меню для користувача.
Вбудувати TripPay
Section titled “Вбудувати TripPay”Є дві речі, які ви повинні включити на будь-яку сторінку, де ви хочете використовувати веб-компонент оплати TripPay.
- Додайте нашу таблицю стилів.
- Включіть наш Javascript.
Таблиця стилів
Section titled “Таблиця стилів”Включіть наші CSS-стилі в заголовок вашого документа.
<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>
:::примітка
Щоб дізнатися, як створити договір бронюванняid
, прочитайте посібник:Інтеграція з TripPay.
:::
Віджет готує договір до виконання та відображає платіжні реквізити(Рисунок 1)користувачеві для завершення бронювання.