Vefþættir

Vefþættir eru staðall sem gerir þér kleift að samþætta heilar Javascript-eiginleika inn á vefsíðuna þína án þess að þurfa að kunna að forrita. Þökk sé þessari flottu tækni geturðu fellt inn Wink ferðabókunarbirgðir með mjög litlu fyrirhöfn. Þessi grein leiðir þig í gegnum safn okkar af vefþáttum og sýnir þér hvernig á að nota þá.

Fella inn Wink

Það eru þrjú atriði sem þú þarft að hafa með í hvaða síðu sem þú vilt sýna einn af vefþáttum okkar.

Fella inn stílsnið okkar.
Fella inn Javascript okkar.
Fella inn forritshleðsluna okkar.

Stílsnið

Felltu CSS-stíla okkar inn í haus skjalsins þíns.

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

Javascript

Felltu Javascript okkar inn neðst í skjalið þitt. (Við mælum með að það sé rétt fyrir ofan lok </body> taggið).

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

Síðan þín er nú tilbúin og getur sýnt vefþætti okkar.

Þættir

Lestu um safn okkar af þáttum hér að neðan.

Forritshleðsla

Hleðsluvélin sér um að halda utan um stöðu og stjórna samskiptum milli þátta okkar. (Felltu henni inn undir Javascript okkar).

<html>
  <body>
    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

Innihaldshleðsla

Innihaldshleðslan er kjarninn í safni vefþátta okkar. Hún sér um að sýna birgðir þínar (spjöld, grindur, kort).

Fáanlegir eiginleikar:

layout
id
sort

Eiginleikinn sort er aðeins í boði þegar layout er RANKED og þú vilt ekki nota núverandi raðaða grind. Í þessum tilfellum skaltu skilja id tómt.

Fáanlegir gerðir layout:

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

Fáanlegar gerðir sort:

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>

Dæmi er að finna fyrir spjöld, grindur og kort.

Leit

Leit virkar vel með einni af raðaðri grindum þínum. Hún gerir notendum kleift að leita að hótelum og áfangastöðum og grindin uppfærist í samræmi við leitarniðurstöðurnar.

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

Lookup web component — *Leitarvefþáttur*

Að smella á þáttinn hér að ofan opnar glugga sem leyfir þér að slá inn áfangastað eða hótel sem þú ert að leita að.

Lookup modal — *Leitargluggi með niðurstöðum*

Ferðaáætlun

Ferðaáætlunartakkinn sýnir núverandi ferðaáætlun á takkanum. Þegar þú smellir á hann birtist fullur ferðaáætlunarvalkostur sem gluggi.

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

Ferðaáætlunarvefþáttur

Að smella á takkann hér að ofan opnar glugga sem leyfir þér að uppfæra ferðaáætlun þína.

Search modal — *Ferðaáætlunarvalkostur sem gluggi*

Leit

Leit er takki sem sýnir aðeins tákn fyrir ferðaáætlunarvalkostinn. Þegar þú smellir á hann birtist fullur ferðaáætlunarvalkostur sem gluggi.

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

Search web component — *Leitarvefþáttur*

Að smella á takkann hér að ofan opnar glugga sem leyfir þér að uppfæra ferðaáætlun þína.

Ferðaáætlunarform

Ferðaáætlunarþátturinn sýnir ferðaáætlunarform sem notendur geta haft samskipti við.

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

Itinerary formweb component — *Ferðaáætlunarformsvefþáttur*

Með því að breyta ferðaáætluninni í hvaða ferðaáætlunarþætti sem er kallar það fram atburð um uppfærslu ferðaáætlunar fyrir hvaða birgðir sem eru sýndar á síðunni.

Reikningur

Reikningstakkinn gerir þér kleift að bæta við Wink auðkenningu á síðuna þína.

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

Account web component — *Reikningstakkavefþáttur*

Að smella á takkann, þegar notandi er ekki auðkenndur, mun vísa notandanum til að auðkenna sig. Þegar notandi er auðkenndur sýnir hann prófílmynd notandans.

Þegar þú smellir á takkann opnast notendasértækur fellivalmynd.

Fella inn TripPay

Það eru tvö atriði sem þú þarft að hafa með í hvaða síðu sem þú vilt nota TripPay greiðsluvefþáttinn.

Fella inn stílsnið okkar.
Fella inn Javascript okkar.

Stílsnið

Felltu CSS-stíla okkar inn í haus skjalsins þíns.

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

Javascript

Felltu Javascript okkar inn neðst í skjalið þitt. (Við mælum með að það sé rétt fyrir ofan lok <body> taggið).

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

Síðan þín er nú tilbúin og getur sýnt vefþætti okkar.

Þættir

Greiðsla

Greiðsluþátturinn gerir þér kleift að láta TripPay vita að ferðalangur vill kaupa eitthvað og reglur og verð fyrir þá hluti.

Það er einn nauðsynlegur eiginleiki fyrir viðmótið:

id Auðkenni bókunarsamningsins sem þú vilt framkvæma.

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

Viðmótið undirbýr samninginn til framkvæmdar og sýnir greiðsluupplýsingar (Mynd 1) fyrir notandann til að ljúka bókuninni.

Payment details — *Mynd 1. Dæmi um greiðsluform*

Villur

Ef þú færð villuskilaboð þegar þú ert að fella inn einn af vefþáttum okkar, hvort sem það er á WinkLinks eða á þinni eigin vefsíðu, gætu nokkur atriði hafa farið úrskeiðis:

Framboð

Birgðir kunna að vera ekki lengur í boði. Farðu á Wink Studio og athugaðu hvort stöðu “spjaldsins” sé í boði. Ef það er ekki, mun það birtast sem rautt. Í því tilfelli geturðu beðið og kannski gerir birgirinn það aftur aðgengilegt eða fjarlægt það af listanum þínum.

Fjarlægt

Birgðir kunna að hafa verið fjarlægðar. Farðu á Wink Studio og athugaðu hvort stöðu “spjaldsins” sé í boði. Ef það er ekki, mun það birtast sem rautt. Í því tilfelli geturðu beðið og kannski gerir birgirinn það aftur aðgengilegt eða fjarlægt það af listanum þínum.

Sérsnið

Þú gætir óvart fjarlægt sérsnið sem þú hefur skilgreint til að fylgja birgðum þínum. Gakktu úr skugga um að sérsniðið sé enn í boði og stilltu nýtt ef eitthvað vantar.

Forrit

Þetta er aðeins fyrir vefþróunaraðila. Ef þú hefur óvart fjarlægt Forritið ; sem gerir client ID ekki lengur aðgengilegt, vinsamlegast búðu til nýtt forrit og notaðu nýja client ID til að fella inn vefþætti okkar.