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

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

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

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

Di seguito puoi leggere informazioni sulla nostra libreria di componenti.

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

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.

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

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

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

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

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.

Account

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.

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

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

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

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

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:

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*