Il Dynamic Repeater è un widget di design basato su collezioni che ti permette di creare rapidamente e facilmente layout strutturati e ripetitivi, dove il design è lo stesso per ogni elemento, ma il contenuto è diverso; ad esempio elenchi di prodotti, eventi o servizi.
Il contenuto visualizzato nel Ripetitore è gestito da una collezione interna. Per familiarizzare con le collezioni interne e il loro funzionamento, consulta Dynamic Content: Internal Collections.
Nota
Mentre il Ripetitore Dinamico è in fase di test, sono disponibili solo le collezioni interne, esterne e di immagini. In futuro prevediamo di supportare Google Sheets e Airtable.
La confezione (chiamata anche "cornice") del widget Ripetitore è il contenitore per gli elementi della collezione. Nell'immagine qui sotto, sono riportati tre oggetti della collezione.
Ogni elemento della collezione mostra il contenuto di una riga nella collezione interna collegata. Questo è reso possibile collegando i widget alle colonne nella collezione interna.
Ad esempio, su un sito web di adozione di cani c'è una collezione interna che elenca i cani adottabili. Guarda un'immagine della collezione qui sotto.
Per visualizzare i cani nel Dynamic Repeater, colonne e widget sono collegati come segue:
-
La colonna "Immagine" è collegata a un widget Immagine.
-
La colonna "Nome cane" è collegata a un widget Intestazione Piccola.
-
La colonna "Descrizione del cane" è collegata a un widget di testo.
Quando aggiungi il Dynamic Repeater alla tela, viene creata una collezione interna di campioni che viene collegata al Dynamic Repeater. Puoi modificare questa raccolta di campioni o creare una nuova collezione da collegare al Dynamic Repeater.
Per aggiungere un widget Dynamic Repeater:
-
Nella sezione Elementi di Layout del pannello widget , localizza il Ripetitore Dinamico e trascinalo sulla tela. Nota che quando aggiungi il Repeater alla tela, viene creata una collezione interna di esempio con 4 elementi della collezione (righe nella collezione) che si popolano nel Dynamic Repeater. Questo serve a visualizzare il design prima di aggiungere i tuoi contenuti.
-
Se lo desideri, puoi aggiungere e rimuovere widget dal Dynamic Repeater per soddisfare le tue esigenze. Non importa quale elemento della collezione modifichi, le modifiche aggiorneranno automaticamente tutti gli altri elementi della collezione. Nota che i nuovi widget dovranno essere collegati manualmente a una colonna specifica della collezione. Questo sarà completato in una fase successiva.
Puoi modificare il design del wrapper del Dynamic Repeater o degli elementi della collezione all'interno del Dynamic Repeater. Nota che le modifiche al design apportate a un oggetto della collezione si applicheranno a tutti gli altri. Questo ti permette di risparmiare tempo invece di applicare manualmente modifiche al design a ogni singolo elemento della collezione e rischiare errori.
Per modificare il design del wrapper, clicca sul widget Ripetitore Dinamico per aprire il menu fluttuante e clicca su Modifica Design. Nella sezione Wrapper del pannello di progettazione puoi configurare quanto segue:
-
Design della fascia. Puoi definire il colore di sfondo del Ripetitore Dinamico, l'allineamento, la dimensione, l'animazione, la posizione (fissa o fissata) e lo spazio tra gli elementi della collezione all'interno del Ripetitore Dinamico.
Per saperne di più sulle sezioni del pannello di progettazione e su come configurare ogni opzione di design, consulta Design with Flexbox Technology.
Per saperne di più su cosa significhi "fisso" o "bloccato" in termini di posizione widget, vedi widget Posizione: Fissa e Fissata.
Per definire come gli elementi della collezione vengono visualizzati nel Ripetitore Dinamico, clicca sul widget Ripetitore Dinamico per aprire il menu fluttuante e clicca su Modifica Design. Nella sezione Layout del pannello di progettazione puoi configurare quanto segue:
-
Elementi per riga. Seleziona quanti elementi della collezione mostrare per riga. Massimo 10 oggetti per riga.
-
Gli oggetti calzano bene. Seleziona tra larghezza fissa o elastico per adattarsi.
Per abilitare la paginazione o un'opzione di carica di più, apri la sezione Navigazione del pannello di progettazione e attiva l'interruttore Abilita navigazione . Una volta abilitata la navigazione, configura quanto segue:
-
Paginazione o carica ancora. La paginazione divide gli elementi della collezione in pagine tra cui i visitatori navigano. Load more mostra una quantità fissa di elementi della collezione, poi ogni clic carica un set aggiuntivo di elementi della collezione.
-
Elementi per pagina. Definisci quanti elementi della collezione mostrare per pagina o prima che vengano caricati altri risultati.
Per apportare modifiche al design dei widget all'interno di un elemento della collezione, clicca su un singolo elemento della collezione per aprire il menu fluttuante e clicca su Modifica Design. Tutte le modifiche al design saranno applicate a ciascun elemento nel Repeater. Nella sezione Layout del pannello di progettazione puoi configurare quanto segue:
-
Allineamento dei contenuti. Definisci l'allineamento orizzontale e verticale dei contenuti all'interno dell'elemento della collezione.
-
Direzione di impilamento. Seleziona se i widget all'interno del Ripetitore sono impilati orizzontalmente o verticalmente.
-
Avvolgi e allinea le file. Se vuoi, puoi abilitare i widget di ogni elemento della collezione per inserirsi in un'altra riga. Se scegli di avvolgere, devi anche definire l'allineamento delle righe.
È importante notare che la larghezza o l'altezza degli elementi della collezione nel Ripetitore Dinamico non possono essere cambiate. L'oggetto della collezione si adatta al 100% della confezione, il che significa che l'altezza e la larghezza dell'articolo sono controllate dall'altezza e dalla larghezza della confezione del Dynamic Repeater. L'altezza e la larghezza del Ripetitore Dinamico possono essere definite nella sezione Dimensione del pannello di progettazione.
Quando aggiungi il Ripetitore Dinamico alla tela, viene creata una collezione interna di campioni collegata al Ripetitore Dinamico e ai widget predefiniti al suo interno. Puoi modificare questa collezione di campioni, oppure creare una nuova collezione interna da collegare al Ripetitore Dinamico. Se aggiungi nuovi widget al Dynamic Repeater, dovranno essere collegati a una colonna di collezione.
Nota
Attualmente, il Dynamic Repeater può essere collegato solo a una collezione interna o di immagini. In futuro, prevediamo di supportare tutti i tipi di collezione.
Per collegare un Ripetitore Dinamico a una collezione:
-
Clicca sul widget Ripetitore Dinamico per aprire il menu fluttuante.
-
Clicca sull'icona a tre punti nel menu fluttuante e poi seleziona Sostituisci Collezione.
-
Nel modale, usa il menu a tendina per selezionare la collezione desiderata.
-
Clicca su Sostituisci.
-
Poi devi collegare i widget alle colonne della collezione. Clicca su un widget nel Ripetitore Dinamico per aprire il menu fluttuante, poi clicca sull'icona a tre punti e seleziona Collega ai dati.
-
Nel modale, usa il menu a tendina per selezionare la colonna nella collezione che sarà collegata al widget. Nota che verranno visualizzate solo le colonne compatibili. Ad esempio, i widget Immagine possono essere collegati solo a una colonna nella collezione con Immagine impostato come tipo di campo. Clicca su Connetti. Ripeti per ogni widget nel Ripetitore Dinamico.
Usa filtraggio e ordinamento per controllare quali elementi della collezione vengono visualizzati, in quale ordine e in quali condizioni.
Di seguito una descrizione di ciascuna opzione:
-
Ordin ti permette di ordinare gli elementi della collezione per colonna in ordine alfabetico crescente o decrescente. Ad esempio, per visualizzare una lista dei membri della squadra in ordine alfabetico basato sul loro nome, puoi ordinare per la colonna del nome nella collezione collegata e selezionare ascendente come ordine per mostrare i risultati. Può essere usato sia su pagine normali che dinamiche.
-
I filtri fissi permettono di visualizzare gli elementi della collezione con valori specifici. Ad esempio, per visualizzare un elenco di membri del team con aree di competenza nel business o nella tecnologia, crea un filtro fisso che richieda alla colonna Aree di competenza di raccolta i valori "business" o "tecnologia". Può essere usato sia su pagine normali che dinamiche.
-
I filtri dinamici permettono di collegare campi corrispondenti da due collezioni separate; una dalla collezione associata alla pagina dinamica corrente e l'altra dalla collezione collegata al widget del Ripetitore Dinamico. Questo ti permette di mostrare solo i contenuti rilevanti per una specifica pagina dinamica. Ad esempio, i filtri dinamici possono essere usati per visualizzare i post del blog della stessa categoria della pagina dinamica corrente.
Per configurare filtraggio e ordinamento:
-
Clicca sul Ripetitore Dinamico per aprire la barra fluttuante. Clicca su Collezione e seleziona Ordina e Filtra.
-
Nella sezione Visualizzazione, usa il menu a tendina Numero di elementi per selezionare quanti elementi verranno visualizzati nel widget.
-
Nella scheda Filtra e Ordina del popup, attiva l'opzione Ordina per .
-
Usa il menu a tendina Ordina per selezionare la colonna della collezione per cui vuoi ordinare. Usa le frecce su e giù accanto al menu a tendina per organizzare gli elementi della collezione in ordine alfabetico crescente o decrescente.
-
Sotto Filtri fissi, clicca su +Aggiungi filtro. Usa il menu a tendina per selezionare la colonna della collezione per cui vuoi filtrare e inserisci il/i valore esatto che deve essere raggiunto affinché gli oggetti desiderati vengano mostrati.
-
Clicca su Fatto.
Per configurare filtri dinamici su pagine dinamiche:
-
Clicca sul Ripetitore Dinamico per aprire la barra fluttuante. Clicca su Collezione e seleziona Ordina e Filtra.
-
Sotto Filtri dinamici, clicca su +Aggiungi filtro.
-
Usa il menu a tendina Collezione Servizi per selezionare un campo dalla collezione della pagina dinamica corrente.
-
Usa il menu a tendina Collezione Ripetitori per selezionare un campo dalla collezione connessa del Ripetitore Dinamico che corrisponda al campo selezionato nel menu a tendina Collezione Servizi nel passaggio precedente.
-
Clicca su Fatto.
Per aggiungere un elemento della collezione al Dynamic Repeater, devi aggiungere una nuova riga nella collezione. La riga deve contenere contenuti prima di essere popolata nel Dynamic Repeater.
Per rimuovere un elemento della collezione, elimina la riga corrispondente nella collezione.
Per aggiungere un widget, apri il pannello dei widget e trascina e rilasci il widget desiderato nel Dynamic Repeater. Il widget viene aggiunto automaticamente a tutti gli altri elementi della collezione.
Quando sei pronto a collegare il widget alla collezione, clicca sul widget per aprire il menu fluttuante. Clicca sull'icona a tre punti e seleziona Collega ai dati. Nel popup, seleziona la colonna a cui vuoi collegare il widget. Si noti che verranno visualizzate solo colonne compatibili, il che significa che i widget Immagine possono essere collegati solo a una colonna nella collezione con Immagine impostato come tipo di campo. Clicca su Connetti.
Per cambiare la connessione al widget, clicca sul widget per aprire il menu fluttuante. Clicca sull'icona a tre punti e seleziona Cambia Connessione. Usa il menu a tendina nel popup per selezionare una colonna diversa della collezione. Clicca su Connetti.
Per modificare il contenuto di un elemento nel Dynamic Repeater, clicca sul widget e apporta gli aggiornamenti desiderati. Poiché il Ripetitore Dinamico supporta il montaggio in linea, le tue modifiche verranno aggiornate anche nella collezione collegata.
Puoi anche modificare il contenuto di un elemento della collezione direttamente dalla collezione.
Per aumentare o diminuire la distanza tra gli elementi della collezione, clicca su Dynamic Repeater per aprire il menu fluttuante e clicca su Modifica Design. Nella sezione Spaziatura del pannello di design, usa l'impostazione Spaziatura tra elementi per definire lo spazio tra gli elementi della collezione.