Componenti Web

I Componenti Web sono uno standard che ti permette di integrare intere funzionalità Javascript nel tuo sito web senza sapere programmare. Grazie a questa tecnologia innovativa, puoi incorporare l’inventario viaggi di Wink con pochissimo sforzo. Questo articolo ti guida attraverso la nostra collezione di componenti web e ti mostra come usarli.

Incorpora Wink

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

Includi il nostro foglio di stile.
Includi il nostro Javascript.
Includi il nostro loader dell’applicazione.

Foglio di stile

Includi i nostri stili CSS nell’head 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 subito prima del tag di chiusura </body>).

<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 mostrare i nostri componenti web.

Componenti

Leggi la nostra libreria di componenti qui sotto.

Loader dell’applicazione

Il loader è responsabile di mantenere lo stato e gestire l’interazione tra i nostri componenti. (Includilo sotto il nostro Javascript).

<html>
  <body>
    <wink-app-loader
      client-id="IL TUO CLIENT ID QUI"
      configuration-id="IL TUO ID DI PERSONALIZZAZIONE QUI"
    ></wink-app-loader>
  </body>
</html>

Loader dei contenuti

Il loader dei contenuti è il cuore della nostra libreria di componenti web. È responsabile di mostrare il tuo inventario (card, griglie, mappe).

Attributi disponibili:

layout
id
sort

L’attributo sort è disponibile solo quando il layout è RANKED e non vuoi usare una griglia ranked esistente. In questi casi, lascia id 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>

Puoi trovare esempi per card, griglie e mappe.

Lookup

Lookup funziona benissimo insieme a una delle tue griglie ranked. Permette ai tuoi utenti di cercare hotel e destinazioni e la griglia si aggiorna in risposta ai risultati della ricerca.

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>

Cliccando sul componente sopra si apre una finestra modale che ti permette di digitare la destinazione o l’hotel che stai cercando.

Itinerario

Il pulsante itinerario mostra l’itinerario corrente sul pulsante. Quando ci clicchi, il selettore completo dell’itinerario si apre come modale.

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>

Componente web Itinerario

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

Ricerca

Ricerca è un pulsante solo icona del selettore itinerario. Quando ci clicchi, il selettore completo dell’itinerario si apre come modale.

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>

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

Form itinerario

Il componente itinerario mostra un form 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 itinerario, si attiva l’evento di aggiornamento itinerario per qualsiasi inventario tu stia mostrando nella pagina.

Account

Il pulsante account ti permette di aggiungere l’autenticazione Wink al tuo sito.

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>

Cliccando sul pulsante, quando l’utente non è autenticato, verrà reindirizzato per autenticarsi. Quando l’utente è autenticato, viene mostrata l’icona del profilo utente.

Cliccando sul pulsante, si apre il menu a discesa specifico per l’utente.

Incorpora TripPay

Ci sono due cose che devi includere in ogni pagina dove vuoi usare 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’head 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 subito prima del tag di chiusura <body>).

<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 mostrare i nostri componenti web.

Componenti

Pagamento

Il componente pagamento ti permette di informare TripPay che un viaggiatore vuole acquistare qualcosa e le regole e i prezzi per quegli articoli.

C’è un attributo obbligatorio per il widget:

id L’identificatore del contratto di prenotazione che vuoi eseguire.

<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

Il widget prepara il contratto per l’esecuzione e mostra i dettagli di pagamento (Figura 1) all’utente per finalizzare la prenotazione.

Dettagli pagamento — *Figura 1. Esempio di form di pagamento*

Errori

Se ricevi un messaggio di errore quando incorpori uno dei nostri componenti web, sia su WinkLinks che sul tuo sito web, ci sono alcune cose che potrebbero essere andate storte:

Disponibilità

L’inventario potrebbe non essere più disponibile. Vai su Wink Studio e verifica se lo stato della “card” è disponibile. Se non lo è, sarà evidenziato in rosso. In questo caso, puoi aspettare e magari il fornitore lo rende nuovamente disponibile oppure rimuoverlo dalla tua lista.

Rimosso

L’inventario potrebbe essere stato rimosso. Vai su Wink Studio e verifica se lo stato della “card” è disponibile. Se non lo è, sarà evidenziato in rosso. In questo caso, puoi aspettare e magari il fornitore lo rende nuovamente disponibile oppure rimuoverlo dalla tua lista.

Personalizzazione

Potresti aver accidentalmente rimosso la personalizzazione che avevi definito per accompagnare il tuo inventario. Assicurati che la personalizzazione sia ancora disponibile e imposta una nuova se manca.

Applicazione

Questo è solo per sviluppatori web. Se hai accidentalmente rimosso l’Applicazione ; rendendo il client ID non più disponibile, crea una nuova applicazione e usa il nuovo client ID per incorporare i nostri Componenti Web.