Веб компоненте
Веб компонентеје стандард који вам омогућава да интегришете целокупне Јаваскрипт функције у вашу веб страницу без знања кодирања. Захваљујући овој сјајној технологији, омогућава вам да уградите Винк туристички инвентар уз врло мало муке. Овај чланак вас води кроз нашу колекцију веб компоненти и показује вам како да их користите.
Угради намигивање
Section titled “Угради намигивање”Постоје три ствари које морате укључити на било коју страницу где желите да прикажете једну од наших веб компоненти.
- Укључите наш стилски лист.
- Укључите наш Јаваскрипт.
- Укључите наш програм за учитавање апликација.
Стилски лист
Section titled “Стилски лист”Укључите наше CSS стилове у заглавље вашег документа.
<html> <head> <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link> </head></html>
Јаваскрипт
Section titled “Јаваскрипт”Укључите наш Јаваскрипт на дну вашег документа. (Препоручујемо одмах изнад завршне ознаке тела).
<html> <body> <script src="https://elements.wink.travel/elements.js" type="module" defer></script> </body></html>
Ваш сајт је сада спреман и може да приказује наше веб компоненте.
Компоненте
Section titled “Компоненте”Прочитајте о нашој библиотеци компоненти у наставку.
Учитавач апликација
Section titled “Учитавач апликација”Програм за учитавање је одговоран за одржавање стања и управљање интеракцијом између наших компоненти. (Укључите га испод нашег Јаваскрипта).
<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>
Узорци се могу наћи закартице,решеткеимапе.
Претрага
Section titled “Претрага”Претрага одлично функционише заједно са једном од ваших рангираних мрежа. Омогућава вашим корисницима да претражују хотел и дестинацију, а мрежа се ажурира као одговор на резултат њихове претраге.
<html> <body> <wink-lookup></wink-lookup> </body></html>
Кликом на горњу компоненту отвара се модални прозор који вам омогућава да унесете дестинацију или хотел који тражите.
План путовања
Section titled “План путовања”Дугме за план путовања приказује тренутни план путовања. Када кликнете на њега, бирач целог плана путовања се приказује као модални прозор.
<html> <body> <wink-itinerary></wink-itinerary> </body></html>
Кликом на дугме изнад отвара се модални прозор који вам омогућава да ажурирате свој план путовања.
Претрага
Section titled “Претрага”Претрага је дугме које се налази само у оквиру бирача плана путовања. Када кликнете на њега, цео бирач плана путовања се приказује као модални прозор.
<html> <body> <wink-search></wink-search> </body></html>
Кликом на дугме изнад отвара се модални прозор који вам омогућава да ажурирате свој план путовања.
Образац за план путовања
Section titled “Образац за план путовања”Компонента плана путовања приказује образац плана путовања са којим корисници могу да интерагују.
<html> <body> <wink-itinerary-form></wink-itinerary-form> </body></html>
Променом плана путовања, у било којој од наших компоненти плана путовања, покреће се догађај ажурирања плана путовања за било који инвентар који тренутно приказујете на страници.
Дугме за налог вам омогућава да додате Wink аутентификацију на свој сајт.
<html> <body> <wink-account></wink-account> </body></html>
Кликом на дугме, када корисник није аутентификован, биће преусмерен на аутентификацију. Када је корисник аутентификован, приказује се икона његовог профила.
Када кликнете на дугме, отвара се падајући мени специфичан за корисника.
Угради TripPay
Section titled “Угради TripPay”Постоје две ствари које морате укључити на било коју страницу где желите да користите TripPay веб компоненту за плаћање.
- Укључите наш стилски лист.
- Укључите наш Јаваскрипт.
Стилски лист
Section titled “Стилски лист”Укључите наше CSS стилове у заглавље вашег документа.
<html> <head> <link rel="stylesheet" href="https://elements.trippay.io/styles.css"></link> </head></html>
Јаваскрипт
Section titled “Јаваскрипт”Укључите наш Јаваскрипт на дну вашег документа. (Препоручујемо одмах изнад завршне ознаке тела).
<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)кориснику да заврши резервацију.