Webbkomponenter

Webbkomponenter är en standard som låter dig integrera hela JavaScript-funktioner på din webbplats utan att behöva kunna koda. Tack vare denna häftiga teknik kan du bädda in Wink reseinventarier med mycket liten ansträngning. Den här artikeln guidar dig genom vår samling av webbkomponenter och visar hur du använder dem.

Bädda in Wink

Det finns tre saker du måste inkludera på varje sida där du vill visa en av våra webbkomponenter.

Inkludera vårt stylesheet.
Inkludera vårt Javascript.
Inkludera vår applikationsladdare.

Stylesheet

Inkludera våra CSS-stilar i dokumentets head.

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

Javascript

Inkludera vårt Javascript längst ner i dokumentet. (Vi rekommenderar precis ovanför slutet av body-taggen).

<html>
  <body>
    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>
  </body>
</html>

Din webbplats är nu redo och kan visa våra webbkomponenter.

Komponenter

Läs om vårt komponentbibliotek nedan.

Applikationsladdare

Laddaren ansvarar för att hålla tillstånd och hantera interaktion mellan våra komponenter. (Inkludera den under vårt Javascript).

<html>
  <body>
    <wink-app-loader
      client-id="DIN KLIENT-ID HÄR"
      configuration-id="DIN ANPASSNINGS-ID HÄR"
    ></wink-app-loader>
  </body>
</html>

Innehållsladdare

Innehållsladdaren är kärnan i vårt webbkomponentbibliotek. Den ansvarar för att visa ditt inventarie (kort, rutnät, kartor).

Tillgängliga attribut:

layout
id
sort

Attributet sort är endast tillgängligt när layout är RANKED och du inte vill använda ett befintligt rankat rutnät. I dessa fall lämnar du id tomt.

Tillgängliga layouter:

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

Tillgängliga sorteringstyper:

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>

Exempel finns för kort, rutnät och kartor.

Sökning

Sökning fungerar utmärkt tillsammans med ett av dina rankade rutnät. Det låter dina användare söka efter hotell och destination och rutnätet uppdateras som svar på deras sökresultat.

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>

Att klicka på komponenten ovan öppnar en modal som låter dig skriva in destinationen eller hotellet du söker efter.

Resplan

Resplan-knappen visar den aktuella resplanen på knappen. När du klickar på den visas hela resplansväljaren som en modal.

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

Itinerary webbkomponent

Att klicka på knappen ovan öppnar en modal som låter dig uppdatera din resplan.

Sök

Sök är en ikonendast-knapp för resplansväljaren. När du klickar på den visas hela resplansväljaren som en modal.

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

Att klicka på knappen ovan öppnar en modal som låter dig uppdatera din resplan.

Resplanformulär

Resplankomponenten visar ett resplanformulär som användare kan interagera med.

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

Genom att ändra resplanen i någon av våra resplankomponenter triggas resplanuppdateringshändelsen till allt inventarie du för närvarande visar på sidan.

Konto

Kontoknappen låter dig lägga till Wink-autentisering på din webbplats.

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

Konto webbkomponent — *Kontoknapp webbkomponent*

Att klicka på knappen, när användaren inte är autentiserad, skickar användaren vidare för att autentisera sig. När användaren är autentiserad visas användarens profilikon.

När du klickar på knappen öppnas användarspecifik dropdown.

Bädda in TripPay

Det finns två saker du måste inkludera på varje sida där du vill använda TripPay betalningswebbkomponent.

Inkludera vårt stylesheet.
Inkludera vårt Javascript.

Stylesheet

Inkludera våra CSS-stilar i dokumentets head.

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

Javascript

Inkludera vårt Javascript längst ner i dokumentet. (Vi rekommenderar precis ovanför slutet av body-taggen).

<html>
  <body>
    <script src="https://elements.trippay.io/elements.js" type="module" defer></script>
  </body>
</html>

Din webbplats är nu redo och kan visa våra webbkomponenter.

Komponenter

Betalning

Betalningskomponenten låter dig informera TripPay att en resenär vill köpa något och reglerna och priserna för dessa artiklar.

Det finns ett obligatoriskt attribut för widgeten:

id Identifieraren för bokningskontraktet du vill genomföra.

<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

Widgeten förbereder kontraktet för genomförande och visar betalningsdetaljer (Figur 1) för användaren för att slutföra bokningen.

Fel

Om du möts av ett felmeddelande när du bäddar in en av våra webbkomponenter, antingen på WinkLinks eller på din egen webbplats, finns det några saker som kan ha gått fel:

Tillgänglighet

Inventariet kan vara otillgängligt. Gå till Wink Studio och kontrollera om statusen för “kortet” är tillgängligt. Om det inte är det visas det som rött. I så fall kan du vänta och kanske gör leverantören det tillgängligt igen eller ta bort det från din lista.

Borttaget

Inventariet kan ha tagits bort. Gå till Wink Studio och kontrollera om statusen för “kortet” är tillgängligt. Om det inte är det visas det som rött. I så fall kan du vänta och kanske gör leverantören det tillgängligt igen eller ta bort det från din lista.

Anpassning

Du kan ha råkat ta bort den anpassning du definierat för att följa med ditt inventarie. Se till att anpassningen fortfarande finns och sätt en ny om någon saknas.

Applikation

Detta gäller endast webbutvecklare. Om du av misstag tagit bort Applikationen ; vilket gör klient-ID:t otillgängligt, skapa en ny applikation och använd det nya klient-ID:t för att bädda in våra webbkomponenter.