Componenti Web
Componenti Webè uno standard che ti permette di integrare intere funzionalità Javascript nel tuo sito web senza dover conoscere la programmazione. Grazie a questa fantastica tecnologia, puoi integrare l’inventario di viaggi Wink con il minimo sforzo. Questo articolo ti guiderà attraverso la nostra raccolta di componenti web e ti mostrerà come utilizzarli.
Incorpora Wink
Sezione intitolata “Incorpora Wink”Ci sono tre cose che devi includere in ogni pagina in cui vuoi visualizzare uno dei nostri componenti web.
- Includi il nostro foglio di stile.
- Includi il nostro Javascript.
- Includi il nostro caricatore di applicazioni.
Foglio di stile
Sezione intitolata “Foglio di stile”Includi i nostri stili CSS nell’intestazione del tuo documento.
<html> <head> <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link> </head></html>
Javascript
Sezione intitolata “Javascript”Includi il nostro Javascript in fondo al tuo documento.Consigliamo di posizionarlo subito sopra il tag del corpo finale).
<html> <body> <script src="https://elements.wink.travel/elements.js" type="module" defer></script> </body></html>
Il tuo sito è ora pronto e in grado di visualizzare i nostri componenti web.
Componenti
Sezione intitolata “Componenti”Di seguito puoi leggere informazioni sulla nostra libreria di componenti.
Caricatore di applicazioni
Sezione intitolata “Caricatore di applicazioni”Il caricatore è responsabile del mantenimento dello stato e della gestione dell’interazione tra i nostri componenti.Includilo sotto il nostro 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>
Caricatore di contenuti
Sezione intitolata “Caricatore di contenuti”Il caricatore di contenuti è il cuore della nostra libreria di componenti web. È responsabile della visualizzazione del tuo inventario (schede, griglie, mappe).
Attributi disponibili:
- disposizione
- id
- ordinare
L’attributosort
è disponibile solo quando il layout èRANKED
e non vuoi utilizzare una griglia classificata esistente. In questi casi, lasciaid
vuoto.
Tipi di layout disponibili:
AD_BANNER
MAP
HOTEL
GUEST_ROOM
MEETING_ROOM
SPA
RESTAURANT
ACTIVITY
ATTRACTION
PLACE
ADD_ON
LIST
SEARCH
RANKED
Tipi di ordinamento disponibili:
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>
I campioni possono essere trovati percarte,griglie E mappe.
Cercare
Sezione intitolata “Cercare”La funzione Lookup funziona alla grande insieme a una delle tue griglie classificate. Permette ai tuoi utenti di cercare hotel e destinazioni e la griglia si aggiorna in base ai risultati di ricerca.
<html> <body> <wink-lookup></wink-lookup> </body></html>
Cliccando sul componente qui sopra si apre una finestra modale che consente di digitare la destinazione o l’hotel che si sta cercando.
Itinerario
Sezione intitolata “Itinerario”Il pulsante “Itinerario” mostra l’itinerario corrente. Cliccandoci sopra, viene visualizzato il selettore completo dell’itinerario come finestra modale.
<html> <body> <wink-itinerary></wink-itinerary> </body></html>
Cliccando sul pulsante qui sopra si apre una finestra modale che ti consente di aggiornare il tuo itinerario.
Ricerca
Sezione intitolata “Ricerca”Cerca è un pulsante con un’icona nel selettore di itinerario. Cliccandoci, il selettore di itinerario completo viene visualizzato come finestra modale.
<html> <body> <wink-search></wink-search> </body></html>
Cliccando sul pulsante qui sopra si apre una finestra modale che ti consente di aggiornare il tuo itinerario.
Modulo itinerario
Sezione intitolata “Modulo itinerario”Il componente Itinerario visualizza un modulo di itinerario con cui gli utenti possono interagire.
<html> <body> <wink-itinerary-form></wink-itinerary-form> </body></html>
Modificando l’itinerario in uno qualsiasi dei nostri componenti, si attiva l’evento di aggiornamento dell’itinerario per qualsiasi inventario attualmente visualizzato sulla pagina.
Account
Sezione intitolata “Account”Il pulsante Account ti consente di aggiungere l’autenticazione Wink al tuo sito.
<html> <body> <wink-account></wink-account> </body></html>
Cliccando sul pulsante, se l’utente non è autenticato, verrà inoltrato alla pagina di autenticazione. Quando l’utente è autenticato, verrà visualizzata l’icona del suo profilo.
Facendo clic sul pulsante, si apre il menu a discesa specifico dell’utente.
Incorpora TripPay
Sezione intitolata “Incorpora TripPay”Ci sono due cose che devi includere in ogni pagina in cui vuoi utilizzare il componente web di pagamento TripPay.
- Includi il nostro foglio di stile.
- Includi il nostro Javascript.
Foglio di stile
Sezione intitolata “Foglio di stile”Includi i nostri stili CSS nell’intestazione del tuo documento.
<html> <head> <link rel="stylesheet" href="https://elements.trippay.io/styles.css"></link> </head></html>
Javascript
Sezione intitolata “Javascript”Includi il nostro Javascript in fondo al tuo documento.Consigliamo di posizionarlo subito sopra il tag del corpo finale).
<html> <body> <script src="https://elements.trippay.io/elements.js" type="module" defer></script> </body></html>
Il tuo sito è ora pronto e in grado di visualizzare i nostri componenti web.
Componenti
Sezione intitolata “Componenti”Pagamento
Sezione intitolata “Pagamento”La componente di pagamento consente di informare TripPay che un viaggiatore desidera acquistare qualcosa, nonché di conoscere le regole e i prezzi applicabili a tali articoli.
C’è un attributo obbligatorio per il widget:
id
Identificativo del contratto di prenotazione che si desidera venga eseguito.
<html> <body> <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay> </body></html>
Per sapere come generare il contratto di prenotazioneid
, leggi la guida:Integrazione con TripPay.
Il widget prepara il contratto per l’esecuzione e visualizza i dettagli del pagamento(Figura 1)all’utente per finalizzare la prenotazione.