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
Section titled “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
Section titled “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
Section titled “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
Section titled “components”Llegiu sobre la nostra biblioteca de components a continuació.
Carregador d’aplicacions
Section titled “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
Section titled “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’atributsort
només està disponible quan el disseny ésRANKED
i no voleu utilitzar una graella classificada existent. Per a aquests casos, deixeuid
buit.
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>
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
Section titled “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>
En fer clic al botó de dalt, s’obre una finestra modal que et permet actualitzar el teu itinerari.
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
Section titled “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>
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
Section titled “Compte”El botó del compte us permet afegir l’autenticació Wink al vostre lloc.
<html> <body> <wink-account></wink-account> </body></html>
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
Section titled “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
Section titled “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
Section titled “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
Section titled “components”Pagament
Section titled “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:
id
L’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.