Vefhlutir

Vefhlutir 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ðavöruúrval með mjög litlu fyrirhöfn. Þessi grein leiðir þig í gegnum safn okkar af vefhlutum 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 vefhlutum okkar.

Fella inn stílsnið okkar.
Fella inn JavaScript-ið okkar.
Fella inn forritshleðsluna okkar.

Stílsnið

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

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

Javascript

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

<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 vefhluti okkar.

Hlutar

Lestu um safn okkar af hlutum hér að neðan.

Forritshleðsla

Hleðsluvélin sér um að halda utan um stöðu og stjórna samskiptum milli hluta okkar. (Felltu henni inn undir JavaScript-ið 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 vefhluta okkar. Hún sér um að sýna vöruúrval þitt (kort, 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 eftir 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 má finna fyrir kort, grindur og kort.

Leit

Leitin virkar vel með einni af raðaðri grindum þínum. Hún leyfir notendum þínum 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 — *Leitarvefhlutur*

Að smella á hlutinn 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 fullkominn ferðaáætlunarvalkostur sem gluggi.

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

Ferðaáætlunarvefhlutur

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 fullkominn ferðaáætlunarvalkostur sem gluggi.

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

Search web component — *Leitarvefhlutur*

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

Ferðaáætlunarform

Ferðaáætlunarhluturinn sýnir form fyrir ferðaáætlun sem notendur geta haft samskipti við.

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

Itinerary formweb component — *Ferðaáætlunarformsvefhlutur*

Með því að breyta ferðaáætluninni í hvaða ferðaáætlunarhlut sem er kallar það fram atburð um uppfærslu ferðaáætlunar fyrir hvaða vöruúrval sem er sem er sýnt á 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 — *Reikningstakkavefhlutur*

Að smella á takkann þegar notandi er ekki innskráður mun vísa notandanum á innskráningarsíðu. Þegar notandi er innskráður 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ðsluvefhlutinn.

Fella inn stílsnið okkar.
Fella inn JavaScript-ið okkar.

Stílsnið

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

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

Javascript

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

<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 vefhluti okkar.

Hlutar

Greiðsla

Greiðsluhluturinn 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 vefhlutum okkar, hvort sem það er á WinkLinks eða á þinni eigin vefsíðu, gætu nokkur atriði hafa farið úrskeiðis:

Framboð

Vara gæti verið ekki lengur í boði. Farðu á Wink Studio og athugaðu hvort stöðugildi „kortsins“ sé í boði. Ef það er ekki, birtist það sem rautt. Í því tilfelli geturðu beðið og kannski birgirinn gerir það aftur aðgengilegt eða fjarlægt það af listanum þínum.

Fjarlægt

Vara gæti hafa verið fjarlægð. Farðu á Wink Studio og athugaðu hvort stöðugildi „kortsins“ sé í boði. Ef það er ekki, birtist það sem rautt. Í því tilfelli geturðu beðið og kannski birgirinn gerir þ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 vöruúrvalinu þínu. 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ð ; þannig að client ID er ekki lengur í boði, vinsamlegast búðu til nýtt forrit og notaðu nýja client ID til að fella inn vefhluti okkar.