Salta ai contenuti

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:

  1. 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.

Esistono tre tipi di griglie:

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

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.

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
  1. Fare clic su Actions pulsante sul Favorites lista.
  2. Fare clic su Create a grid pulsante.
  3. Verrà visualizzata una nuova finestra in cui potrai assegnare un nome alla griglia. Vedi sotto.
  4. 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.

Il modulo consente di personalizzare la griglia nei seguenti modi:

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

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

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.

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
  1. Fare clic su Actions sulla ricerca salvata.
  2. Fare clic su Create a grid pulsante.
  3. Verrà visualizzata una nuova finestra in cui potrai assegnare un nome alla griglia. Vedi sotto.
  1. 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.

Il modulo consente di personalizzare la griglia nei seguenti modi:

  1. Assegnagli un nome, così potrai ricordare di cosa tratta la griglia.
  2. Selezionare il Personalizzazione che vuoi applicare a questa griglia.
  3. Seleziona il lato iniziale della carta che desideri che gli utenti vedano per primo. Per impostazione predefinita, è il lato nativo di quell’inventario.
  4. Seleziona il badge che desideri utilizzare sulla scheda. Un badge consente agli utenti di confrontare l’inventario su una metrica aggregata come eco-friendly.
  5. Aggiungi parole chiave, separate da una virgola, che verranno utilizzate da Web crawler.
  6. Aggiungi titoli e descrizioni nelle lingue che desideri siano visualizzate dall’utente.
  7. Fare clic su Save pulsante per continuare.
Griglia di ricerca salvata
Voce della griglia di ricerca salvata con menu azioni compresso
<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.

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

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

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

Griglia classificata
Una griglia classificata con menu azioni compresso

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.

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

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