Saltar al contingut

Components web

Components webés un estàndard que us permet integrar funcions completes de Javascript al vostre lloc web sense saber programar. Gràcies a aquesta tecnologia tan interessant, us permet integrar l’inventari de viatges de Wink amb molt poca feina. Aquest article us guiarà a través de la nostra col·lecció de components web i us mostrarà com utilitzar-los.

Hi ha tres coses que heu d’incloure a qualsevol pàgina on vulgueu mostrar un dels nostres components web.

  1. Inclou el nostre full d’estil.
  2. Inclou el nostre Javascript.
  3. Inclou el nostre carregador d’aplicacions.

Inclou els nostres estils CSS a la capçalera del document.

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

Incloeu el nostre Javascript a la part inferior del document. (Recomanem que estigui immediatament a sobre de l’etiqueta final del cos).

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

El vostre lloc web ja està a punt i pot mostrar els nostres components web.

Llegiu sobre la nostra biblioteca de components a continuació.

El carregador és responsable de mantenir l’estat i gestionar la interacció entre els nostres components.Inclou-ho sota el nostre Javascript).

<html>
<body>
<wink-app-loader
client-id="YOUR CLIENT ID GOES HERE"
configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
></wink-app-loader>
</body>
</html>

El carregador de contingut és el cor de la nostra biblioteca de components web. És responsable de mostrar el vostre inventari (targetes, quadrícules, mapes).

Atributs disponibles:

  • disseny
  • identificador
  • ordenar

L’atributsortnomés està disponible quan el disseny ésRANKEDi no voleu utilitzar una graella classificada existent. Per a aquests casos, deixeuidbuit.

Tipus de disseny disponibles:

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

Tipus d’ordenació disponibles:

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

Es poden trobar mostres per acartes,quadrículesimapes.

La cerca funciona molt bé juntament amb una de les teves quadrícules classificades. Permet als usuaris cercar hotel i destinació i la quadrícula s’actualitza en resposta al resultat de la cerca.

<html>
<body>
<wink-lookup></wink-lookup>
</body>
</html>
Component web de cerca
Component web de cerca

En fer clic al component de dalt, s’obre una finestra modal que us permet escriure la destinació o l’hotel que esteu cercant.

Modal de cerca
Modal de cerca amb resultats

El botó d’itinerari mostra l’itinerari actual. Quan hi feu clic, el selector d’itinerari complet es mostra com a modal.

<html>
<body>
<wink-itinerary></wink-itinerary>
</body>
</html>
Component web d'itinerari
Component web d’itinerari

En fer clic al botó de dalt, s’obre una finestra modal que et permet actualitzar el teu itinerari.

Modal de cerca
Selector d’itinerari com a modal

La cerca és un botó que només té una icona al selector d’itineraris. Quan hi feu clic, el selector d’itinerari complet es mostra com a modal.

<html>
<body>
<wink-search></wink-search>
</body>
</html>
Component web de cerca
Component web de cerca

En fer clic al botó de dalt, s’obre una finestra modal que et permet actualitzar el teu itinerari.

Modal de cerca
Selector d’itinerari com a modal

El component d’itinerari mostra un formulari d’itinerari amb el qual els usuaris poden interactuar.

<html>
<body>
<wink-itinerary-form></wink-itinerary-form>
</body>
</html>
Component de formulari web d'itinerari
Component web del formulari d’itinerari

En canviar l’itinerari, en qualsevol dels nostres components d’itinerari, s’activa l’esdeveniment d’actualització de l’itinerari a qualsevol inventari que actualment es mostri a la pàgina.

El botó del compte us permet afegir l’autenticació Wink al vostre lloc.

<html>
<body>
<wink-account></wink-account>
</body>
</html>
Component web del compte
Component web del botó del compte

En fer clic al botó, quan l’usuari no està autenticat, es reenviarà l’usuari per autenticar-se. Quan l’usuari està autenticat, es mostra la icona del perfil d’usuari.

Botó de compte quan s'ha autenticat
Component web del botó de compte (autenticat)

Quan feu clic al botó, s’obre el menú desplegable específic de l’usuari.

Botó de compte quan s'ha autenticat
Component web del botó de compte (obrir)

Hi ha dues coses que heu d’incloure a qualsevol pàgina on vulgueu utilitzar el component web de pagament de TripPay.

  1. Inclou el nostre full d’estil.
  2. Inclou el nostre Javascript.

Inclou els nostres estils CSS a la capçalera del document.

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

Incloeu el nostre Javascript a la part inferior del document. (Recomanem que estigui immediatament a sobre de l’etiqueta final del cos).

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

El vostre lloc web ja està a punt i pot mostrar els nostres components web.

El component de pagament et permet informar a TripPay que un viatger vol comprar alguna cosa i les normes i els preus d’aquests articles.

Hi ha un atribut obligatori per al widget:

  • idL’identificador del contracte de reserva que voleu executar.
<html>
<body>
<trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
</body>
</html>

Per aprendre com generar el contracte de reservaid, llegeix la guia:Integració amb TripPay.

El widget prepara el contracte per a l’execució i mostra els detalls del pagament(Figura 1)a l’usuari per finalitzar la reserva.

Detalls del pagament
Figura 1. Exemple de formulari de pagament