Уеб компоненти
Уеб компонентие стандарт, който ви позволява да интегрирате цели Javascript функции във вашия уебсайт, без да знаете как да програмирате. Благодарение на тази страхотна технология, тя ви позволява да вграждате Wink travel inventory с много малко усилия. Тази статия ви превежда през нашата колекция от уеб компоненти и ви показва как да ги използвате.
Вграждане на 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 в долната част на документа си. (Препоръчваме непосредствено над крайния таг на тялото).
<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>
Могат да се намерят образци закарти,решеткиикарти.
Търсене
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>
Чрез промяна на маршрута, във всеки от нашите компоненти за маршрут, се задейства събитието за актуализиране на маршрута за всеки инвентар, който в момента се показва на страницата.
Профил
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 в долната част на документа си. (Препоръчваме непосредствено над крайния таг на тялото).
<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)на потребителя, за да финализира резервацията.