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.

Incrustar Wink

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

Inclou el nostre full d’estil.
Inclou el nostre Javascript.
Inclou el nostre carregador d’aplicacions.

Full d’estils

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>

Javascript

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.

components

Llegiu sobre la nostra biblioteca de components a continuació.

Carregador d’aplicacions

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>

Carregador de contingut

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.

Cerca

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>

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

Itinerari

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

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

Cerca

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>

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

Formulari d’itinerari

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.

Compte

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.

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

Incrusta TripPay

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

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

Full d’estils

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>

Javascript

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.

components

Pagament

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.