Veebikomponendid

Veebikomponendid on standard, mis võimaldab teil integreerida terveid JavaScripti funktsioone oma veebisaidile ilma kodeerimisoskusteta. Tänu sellele lahedale tehnoloogiale saate Wink reisiinventari hõlpsasti manustada. See artikkel juhendab teid meie veebikomponentide kogu kasutamisel.

Manusta Wink

Iga lehe puhul, kuhu soovite kuvada mõnda meie veebikomponenti, peate lisama kolm asja.

Lisage meie stiilileht.
Lisage meie Javascript.
Lisage meie rakenduse laadija.

Stiilileht

Lisage meie CSS-stiilid dokumendi päisesse.

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

Javascript

Lisage meie Javascript dokumendi lõppu. (Soovitame kohe enne sulguvat body-sildi).

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

Teie sait on nüüd valmis ja suudab kuvada meie veebikomponente.

Komponendid

Lugege meie komponendikogu kohta allpool.

Rakenduse laadija

Laadija vastutab oleku hoidmise ja meie komponentide vahelise suhtluse haldamise eest. (Lisage see meie Javascripti alla).

<html>
  <body>
    <wink-app-loader
      client-id="TEIE KLIENDI ID SIIN"
      configuration-id="TEIE KOHANDAMISE ID SIIN"
    ></wink-app-loader>
  </body>
</html>

Sisu laadija

Sisu laadija on meie veebikomponentide kogu süda. See vastutab teie inventari kuvamise eest (kaardid, võrgustikud, kaardid).

Saadaval atribuudid:

layout
id
sort

Atribuut sort on saadaval ainult siis, kui layout on RANKED ja te ei soovi kasutada olemasolevat järjestatud võrgustikku. Nendel juhtudel jätke id tühi.

Saadaval olevad paigutuse tüübid:

AD_BANNER
MAP
HOTEL
GUEST_ROOM
MEETING_ROOM
SPA
RESTAURANT
ACTIVITY
ATTRACTION
PLACE
ADD_ON
LIST
SEARCH
RANKED

Saadaval olevad sorteerimise tüübid:

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>

Näidiseid leiate kaartide, võrgustike ja kaartide kohta.

Otsing

Otsing töötab suurepäraselt koos ühe teie järjestatud võrgustikuga. See võimaldab kasutajatel otsida hotelle ja sihtkohti ning võrgustik uuendab end vastavalt otsingutulemustele.

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>

Ülaloleval komponendil klõpsates avaneb modaalaken, kuhu saate sisestada otsitava sihtkoha või hotelli.

Reisiplaan

Reisiplaani nupp kuvab nupul praeguse reisiplaani. Kui sellele klõpsata, avaneb täisreisiplaani valija modaalaknas.

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

Reisiplaani veebikomponent

Ülaloleval nupul klõpsates avaneb modaalaken, kus saate oma reisiplaani uuendada.

Otsing

Otsing on reisiplaani valija ikoon-nupp. Kui sellele klõpsata, avaneb täisreisiplaani valija modaalaknas.

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>

Ülaloleval nupul klõpsates avaneb modaalaken, kus saate oma reisiplaani uuendada.

Reisiplaani vorm

Reisiplaani komponent kuvab reisiplaani vormi, millega kasutajad saavad suhelda.

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

Reisiplaani muutmine mis tahes meie reisiplaani komponendis käivitab reisiplaani uuendamise sündmuse kõigile lehel praegu kuvatavatele inventaridele.

Konto

Konto nupp võimaldab teil lisada Wink autentimise oma saidile.

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

Konto veebikomponent — *Konto nupu veebikomponent*

Kui kasutaja pole autentitud, suunab nupule klõpsamine kasutaja autentima. Kui kasutaja on autentitud, kuvatakse kasutaja profiiliikoon.

Kui nupule klõpsata, avaneb kasutajale isikupärastatud rippmenüü.

Manusta TripPay

Iga lehe puhul, kus soovite kasutada TripPay makse veebikomponenti, peate lisama kaks asja.

Lisage meie stiilileht.
Lisage meie Javascript.

Stiilileht

Lisage meie CSS-stiilid dokumendi päisesse.

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

Javascript

Lisage meie Javascript dokumendi lõppu. (Soovitame kohe enne sulguvat body-sildi).

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

Teie sait on nüüd valmis ja suudab kuvada meie veebikomponente.

Komponendid

Makse

Makse komponent võimaldab teil TripPay-le teatada, et reisija soovib midagi osta, ning määrata nende esemete reeglid ja hinnad.

Vidinal on üks kohustuslik atribuut:

id Broneerimislepingu identifikaator, mida soovite täita.

<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

Vidin valmistab lepingu täitmiseks ette ja kuvab kasutajale makse üksikasjad (Joonis 1), et broneering lõpetada.

Veateated

Kui teile kuvatakse veateade, kui manustate mõnda meie veebikomponenti, kas WinkLinksis või oma veebisaidil, võib olla mitu võimalikku põhjust:

Saadavus

Inventar ei pruugi enam saadaval olla. Minge Wink Studio ja kontrollige, kas “kaardi” olek on saadaval. Kui see pole saadaval, kuvatakse see punasena. Sellisel juhul võite oodata, kuni tarnija selle uuesti saadavaks teeb, või eemaldada selle oma nimekirjast.

Eemaldatud

Inventar võis olla eemaldatud. Minge Wink Studio ja kontrollige, kas “kaardi” olek on saadaval. Kui see pole saadaval, kuvatakse see punasena. Sellisel juhul võite oodata, kuni tarnija selle uuesti saadavaks teeb, või eemaldada selle oma nimekirjast.

Kohandamine

Võib-olla eemaldasite kogemata kohanduse, mille olete määranud koos oma inventariga. Veenduge, et kohandamine on endiselt saadaval, ja määrake uus, kui mõni puudub.

Rakendus

See on mõeldud ainult veebiarendajatele. Kui eemaldasite kogemata Rakenduse ; mis teeb kliendi ID enam kättesaamatuks, looge palun uus rakendus ja kasutage uut kliendi ID-d meie veebikomponentide manustamiseks.