Skip to content
Academy

Vefhlutir

Vefhlutir eru staðall sem leyfir þér 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

Section titled “Fella inn Wink”

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

  1. Bættu við stílsniði okkar.
  2. Bættu við JavaScript-inu okkar.
  3. Bættu við forritshleðslunni okkar.

Stílsnið

Section titled “Stílsnið”

Bættu við CSS-stílum okkar í haus skjalsins þíns.

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

Javascript

Section titled “Javascript”

Bættu við JavaScript-inu okkar neðst í skjalið þitt. (Við mælum með að setja það beint fyrir ofan lok body-tagginn).

<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

Section titled “Hlutar”

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

Forritshleðsla

Section titled “Forritshleðsla”

Hleðsluvélin sér um að halda utan um stöðu og stjórna samskiptum milli hluta okkar. (Settu hana inn undir JavaScript-inu 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

Section titled “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 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

Section titled “Leit”

Leit 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

Section titled “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>
Itinerary web component
Ferðaáætlun vefhlutur

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

Section titled “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.

Search modal
Ferðaáætlunarvalkostur sem gluggi

Ferðaáætlunarform

Section titled “Ferðaáætlunarform”

Ferðaáætlunarhluturinn 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áætlunarform vefhlutur

Með því að breyta ferðaáætluninni í hvaða ferðaáætlunarhluta sem er kallar það fram atburð um uppfærslu ferðaáætlunar fyrir hvaða vöruúrval sem er sem þú ert að sýna á síðunni.

Reikningur

Section titled “Reikningur”

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

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>
Account web component
Reikningstakki vefhlutur

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.

Account button when authenticated
Reikningstakki (innskráður) vefhlutur

Þegar þú smellir á takkann opnast notendasérsniðinn fellivalmynd.

Account button when authenticated
Reikningstakki (opinn) vefhlutur

Fella inn TripPay

Section titled “Fella inn TripPay”

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

  1. Bættu við stílsniði okkar.
  2. Bættu við JavaScript-inu okkar.

Stílsnið

Section titled “Stílsnið”

Bættu við CSS-stílum okkar í haus skjalsins þíns.

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

Javascript

Section titled “Javascript”

Bættu við JavaScript-inu okkar neðst í skjalið þitt. (Við mælum með að setja það beint fyrir ofan lok body-tagginn).

<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

Section titled “Hlutar”

Greiðsla

Section titled “Greiðsla”

Greiðsluhluturinn leyfir þér að tilkynna TripPay að ferðalangur vilji 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

Section titled “Villur”

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

Framboð

Section titled “Framboð”

Vöruúrval gæti verið ekki lengur í boði. Farðu á Wink Studio og athugaðu hvort staða „kortsins“ 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

Section titled “Fjarlægt”

Vöruúrval gæti hafa verið fjarlægt. Farðu á Wink Studio og athugaðu hvort staða „kortsins“ 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ð

Section titled “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

Section titled “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.