Griglie

Una griglia rappresenta una lista di fornitori e inventario e ne espone i dettagli tramite un’interfaccia utente interattiva e prenotabile a griglia. La griglia supporta la visualizzazione di qualsiasi inventario dalla tua lista curata o ricerca salvata. Un utente interagisce con una griglia allo stesso modo in cui interagisce con una singola card con un’ulteriore funzionalità:

Paginare attraverso la griglia cliccando il pulsante Mostra altro (quando sono disponibili altri elementi).

Anteprima griglia — *Griglia che mostra più tipologie di camere*

Sopra è mostrato un esempio della nostra griglia che mostra una lista di card di tipologie di camere.

Il resto di questo articolo ti guida su come creare, personalizzare ed esporre la griglia ai tuoi utenti.

Tipi di griglia

Ci sono tre tipi di griglie:

Griglia basata su una lista curata.
Griglia basata su una ricerca salvata.
Griglia basata su una località e criteri di ordinamento (cioè Griglia classificata).

Griglia da lista curata

Questa è una griglia che utilizza l’inventario che hai raccolto in una delle tue liste curate e converte la lista in inventario di viaggio prenotabile che puoi mostrare ai tuoi utenti.

Creare

Naviga su Inventario > Liste curate dalla barra di navigazione principale. Per questo esempio, useremo la tua lista Preferiti. Se non hai ancora aggiunto nulla ai tuoi Preferiti, vai su Ricerca per imparare come fare.

Clicca il pulsante Azioni sulla lista Preferiti.
Clicca il pulsante Crea una griglia.
Si aprirà una nuova finestra che ti permetterà di dare un nome alla tua griglia. Vedi sotto.
Clicca il pulsante OK per continuare.

La tua griglia è stata creata. Naviga su Strumenti > Griglie dalla barra di navigazione principale e clicca sulla scheda Griglie curate per vedere la tua nuova griglia.

Personalizzare

Il modulo ti permette di personalizzare la tua griglia nei seguenti modi:

Assegna un nome per ricordarti di cosa tratta la griglia.
Seleziona la Personalizzazione che vuoi applicare a questa griglia.
Seleziona il lato iniziale della card che vuoi che gli utenti vedano per primo. Di default, è il lato nativo di quell’inventario.
Seleziona il badge che vuoi usare sulla card. Un badge permette agli utenti di confrontare l’inventario su una metrica aggregata come eco-friendly.
Aggiungi parole chiave, separate da una virgola, che saranno usate dai Web Crawler.
Aggiungi titoli e descrizioni nelle lingue che vuoi che l’utente veda.
Clicca il pulsante Salva per continuare.

Condividere

Griglia da lista curata — *Voce della griglia da lista curata con menu azioni collassato*

Sopra è mostrata un’immagine con tutte le azioni disponibili per la tua griglia:

Aggiorna Aggiorna la configurazione della tua griglia.
Aggiungi a WinkLinks Aggiunge la griglia al tuo account WinkLinks.
Incorpora Ti mostra come incorporare questa griglia come un Grid nel tuo sito web.
Usa con WordPress Ti mostra come usare il nostro plugin WordPress per incorporare questa griglia nel tuo sito web.

Copriamo alcune di queste opzioni, in dettaglio, di seguito.

Incorporare

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="LIST"
       id="9a212b5e-62a7-11ef-ac3f-42004e494300"
    ></wink-content-loader>

    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>

    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

Ecco come incorporare la tua griglia nel tuo sito:

La riga 3 mostra come incorporare gli stili Wink nel tuo sito.
Le righe da 6 a 9 mostrano come usare il Web Component wink-content-loader e indicargli di recuperare una griglia per il tuo codice.
La riga 11 mostra come incorporare il nostro Javascript nel tuo sito.
La riga 13 mostra come incorporare il Web Component wink-app-loader e indicargli di recuperare le tue preferenze di configurazione a livello di pagina.

Griglia da ricerca salvata

Questa è una griglia che utilizza l’inventario nella tua query di ricerca salvata e converte i risultati della ricerca in inventario di viaggio prenotabile che puoi mostrare ai tuoi utenti.

Creare

Naviga su Inventario > Ricerche salvate dalla barra di navigazione principale. Se non hai ancora creato una ricerca salvata, vai su Ricerca per imparare come fare.

Clicca il pulsante Azioni sulla tua ricerca salvata.
Clicca il pulsante Crea una griglia.
Si aprirà una nuova finestra che ti permetterà di dare un nome alla tua griglia. Vedi sotto.

