Skip to content

Vefþættir

Vefþættirer staðall sem gerir þér kleift að samþætta alla Javascript eiginleika í vefsíðuna þína án þess að kunna að forrita. Þökk sé þessari flottu tækni geturðu fellt inn ferðabirgðir frá Wink með mjög litlum fyrirhöfn. Þessi grein leiðir þig í gegnum safn okkar af vefíhlutum og sýnir þér hvernig á að nota þá.

Það eru þrír hlutir sem þú verður að hafa með á hverri síðu þar sem þú vilt birta einn af vefþáttum okkar.

  1. Hafðu stílblaðið okkar með.
  2. Innifalið Javascript okkar.
  3. Hafðu með forritahleðslutækið okkar.

Settu CSS stílana okkar inn í hausinn á skjalinu þínu.

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

Settu Javascript-kóðann okkar neðst í skjalið þitt. (Við mælum með að þú setjir strax fyrir ofan lokamerkinguna).

<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 birt vefþætti okkar.

Lestu um íhlutasafnið okkar hér að neðan.

Hleðslutækið ber ábyrgð á að viðhalda stöðu og stjórna samskiptum milli íhluta okkar. (Settu það inn fyrir neðan Javascript-kóðann 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ðslutækið er kjarninn í vefþáttasafni okkar. Það sér um að birta birgðir þínar (kort, töflur, kort).

Tiltækir eiginleikar:

  • skipulag
  • auðkenni
  • flokka

Eiginleikinnsorter aðeins í boði þegar útlitið erRANKEDog þú vilt ekki nota núverandi raðaða rist. Í þessum tilfellum skaltu skilja eftiridtómt.

Tiltækar gerðir af útliti:

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

Tiltækar flokkunartegundir:

  • 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>

Hægt er að finna sýnishorn fyrirspil,grindurogkort.

Leit virkar vel með einu af röðunartöflunum þínum. Það gerir notendum kleift að leita að hóteli og áfangastað og töfluna uppfærist í samræmi við leitarniðurstöður þeirra.

<html>
<body>
<wink-lookup></wink-lookup>
</body>
</html>
Leitarvefþáttur
Leitarvefþáttur

Með því að smella á íhlutinn hér að ofan opnast glugga sem gerir þér kleift að slá inn áfangastaðinn eða hótelið sem þú ert að leita að.

Uppflettingarlíkan
Uppflettingarlíkan með niðurstöðum

Hnappurinn fyrir ferðaáætlun sýnir núverandi ferðaáætlun á hnappinum. Þegar þú smellir á hann birtist allur ferðaáætlunarvalið sem glugga.

<html>
<body>
<wink-itinerary></wink-itinerary>
</body>
</html>
Vefþáttur ferðaáætlunar
Vefþáttur ferðaáætlunar

Með því að smella á hnappinn hér að ofan opnast glugga sem gerir þér kleift að uppfæra ferðaáætlun þína.

Leitarform
Ferðaáætlunarval sem valkostur

Leit er táknmynd í ferðaáætlunarvalinu. Þegar þú smellir á hana birtist allur ferðaáætlunarvalið sem glugga.

<html>
<body>
<wink-search></wink-search>
</body>
</html>
Leitarvefþáttur
Leitarvefþáttur

Með því að smella á hnappinn hér að ofan opnast glugga sem gerir þér kleift að uppfæra ferðaáætlun þína.

Leitarform
Ferðaáætlunarval sem valkostur

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

<html>
<body>
<wink-itinerary-form></wink-itinerary-form>
</body>
</html>
Vefþáttur ferðaáætlunarforms
Vefþáttur ferðaáætlunarforms

Með því að breyta ferðaáætluninni, í einhverjum af ferðaáætlunarþáttum okkar, virkjast ferðaáætlunaruppfærslur fyrir allar birgðir sem þú hefur nú þegar birtar á síðunni.

Með reikningshnappinum geturðu bætt við Wink-auðkenningu á síðuna þína.

<html>
<body>
<wink-account></wink-account>
</body>
</html>
Vefþáttur reiknings
Vefþáttur reikningshnapps

Ef smellt er á hnappinn þegar notandinn er ekki auðkenndur verður hann sendur áfram til auðkenningar. Þegar notandinn hefur verið auðkenndur birtist prófíltákn hans.

Reikningshnappur þegar staðfest er
Vefþáttur fyrir reikningshnapp (staðfest)

Þegar þú smellir á hnappinn opnast fellivalmynd fyrir hvern notanda.

Reikningshnappur þegar staðfest er
Vefþáttur reikningshnapps (opna)

Það eru tveir hlutir sem þú þarft að hafa með á hverri síðu þar sem þú vilt nota vefþáttinn fyrir TripPay greiðslu.

  1. Hafðu stílblaðið okkar með.
  2. Innifalið Javascript okkar.

Settu CSS stílana okkar inn í hausinn á skjalinu þínu.

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

Settu Javascript-kóðann okkar neðst í skjalið þitt. (Við mælum með að þú setjir strax fyrir ofan lokamerkinguna).

<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 birt vefþætti okkar.

Greiðsluþátturinn gerir þér kleift að láta TripPay vita að ferðalangur vilji kaupa eitthvað og reglurnar og verðið fyrir þessar vörur.

Það er einn nauðsynlegur eiginleiki fyrir búnaðinn:

  • idAuðkenni bókunarsamningsins sem þú vilt að verði undirritaður.
<html>
<body>
<trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
</body>
</html>

:::athugið Til að læra hvernig á að búa til bókunarsamninginnid, lestu leiðbeiningarnar:Samþætting við TripPay. :::

Græjan undirbýr samninginn til framkvæmdar og birtir greiðsluupplýsingar(Mynd 1)notandanum til að ljúka bókuninni.

Greiðsluupplýsingar
Mynd 1. Dæmi um greiðsluform