Salta ai contenuti

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.

Ci sono tre cose che devi includere in ogni pagina in cui vuoi visualizzare uno dei nostri componenti web.

  1. Includi il nostro foglio di stile.
  2. Includi il nostro Javascript.
  3. Includi il nostro caricatore di applicazioni.

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>

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.

Di seguito puoi leggere informazioni sulla nostra libreria di componenti.

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>

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 èRANKEDe 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.

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>
Componente web di ricerca
Componente web di ricerca

Cliccando sul componente qui sopra si apre una finestra modale che consente di digitare la destinazione o l’hotel che si sta cercando.

Ricerca modale
Ricerca modale con risultati

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>
Componente web dell'itinerario
Componente web dell’itinerario

Cliccando sul pulsante qui sopra si apre una finestra modale che ti consente di aggiornare il tuo itinerario.

Ricerca modale
Selettore di itinerario come modale

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>
Componente web di ricerca
Componente web di ricerca

Cliccando sul pulsante qui sopra si apre una finestra modale che ti consente di aggiornare il tuo itinerario.

Ricerca modale
Selettore di itinerario come modale

Il componente Itinerario visualizza un modulo di itinerario con cui gli utenti possono interagire.

<html>
<body>
<wink-itinerary-form></wink-itinerary-form>
</body>
</html>
Modulo itinerario componente web
Componente web del modulo itinerario

Modificando l’itinerario in uno qualsiasi dei nostri componenti, si attiva l’evento di aggiornamento dell’itinerario per qualsiasi inventario attualmente visualizzato sulla pagina.

Il pulsante Account ti consente di aggiungere l’autenticazione Wink al tuo sito.

<html>
<body>
<wink-account></wink-account>
</body>
</html>
Componente web dell'account
Componente web del pulsante Account

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.

Pulsante Account una volta autenticato
Componente web del pulsante Account (autenticato)

Facendo clic sul pulsante, si apre il menu a discesa specifico dell’utente.

Pulsante Account una volta autenticato
Componente web del pulsante Account (apri)

Ci sono due cose che devi includere in ogni pagina in cui vuoi utilizzare il componente web di pagamento TripPay.

  1. Includi il nostro foglio di stile.
  2. Includi il nostro Javascript.

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>

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.

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:

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

Dettagli di pagamento
Figura 1. Esempio di modulo di pagamento