Clicca il pulsante OK per continuare.

La tua griglia è stata creata. Naviga su Strumenti > Griglie dalla barra di navigazione principale e clicca sulla scheda Griglie da ricerche salvate per vedere la tua nuova griglia.

Personalizzare

Il modulo ti permette di personalizzare la tua griglia nei seguenti modi:

Assegna un nome per ricordarti di cosa tratta la griglia.
Seleziona la Personalizzazione che vuoi applicare a questa griglia.
Seleziona il lato iniziale della card che vuoi che gli utenti vedano per primo. Di default, è il lato nativo di quell’inventario.
Seleziona il badge che vuoi usare sulla card. Un badge permette agli utenti di confrontare l’inventario su una metrica aggregata come eco-friendly.
Aggiungi parole chiave, separate da una virgola, che saranno usate dai Web Crawler.
Aggiungi titoli e descrizioni nelle lingue che vuoi che l’utente veda.
Clicca il pulsante Salva per continuare.

Condividere

Griglia da ricerca salvata — *Voce della griglia da ricerca salvata con menu azioni collassato*

Incorporare

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="LIST"
       id="be3130d5-62a7-11ef-ac3f-42004e494300"
    ></wink-content-loader>

    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>

    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

Ecco come incorporare la tua griglia nel tuo sito:

La riga 3 mostra come incorporare gli stili Wink nel tuo sito.
Le righe da 6 a 9 mostrano come usare il Web Component wink-content-loader e indicargli di recuperare una griglia per il tuo codice.
La riga 11 mostra come incorporare il nostro Javascript nel tuo sito.
La riga 13 mostra come incorporare il Web Component wink-app-loader e indicargli di recuperare le tue preferenze di configurazione a livello di pagina.

Griglia classificata

Creare

Crea una griglia classificata navigando su Strumenti > Griglie e clicca sulla scheda Griglia classificata. Clicca sul pulsante Crea griglia classificata.

Personalizzare

Il modulo ti permette di personalizzare la tua griglia classificata nei seguenti modi:

Scegli una destinazione. Es. Tokyo.
Assegna un nome per ricordarti di cosa tratta la griglia. Es. Hotel eco-friendly a Tokyo
Seleziona la Personalizzazione che vuoi applicare a questa griglia.
Seleziona il lato iniziale della card che vuoi che gli utenti vedano per primo. Di default, è il lato nativo di quell’inventario.
Scegli la caratteristica per ordinare le proprietà. Es. Eco-sostenibilità.
Aggiungi parole chiave, separate da una virgola, che saranno usate dai Web Crawler.
Aggiungi titoli e descrizioni nelle lingue che vuoi che l’utente veda.
Clicca il pulsante Salva per continuare.

Dopo aver salvato la tua griglia classificata, verrai reindirizzato alla pagina delle tue griglie classificate e la tua griglia sarà pronta per essere condivisa con il mondo.

Condividere

Sopra è mostrata un’immagine con tutte le azioni disponibili per la tua griglia classificata:

Aggiorna Aggiorna la configurazione della tua griglia.
Aggiungi a WinkLinks Aggiunge la griglia classificata al tuo account WinkLinks.
Incorpora Ti mostra come incorporare questa griglia come un Grid nel tuo sito web.
Usa con WordPress Ti mostra come usare il nostro plugin WordPress per incorporare questa card nel tuo sito web.

Copriamo alcune di queste opzioni, in dettaglio, di seguito.

Incorporare

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="RANKED"
       id="2483d55e-62a5-11ef-ac3f-42004e494300"
    ></wink-content-loader>

    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>

    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

Ecco come incorporare la tua griglia nel tuo sito:

La riga 3 mostra come incorporare gli stili Wink nel tuo sito.
Le righe da 6 a 9 mostrano come usare il Web Component wink-content-loader e indicargli di recuperare una griglia classificata per il tuo codice.
La riga 11 mostra come incorporare il nostro Javascript nel tuo sito.
La riga 13 mostra come incorporare il Web Component wink-app-loader e indicargli di recuperare le tue preferenze di configurazione a livello di pagina.

API

Gli sviluppatori che vogliono gestire le griglie possono andare su Developers > API > Inventory.

Ulteriori letture

Scopri di più sulla nostra collezione di Web Components.
Scopri di più sul plugin WordPress di Wink.