Webcomponenten

Webcomponenten is een standaard waarmee je volledige Javascript-functies in je website kunt integreren zonder te hoeven programmeren. Dankzij deze coole technologie kun je Wink reisvoorraad met weinig moeite insluiten. Dit artikel leidt je door onze collectie webcomponenten en laat zien hoe je ze gebruikt.

Wink insluiten

Er zijn drie dingen die je moet opnemen in elke pagina waar je een van onze webcomponenten wilt weergeven.

Neem onze stylesheet op.
Neem onze Javascript op.
Neem onze applicatielader op.

Stylesheet

Neem onze CSS-stijlen op in de head van je document.

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

Javascript

Neem onze Javascript op aan het einde van je document. (We raden aan direct boven de sluitende body-tag).

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

Je site is nu klaar en kan onze webcomponenten weergeven.

Componenten

Lees hieronder over onze componentenbibliotheek.

Applicatielader

De loader is verantwoordelijk voor het bijhouden van de status en het beheren van de interactie tussen onze componenten. (Neem deze op onder onze Javascript).

<html>
  <body>
    <wink-app-loader
      client-id="JE CLIENT ID HIER INVOEGEN"
      configuration-id="JE AANPASSINGS-ID HIER INVOEGEN"
    ></wink-app-loader>
  </body>
</html>

Content loader

De content loader is het hart van onze webcomponentbibliotheek. Hij is verantwoordelijk voor het weergeven van je voorraad (kaarten, grids, kaarten).

Beschikbare attributen:

layout
id
sort

Het attribuut sort is alleen beschikbaar wanneer layout RANKED is en je geen bestaande gerangschikte grid wilt gebruiken. Laat in die gevallen id leeg.

Beschikbare lay-outtypen:

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

Beschikbare sorteertypen:

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>

Voorbeelden zijn te vinden voor kaarten, grids en kaarten.

Lookup

Lookup werkt uitstekend samen met een van je gerangschikte grids. Het laat je gebruikers zoeken naar hotel en bestemming en de grid wordt bijgewerkt op basis van hun zoekresultaat.

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

Door op de bovenstaande component te klikken, opent een modal waarin je de bestemming of het hotel kunt typen waar je naar zoekt.

Reisschema

De reisschema-knop toont het huidige reisschema op de knop. Wanneer je erop klikt, wordt de volledige reisschema-selector als modal weergegeven.

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

Reisschema webcomponent

Door op de knop hierboven te klikken, opent een modal waarin je je reisschema kunt bijwerken.

Zoekmodal — *Reisschema-selector als modal*

Zoeken

Zoeken is een knop met alleen een pictogram van de reisschema-selector. Wanneer je erop klikt, wordt de volledige reisschema-selector als modal weergegeven.

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

Door op de knop hierboven te klikken, opent een modal waarin je je reisschema kunt bijwerken.

Reisschema formulier

De reisschema-component toont een formulier voor het reisschema waarmee gebruikers kunnen interageren.

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

Door het reisschema te wijzigen in een van onze reisschema-componenten, wordt het reisschema-update-evenement geactiveerd voor elke voorraad die je momenteel op de pagina weergeeft.

Account

De accountknop stelt je in staat Wink-authenticatie aan je site toe te voegen.

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

Account webcomponent — *Account knop webcomponent*

Door op de knop te klikken, wanneer de gebruiker niet is geauthenticeerd, wordt de gebruiker doorgestuurd om zich te authenticeren. Wanneer de gebruiker is geauthenticeerd, wordt het profielpictogram van de gebruiker weergegeven.

Wanneer je op de knop klikt, opent het de gebruikersspecifieke dropdown.

TripPay insluiten

Er zijn twee dingen die je moet opnemen in elke pagina waar je de TripPay betalings-webcomponent wilt gebruiken.

Neem onze stylesheet op.
Neem onze Javascript op.

Stylesheet

Neem onze CSS-stijlen op in de head van je document.

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

Javascript

Neem onze Javascript op aan het einde van je document. (We raden aan direct boven de sluitende body-tag).

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

Je site is nu klaar en kan onze webcomponenten weergeven.

Componenten

Betaling

De betalingscomponent stelt je in staat TripPay te informeren dat een reiziger iets wil kopen en de regels en prijzen voor die items.

Er is één verplicht attribuut voor de widget:

id De identificatie van het boekingscontract dat je wilt uitvoeren.

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

De widget bereidt het contract voor uitvoering voor en toont betalingsgegevens (Figuur 1) aan de gebruiker om de boeking af te ronden.

Fouten

Als je een foutmelding krijgt bij het insluiten van een van onze webcomponenten, zowel op WinkLinks als op je eigen website, kunnen er een paar dingen mis zijn gegaan:

Beschikbaarheid

De voorraad is mogelijk niet langer beschikbaar. Ga naar Wink Studio en controleer of de status van de “kaart” beschikbaar is. Als dat niet zo is, wordt deze rood weergegeven. In dat geval kun je wachten en misschien maakt de leverancier het weer beschikbaar of verwijder je het uit je lijst.

Verwijderd

De voorraad kan zijn verwijderd. Ga naar Wink Studio en controleer of de status van de “kaart” beschikbaar is. Als dat niet zo is, wordt deze rood weergegeven. In dat geval kun je wachten en misschien maakt de leverancier het weer beschikbaar of verwijder je het uit je lijst.

Aanpassing

Je hebt mogelijk per ongeluk de aanpassing verwijderd die je hebt gedefinieerd om samen met je voorraad te gebruiken. Zorg ervoor dat de aanpassing nog beschikbaar is en stel een nieuwe in als er een ontbreekt.

Applicatie

Dit is alleen voor webontwikkelaars. Als je per ongeluk de Applicatie hebt verwijderd waardoor de client-ID niet meer beschikbaar is, maak dan een nieuwe applicatie aan en gebruik de nieuwe client-ID om onze Webcomponenten in te sluiten.