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ðavöruúrval 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-ið 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-ið 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-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 vefþátta okkar. Hún sér um að sýna vöruúrval þitt (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 autt.

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ðadagatal

Ferðadagatalshnappurinn sýnir núverandi ferðadagatal á hnappinum. Þegar þú smellir á hann birtist fullkomið ferðadagatal sem gluggi.

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

Ferðadagatal vefþáttur

Að smella á hnappinn hér að ofan opnar glugga sem leyfir þér að uppfæra ferðadagatalið þitt.

Search modal — *Ferðadagatalsskjámynd sem gluggi*

Leit

Leit er hnappur sem sýnir aðeins tákn fyrir ferðadagatalshluta. Þegar þú smellir á hann birtist fullkomið ferðadagatal sem gluggi.

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

Search web component — *Leitarvefþáttur*

Að smella á hnappinn hér að ofan opnar glugga sem leyfir þér að uppfæra ferðadagatalið þitt.

Ferðadagatalsskjalið

Ferðadagatalshluturinn sýnir ferðadagatalsskjalið sem notendur geta haft samskipti við.

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

Itinerary formweb component — *Ferðadagatalsskjalsvefþáttur*

Með því að breyta ferðadagatali í hvaða ferðadagatalshluta sem er kallar það fram atburð um uppfærslu ferðadagatals fyrir hvaða vöruúrval sem er sem er sýnt á síðunni.

Reikningur

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

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

Account web component — *Reikningshnappur vefþáttur*

Að smella á hnappinn, þegar notandi er ekki innskráður, mun vísa notandanum á innskráningarsíðu. Þegar notandi er innskráður sýnir hnappurinn prófílmynd notandans.

Þegar þú smellir á hnappinn 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-ið 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-ið 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ð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ðslusnið*

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ð

Vara gæti verið 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 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öðu “spjaldsins” sé í boði. Ef það er ekki, mun það birtast 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 sé ekki lengur í boði, vinsamlegast búðu til nýtt forrit og notaðu nýja client ID til að fella inn vefþætti okkar.