Skip to content
Wink

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

Section titled “Manusta Wink”

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

  1. Lisage meie stiilileht.
  2. Lisage meie Javascript.
  3. Lisage meie rakenduse laadija.

Stiilileht

Section titled “Stiilileht”

Lisage meie CSS-stiilid dokumendi päisesse.

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

Javascript

Section titled “Javascript”

Lisage meie Javascript dokumendi lõppu. (Soovitame kohe enne </body> lõppu).

<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

Section titled “Komponendid”

Lugege meie komponenditeegist allpool.

Rakenduse laadija

Section titled “Rakenduse laadija”

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

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

Sisu laadija

Section titled “Sisu laadija”

Sisu laadija on meie veebikomponentide teegi 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 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äiteid leiate kaartide, võrgustike ja kaartide kohta.

Otsing

Section titled “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>
Lookup web component
Otsingu veebikomponent

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

Lookup modal
Otsingu modaalaken koos tulemustega

Marsruut

Section titled “Marsruut”

Marsruudi nupp kuvab nupul praeguse marsruudi. Kui sellele klõpsate, avaneb täismahus marsruudi valija modaalaknas.

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>
Itinerary web component
Marsruudi veebikomponent

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

Search modal
Marsruudi valija modaalaknas

Otsing

Section titled “Otsing”

Otsing on marsruudi valija ikooninupp. Kui sellele klõpsate, avaneb täismahus marsruudi valija modaalaknas.

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>
Search web component
Otsingu veebikomponent

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

Search modal
Marsruudi valija modaalaknas

Marsruudi vorm

Section titled “Marsruudi vorm”

Marsruudi komponent kuvab marsruudi vormi, millega kasutajad saavad suhelda.

<html>
  <body>
    <wink-itinerary-form></wink-itinerary-form>
  </body>
</html>
Itinerary formweb component
Marsruudi vormi veebikomponent

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

Konto

Section titled “Konto”

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

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>
Account web component
Konto nupu veebikomponent

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

Account button when authenticated
Konto nupp (autentitud) veebikomponent

Kui nupule klõpsata, avaneb kasutajaspetsiifiline rippmenüü.

Account button when authenticated
Konto nupp (avatud) veebikomponent

Manusta TripPay

Section titled “Manusta TripPay”

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

  1. Lisage meie stiilileht.
  2. Lisage meie Javascript.

Stiilileht

Section titled “Stiilileht”

Lisage meie CSS-stiilid dokumendi päisesse.

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

Javascript

Section titled “Javascript”

Lisage meie Javascript dokumendi lõppu. (Soovitame kohe enne <body> lõppu).

<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

Section titled “Komponendid”

Makse

Section titled “Makse”

Makse komponent võimaldab teil teavitada TripPayd, 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 makseandmed (Joonis 1), et broneering lõpetada.

Payment details
Joonis 1. Näidis maksevorm

Veateated

Section titled “Veateated”

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

Saadavus

Section titled “Saadavus”

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

Eemaldatud

Section titled “Eemaldatud”

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

Kohandamine

Section titled “Kohandamine”

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

Rakendus

Section titled “Rakendus”

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