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 su
Show more
pulsante (quando sono disponibili più articoli).
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
Sezione intitolata “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
Sezione intitolata “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.
Vai aInventory > Curated Lists
dalla barra di navigazione principale. Per questo esempio, useremo il tuoFavorites
lista.
Se non hai ancora aggiunto nulla alla tuaFavorites
, vai aRicercaper imparare come fare.
- Fare clic su
Actions
pulsante sulFavorites
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 > Grids
dalla barra di navigazione principale e fare clic suCurated Grids
per vedere la nuova griglia.
Personalizzare
Sezione intitolata “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
Sezione intitolata “Condividere”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
Sezione intitolata “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
Sezione intitolata “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.
Vai aInventory > Saved searches
dalla barra di navigazione principale.
Se non hai ancora creato una ricerca salvata, vai suRicercaper imparare come fare.
- 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 clic
OK
pulsante per continuare.
La tua griglia è stata creata. Vai aTools > Grids
dalla barra di navigazione principale e fare clic suSaved Search Grids
per vedere la nuova griglia.
Personalizzare
Sezione intitolata “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
Sezione intitolata “Condividere”Incorpora
Sezione intitolata “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
Sezione intitolata “Griglia classificata”Crea una griglia classificata navigando versoTools > Grids
e clicca suRanked Grid
scheda. Fare clic suCreate ranked grid
pulsante.
Personalizzare
Sezione intitolata “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
Sezione intitolata “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
Sezione intitolata “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.
Gli sviluppatori che desiderano gestire le griglie possono andare suSviluppatori > API > Inventario.
Ulteriori letture
Sezione intitolata “Ulteriori letture”- Scopri di più sulla nostra collezione diComponenti Web.
- Scopri di più suPlugin Wink per WordPress.