Grids

Una griglia rappresenta un elenco di fornitori e inventario e ne espone i dettagli tramite un’interfaccia utente interattiva e prenotabile. La griglia supporta la visualizzazione di qualsiasi inventario dall’elenco selezionato o dalla ricerca salvata. Un utente interagisce con una griglia nello stesso modo in cui interagisce con un singolo individuo.cartacon una caratteristica aggiuntiva:

Scorrere le pagine della griglia cliccando suShow morepulsante (quando sono disponibili più articoli).

Anteprima della griglia — *Griglia che mostra più tipologie di stanze*

Qui sopra è riportato un esempio della nostra griglia che mostra un elenco di schede relative alla tipologia di camera.

Il resto dell’articolo ti guiderà passo passo nella creazione, nella personalizzazione e nella presentazione della griglia ai tuoi utenti.

Tipi di griglia

Esistono tre tipi di griglie:

Griglia basata su unelenco curato.
Griglia basata su unricerca salvata.
Griglia griglia basata su una posizione e criteri di ordinamento (cioè griglia classificata).

Griglia di elenco curata

Si tratta di una griglia che utilizza l’inventario che hai raccolto in uno dei tuoi elenchi curati e converte l’elenco in un inventario di viaggio prenotabile che puoi mostrare ai tuoi utenti.

Creare

Vai aInventory > Curated Listsdalla barra di navigazione principale. Per questo esempio, useremo il tuoFavoriteslista. Se non hai ancora aggiunto nulla alla tuaFavorites, vai aRicercaper imparare come fare.

Crea una griglia per l'elenco dei curatori — *Crea un modulo di griglia di elenco curato*

Fare clic su Actions pulsante sul Favorites lista.
Fare clic su Create a grid pulsante.
Verrà visualizzata una nuova finestra in cui potrai assegnare un nome alla griglia. Vedi sotto.
Clic OK pulsante per continuare.

La tua griglia è stata creata. Vai aTools > Gridsdalla barra di navigazione principale e fare clic suCurated Gridsper vedere la nuova griglia.

Personalizzare

Il modulo consente di personalizzare la griglia nei seguenti modi:

Assegnagli un nome, così potrai ricordare di cosa tratta la griglia.
Selezionare il Personalizzazione che vuoi applicare a questa griglia.
Seleziona il lato iniziale della carta che desideri che gli utenti vedano per primo. Per impostazione predefinita, è il lato nativo di quell’inventario.
Seleziona il badge che desideri utilizzare sulla scheda. Un badge consente agli utenti di confrontare l’inventario su una metrica aggregata come eco-friendly.
Aggiungi parole chiave, separate da una virgola, che verranno utilizzate da Web crawler.
Aggiungi titoli e descrizioni nelle lingue che desideri siano visualizzate dall’utente.
Fare clic su Save pulsante per continuare.

Condividere

Griglia di elenco curata — *Voce della griglia dell’elenco curato con menu azioni compresso*

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

AggiornamentoAggiorna la configurazione della griglia.
Aggiungi a WinkLinksAggiunge la griglia al tuo account WinkLinks.
IncorporaTi mostra come incorporare questa griglia comeGriglianel tuo sito web.
Utilizzo con WordPressTi mostra come utilizzare il nostroPlugin di WordPressper incorporare questa griglia nel tuo sito web.

Di seguito illustreremo più dettagliatamente alcune di queste opzioni.

Incorpora

<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 griglia nel tuo sito:

La riga 3 mostra come incorporare gli stili Wink nel tuo sito.
Le righe da 6 a 9 mostrano come utilizzare ilwink-content-loaderWeb Component e digli 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 ilwink-app-loaderWeb Component e indicagli di recuperare le preferenze di configurazione a livello di pagina.

Griglia di ricerca salvata

Si tratta di una griglia che utilizza l’inventario nella query di ricerca salvata e converte i risultati della ricerca in un inventario di viaggi prenotabili che puoi mostrare ai tuoi utenti.

Creare

