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

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

Угради намигивање

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

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

Стилски лист

Укључите наше 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>

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

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

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

<html>
  <body>
    <wink-itinerary-form></wink-itinerary-form>
  </body>
</html>

*Веб компонента обрасца за план путовања*

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

Налог

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

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>

Веб компонента налога — *Веб компонента дугмета за налог*

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

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

Угради TripPay

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

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

Стилски лист

Укључите наше 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. Пример обрасца за плаћање*