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, possono essere collegate solo le collezioni interne e quelle di immagini. In futuro prevediamo di supportare Google Sheets, Airtable e database esterni.
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.
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.