Vai aInventory > Saved searchesdalla barra di navigazione principale. Se non hai ancora creato una ricerca salvata, vai suRicercaper imparare come fare.

Crea griglia di ricerca salvata — *Crea un modulo di griglia di ricerca salvata*

Fare clic su Actions sulla ricerca salvata.
Fare clic su Create a grid pulsante.
Verrà visualizzata una nuova finestra in cui potrai assegnare un nome alla griglia. Vedi sotto.

Fare clicOKpulsante per continuare.

La tua griglia è stata creata. Vai aTools > Gridsdalla barra di navigazione principale e fare clic suSaved Search Gridsper vedere la nuova griglia.

Personalizzare

Il modulo consente di personalizzare la griglia nei seguenti modi:

Assegnagli un nome, così potrai ricordare di cosa tratta la griglia.
Selezionare il Personalizzazione che vuoi applicare a questa griglia.
Seleziona il lato iniziale della carta che desideri che gli utenti vedano per primo. Per impostazione predefinita, è il lato nativo di quell’inventario.
Seleziona il badge che desideri utilizzare sulla scheda. Un badge consente agli utenti di confrontare l’inventario su una metrica aggregata come eco-friendly.
Aggiungi parole chiave, separate da una virgola, che verranno utilizzate da Web crawler.
Aggiungi titoli e descrizioni nelle lingue che desideri siano visualizzate dall’utente.
Fare clic su Save pulsante per continuare.

Condividere

Griglia di ricerca salvata — *Voce della griglia di ricerca salvata con menu azioni compresso*

Incorpora

<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 griglia nel tuo sito:

La riga 3 mostra come incorporare gli stili Wink nel tuo sito.
Le righe da 6 a 9 mostrano come utilizzare ilwink-content-loaderWeb Component e digli 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 ilwink-app-loaderWeb Component e indicagli di recuperare le preferenze di configurazione a livello di pagina.

Griglia classificata

Creare

Crea una griglia classificata navigando versoTools > Gridse clicca suRanked Gridscheda. Fare clic suCreate ranked gridpulsante.

Personalizzare

Il modulo consente di personalizzare la griglia di classificazione nei seguenti modi:

Scegli una destinazione. Ad esempio Tokyo.
Assegnagli un nome, così potrai ricordare di cosa tratta la griglia. Ad esempio, hotel eco-compatibili a Tokyo
Selezionare il Personalizzazione che vuoi applicare a questa griglia.
Seleziona il lato iniziale della carta che desideri che gli utenti vedano per primo. Per impostazione predefinita, è il lato nativo di quell’inventario.
Scegli in base alla caratteristica in base alla quale ordinare le proprietà. Ad esempio, eco-compatibilità.
Aggiungi parole chiave, separate da una virgola, che verranno utilizzate da Web crawler.
Aggiungi titoli e descrizioni nelle lingue che desideri siano visualizzate dall’utente.
Fare clic su Save pulsante 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

Qui sopra è mostrata un’immagine con tutte le azioni disponibili per la griglia rankd:

AggiornamentoAggiorna la configurazione della griglia.
Aggiungi a WinkLinksAggiunge la griglia classificata al tuo account WinkLinks.
IncorporaTi mostra come incorporare questa griglia comeGriglianel tuo sito web.
Utilizzo con WordPressTi mostra come utilizzare il nostroPlugin di WordPressper incorporare questa scheda nel tuo sito web.

Di seguito illustreremo più dettagliatamente alcune di queste opzioni.

Incorpora

<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 griglia nel tuo sito:

La riga 3 mostra come incorporare gli stili Wink nel tuo sito.
Le righe da 6 a 9 mostrano come utilizzare ilwink-content-loaderWeb Component e indicagli 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 ilwink-app-loaderWeb Component e indicagli di recuperare le preferenze di configurazione a livello di pagina.

API

Gli sviluppatori che desiderano gestire le griglie possono andare suSviluppatori > API > Inventario.

Ulteriori letture

Scopri di più sulla nostra collezione diComponenti Web.
Scopri di più suPlugin Wink per WordPress.