Stökkva að meginefni
Wink

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

Kafli sem heitir „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.

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

Stílsnið

Kafli sem heitir „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

Kafli sem heitir „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 vefþætti okkar.

Þættir

Kafli sem heitir „Þættir“

Lestu um bókasafn okkar af þáttum hér að neðan.

Forritshleðsla

Kafli sem heitir „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

Kafli sem heitir „Innihaldshleðsla“

Innihaldshleðslan er kjarninn í bókasafni 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 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

Kafli sem heitir „Leit“

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

Kafli sem heitir „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 vefþá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

Kafli sem heitir „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
Leitarvefþá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

Ferðaáætlunarform

Kafli sem heitir „Ferðaáætlunarform“

Ferðaáætlunarþátturinn 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áætlunarforms vefþá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 vöruúrval sem er sem er sýnt á síðunni.

Reikningur

Kafli sem heitir „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
Reikningstakkinn vefþáttur

Að smella á takkann þegar notandi er ekki innskráður mun vísa honum á innskráningarsíðu. Þegar notandi er innskráður sýnir hann prófílmynd notandans.

Account button when authenticated
Reikningstakkinn (innskráður) vefþáttur

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

Account button when authenticated
Reikningstakkinn (opinn) vefþáttur

Fella inn TripPay

Kafli sem heitir „Fella inn TripPay“

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

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

Stílsnið

Kafli sem heitir „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

Kafli sem heitir „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 vefþætti okkar.

Þættir

Kafli sem heitir „Þættir“

Greiðsla

Kafli sem heitir „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

Kafli sem heitir „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ð

Kafli sem heitir „Framboð“

Vara gæti verið ekki lengur í boði. Farðu í 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

Kafli sem heitir „Fjarlægt“

Vara gæti hafa verið fjarlægð. Farðu í 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ð

Kafli sem heitir „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

Kafli sem heitir „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 vefþætti okkar.