Skip to content

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

Веб компонентеје стандард који вам омогућава да интегришете целокупне Јаваскрипт функције у вашу веб страницу без знања кодирања. Захваљујући овој сјајној технологији, омогућава вам да уградите Винк туристички инвентар уз врло мало муке. Овај чланак вас води кроз нашу колекцију веб компоненти и показује вам како да их користите.

Постоје три ствари које морате укључити на било коју страницу где желите да прикажете једну од наших веб компоненти.

  1. Укључите наш стилски лист.
  2. Укључите наш Јаваскрипт.
  3. Укључите наш програм за учитавање апликација.

Укључите наше CSS стилове у заглавље вашег документа.

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

Укључите наш Јаваскрипт на дну вашег документа. (Препоручујемо одмах изнад завршне ознаке тела).

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

Ваш сајт је сада спреман и може да приказује наше веб компоненте.

Прочитајте о нашој библиотеци компоненти у наставку.

Програм за учитавање је одговоран за одржавање стања и управљање интеракцијом између наших компоненти. (Укључите га испод нашег Јаваскрипта).

<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>
Компонента веб претраге
Компонента веб претраге

Кликом на дугме изнад отвара се модални прозор који вам омогућава да ажурирате свој план путовања.

Модални прозор за претрагу
Бирач плана путовања као модални прозор

Образац за план путовања

Section titled “Образац за план путовања”

Компонента плана путовања приказује образац плана путовања са којим корисници могу да интерагују.

<html>
<body>
<wink-itinerary-form></wink-itinerary-form>
</body>
</html>
Веб компонента обрасца за план путовања
Веб компонента обрасца за план путовања

Променом плана путовања, у било којој од наших компоненти плана путовања, покреће се догађај ажурирања плана путовања за било који инвентар који тренутно приказујете на страници.

Дугме за налог вам омогућава да додате Wink аутентификацију на свој сајт.

<html>
<body>
<wink-account></wink-account>
</body>
</html>
Веб компонента налога
Веб компонента дугмета за налог

Кликом на дугме, када корисник није аутентификован, биће преусмерен на аутентификацију. Када је корисник аутентификован, приказује се икона његовог профила.

Дугме за налог након аутентификације
Веб компонента дугмета за налог (аутентификовано)

Када кликнете на дугме, отвара се падајући мени специфичан за корисника.

Дугме за налог након аутентификације
Веб компонента дугмета за налог (отвори)

Постоје две ствари које морате укључити на било коју страницу где желите да користите TripPay веб компоненту за плаћање.

  1. Укључите наш стилски лист.
  2. Укључите наш Јаваскрипт.

Укључите наше CSS стилове у заглавље вашег документа.

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

Укључите наш Јаваскрипт на дну вашег документа. (Препоручујемо одмах изнад завршне ознаке тела).

<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)кориснику да заврши резервацију.

Детаљи плаћања
Слика 1. Пример обрасца за плаћање