Web Components

Web Components ä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 web components 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 någon av våra web components.

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

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år 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 web components.

Komponenter

Läs om vårt komponentbibliotek nedan.

Applikationsloader

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

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

Content loader

Content loader är kärnan i vårt web component-bibliotek. 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 sorteringsalternativ:

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.

Lookup

Lookup 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 där du kan skriva in destinationen eller hotellet du söker efter.

Itinerary

Itinerary-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 web component

Att klicka på knappen ovan öppnar en modal där du kan uppdatera din resplan.

Search

Search är en ikon-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 där du kan uppdatera din resplan.

Itinerary form

Itinerary-komponenten visar ett resplansformulär som användare kan interagera med.

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

Itinerary formweb component — *Itinerary form web component*

Genom att ändra resplanen i någon av våra itinerary-komponenter triggas ett resplansuppdaterings-event till allt inventarie du för närvarande visar på sidan.

Account

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

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

Account web component — *Account button web component*

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 en 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 betalnings-web component.

Inkludera vårt stylesheet.
Inkludera vår 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år 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 web components.

Komponenter

Payment

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.

Payment details — *Figur 1. Exempel på betalningsformulär*

Fel

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

Tillgänglighet

Inventariet kan ha blivit 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 Application så att client ID inte längre är tillgängligt, skapa en ny applikation och använd det nya client ID för att bädda in våra Web Components.