Il Dynamic Repeater è un widget di progettazione basato su raccolte che consente di creare rapidamente e facilmente layout ripetitivi e strutturati in cui il design è lo stesso per ogni elemento, ma il contenuto è diverso, ad esempio elenchi di prodotti, eventi o servizi.
Il contenuto visualizzato nel ripetitore viene gestito da una raccolta interna. Per conoscere le raccolte interne e il loro funzionamento, consulta Contenuto dinamico: raccolte interne.
Il wrapper (chiamato anche «frame») del widget Repeater è il contenitore per gli elementi della raccolta. Nell'immagine seguente, sono raffigurati tre elementi della collezione
Ogni elemento della raccolta mostra il contenuto di una riga della raccolta interna connessa. Ciò è reso possibile collegando i widget alle colonne della raccolta interna
Ad esempio, su un sito web di adozione di cani è presente una raccolta interna che elenca i cani adottabili. Guarda un'immagine della collezione qui sotto.
Per visualizzare i cani nel Dynamic Repeater, le colonne e i widget sono collegati come segue:
-
La colonna «Immagine» è collegata a un widget Immagine.
-
La colonna «Nome cane» è collegata a un widget Titolo piccolo.
-
La colonna «Descrizione del cane» è collegata a un widget di testo.
Quando si aggiunge il Dynamic Repeater all'area di disegno, viene creata una raccolta interna di esempio che viene collegata al Dynamic Repeater. È possibile modificare questa raccolta di esempio o creare una nuova raccolta da collegare al Dynamic Repeater
Per aggiungere un widget Dynamic Repeater:
-
Nel Elementi del layout sezione del pannello Widget, individua Ripetitore dinamico e trascinalo sulla tela. Nota che quando aggiungi il Ripetitore all'area di disegno, viene creata una raccolta interna di esempio con 4 elementi della raccolta (righe della raccolta) che vengono inseriti nel Dynamic Repeater. Questo serve per aiutarti a visualizzare il design prima di aggiungere i
-
Se lo desideri, puoi aggiungere e rimuovere widget dal ripetitore dinamico per soddisfare le tue esigenze. Indipendentemente dall'elemento della raccolta modificato, le modifiche aggiorneranno automaticamente tutti gli altri elementi della raccolta. Nota che i nuovi widget dovranno essere collegati manualmente a una colonna di raccolta specifica. Questa operazione verrà completata in una fase successiva
È possibile modificare il design del wrapper del Dynamic Repeater o degli elementi della raccolta all'interno del Dynamic Repeater. Nota che le modifiche al design apportate a un elemento della collezione si applicheranno a tutti gli altri. Ciò consente di risparmiare tempo anziché applicare manualmente le modifiche al design a ogni singolo articolo della collezione e rischiare di commettere errori
Per modificare il design del wrapper, fai clic sul widget Dynamic Repeater per aprire il menu mobile e fai clic su Modifica design. Involucro nella sezione del pannello di progettazione è possibile configurare quanto segue:
-
Design dell'involucro. È possibile definire il colore di sfondo, l'allineamento, le dimensioni, l'animazione, la posizione (fissa o bloccata) e lo spazio tra gli elementi della raccolta all'interno del Dynamic Repeater.
Per saperne di più sulle sezioni del pannello di progettazione e su come configurare ciascuna opzione di progettazione, consulta Progetta con la tecnologia Flexbox.
Per saperne di più sul significato di «fisso» o «bloccato» in termini di posizione del widget, consulta Posizione del widget: fissa e bloccata.
Per definire la modalità di visualizzazione degli elementi della raccolta nel Dynamic Repeater, fate clic sul widget Dynamic Repeater per aprire il menu mobile e fate clic su Modifica design. Layout nella sezione del pannello di progettazione puoi configurare quanto segue:
-
Elementi per riga. Seleziona il numero di elementi della raccolta da visualizzare per riga. Massimo 10 elementi per riga.
-
Gli articoli si adattano. Seleziona uno dei Larghezza fissa o Elasticizzato per adattarsi.
Per abilitare l'impaginazione o l'opzione Load more, apri il Navigazione sezione del pannello di progettazione e attiva il Abilita la navigazione attiva. Una volta abilitata la navigazione, configura quanto segue
-
Impaginazione o Carica altro. L'impaginazione divide gli elementi della raccolta in pagine tra cui navigano i visitatori del sito. Load more visualizza una determinata quantità di elementi della raccolta, quindi ogni clic carica un set aggiuntivo di elementi della raccolta
-
Elementi per pagina. Definisci quanti elementi della raccolta visualizzare per pagina o prima che vengano caricati altri risultati.
Per apportare modifiche al design dei widget all'interno di un elemento della raccolta, fai clic su un singolo elemento della raccolta per aprire il menu mobile e fai clic su Modifica design. Tutte le modifiche al design verranno applicate a ciascun elemento del ripetitore. Layout nella sezione del pannello di progettazione puoi configurare quanto segue:
-
Allineamento dei contenuti. Definisci l'allineamento orizzontale e verticale del contenuto all'interno dell'elemento della raccolta
-
Direzione di impilamento. Seleziona se i widget all'interno del ripetitore sono impilati orizzontalmente
-
Allineamento dell'avvolgimento e delle righe. Se lo desideri, puoi abilitare i widget per ciascun elemento della raccolta in un'altra riga. Se scegli di disporlo, devi anche definire l'allineamento delle righe
È importante notare che la larghezza o l'altezza degli elementi della raccolta nel Dynamic Repeater non possono essere modificate. L'elemento della raccolta viene ridimensionato per adattarsi al 100% del wrapper, il che significa che l'altezza e la larghezza dell'elemento della raccolta sono controllate dall'altezza e dalla larghezza del wrapper del Dynamic Repeater. L'altezza e la larghezza del Dynamic Repeater possono Dimensioni sezione del pannello di progettazione.
Quando si aggiunge il Dynamic Repeater all'area di disegno, viene creata una raccolta interna di esempio collegata al Dynamic Repeater e ai widget predefiniti al suo interno. È possibile modificare questa raccolta di esempio o creare una nuova raccolta interna da collegare al Dynamic Repeater. Se aggiungete nuovi widget al Dynamic Repeater, questi dovranno essere collegati a una
Nota
Attualmente, il ripetitore dinamico può essere collegato solo a una raccolta interna o di immagini. In futuro, prevediamo di supportare tutti i tipi di raccolta
Per connettere un ripetitore dinamico a una raccolta:
-
Fate clic sul widget Dynamic Repeater per aprire il menu mobile.
-
Fai clic sull'icona a tre punti nel menu mobile, quindi seleziona Sostituisci raccolta.
-
Nella modalità, usa il menu a discesa per selezionare la collezione desiderata.
-
Clicca Sostituisci.
-
Successivamente è necessario collegare i widget alle colonne della raccolta. Fai clic su un widget nel Dynamic Repeater per aprire il menu mobile, quindi fai clic sull'icona a tre punti Connettiti ai dati.
-
Nella modalità, usa il menu a discesa per selezionare la colonna della raccolta che sarà connessa al widget. Nota che verranno visualizzate solo le colonne compatibili. Ad esempio, i widget di immagine possono essere collegati solo a una colonna della raccolta Immagine impostato come tipo di campo. Fai clic Connetti. Ripetere l'operazione per ogni widget nel Dynamic Repeater
Usa il filtro e l'ordinamento per controllare quali elementi della raccolta vengono visualizzati, in quale ordine e in quali condizioni.
Di seguito è riportata una descrizione di ciascuna opzione:
-
Ordina consente di ordinare gli elementi della raccolta per colonna della raccolta in ordine alfabetico crescente o decrescente. Ad esempio, per visualizzare un elenco dei membri del team in ordine alfabetico in base al loro nome, puoi Nome colonna nella raccolta connessa e seleziona ascendente come ordine in cui visualizzare i risultati. Può essere utilizzato su pagine normali e dinamiche.
-
Filtri fissi consentono di visualizzare gli elementi della raccolta con valori specifici. Ad esempio, per visualizzare un elenco di membri del team con aree di competenza aziendale o tecnologica, crea un filtro fisso che richieda Aree di competenza colonna di raccolta per contenere i valori «business» o «technology». Può essere utilizzato su pagine normali e dinamiche.
-
Filtri dinamici consentono di collegare i campi corrispondenti di due raccolte separate; una dalla raccolta associata alla pagina dinamica corrente e l'altra dalla raccolta connessa al widget Dynamic Repeater. Ciò consente di visualizzare solo il contenuto pertinente a una pagina dinamica specifica. Ad esempio, i filtri dinamici possono essere utilizzati per visualizzare i post del blog appartenenti alla stessa categoria della pagina dinamica corrente.
Per configurare il filtro e l'ordinamento:
-
Fate clic sul ripetitore dinamico per aprire la barra mobile. Fate clic Collezione e seleziona Ordina e filtra.
-
Nel Display sezione, usa il Numero di articoli menu a discesa per selezionare quanti elementi verranno visualizzati nel widget.
-
Sul Filtra e ordina scheda del popup, abilita il Ordina per attiva/disattiva.
-
Usa il Ordina per menu a discesa per selezionare la colonna della collezione in base alla quale desideri ordinare. Usa le frecce su e giù accanto al menu a discesa per organizzare gli elementi della raccolta in ordine alfabetico crescente o decrescente
-
Sotto Filtri fissi, fai clic +Aggiungi filtro. Usa il menu a discesa per selezionare la colonna di raccolta in base alla quale desideri filtrare e inserisci i valori esatti che devono essere soddisfatti per visualizzare gli elementi della raccolta desiderati
-
Clicca Fatto.
Per configurare i filtri dinamici nelle pagine dinamiche:
-
Fate clic sul ripetitore dinamico per aprire la barra mobile. Fate clic Collezione e seleziona Ordina e filtra.
-
Sotto Filtri dinamici, fai clic +Aggiungi filtro.
-
Usa il Raccolta di servizi menu a discesa per selezionare un campo dalla raccolta della pagina dinamica corrente.
-
Usa il Collezione Repeater menu a discesa per selezionare un campo dalla raccolta connessa di Dynamic Repeater che corrisponda al campo selezionato in Raccolta di servizi menu a discesa nel passaggio precedente.
-
Clicca Fatto.
Per aggiungere un elemento della raccolta al Dynamic Repeater, devi aggiungere una nuova riga nella raccolta. La riga deve avere un contenuto prima di essere inserita nel Dynamic Repeater
Per rimuovere un elemento della raccolta, elimina la riga corrispondente nella raccolta.
Per aggiungere un widget, apri il pannello dei widget e trascina il widget desiderato nel Dynamic Repeater. Il widget viene aggiunto automaticamente a tutti gli altri elementi della raccolta
Quando sei pronto per connettere il widget alla raccolta, fai clic sul widget per aprire il menu mobile. Fai clic sull'icona con tre puntini e seleziona Connettiti ai dati. Nel popup, seleziona la colonna a cui vuoi connettere il widget. Nota che verranno visualizzate solo le colonne compatibili, il che significa che i widget di immagine possono essere collegati solo alla colonna della raccolta Immagine impostato come tipo di campo. Fai clic Connetti.
Per modificare la connessione del widget, fai clic sul widget per aprire il menu mobile. Fai clic sull'icona con tre puntini e seleziona Cambia connessione. Usa il menu a discesa nel popup per selezionare una colonna di raccolta diversa. Fai clic Connetti.
Per modificare il contenuto di un elemento nel ripetitore dinamico, fai clic sul widget ed effettua gli aggiornamenti desiderati. Poiché il Dynamic Repeater supporta la modifica in linea, le modifiche verranno aggiornate anche nella raccolta connessa
Puoi anche modificare il contenuto di un elemento della raccolta direttamente dalla raccolta.
Per aumentare o diminuire la spaziatura tra gli elementi della raccolta, fate clic sul Ripetitore dinamico per aprire il menu mobile e fate clic su Modifica design. Spaziatura sezione del pannello di progettazione, usa Spaziatura tra gli elementi impostazione per definire lo spazio tra gli elementi della raccolta.
Ogni immagine nel Dynamic Repeater può avere un testo alternativo univoco.
Per aggiungere testo alternativo alle immagini all'interno del ripetitore dinamico:
-
Aprire la raccolta connessa al Dynamic Repeater.
-
Nella tabella della collezione, fai clic sull'icona più (+) per aggiungere una nuova colonna/campo.
-
Entra Testo alternativo come nome del campo e seleziona Testo semplice come tipo di campo.
-
Torna al Ripetitore dinamico e fai clic per selezionare uno dei widget dell'immagine.
-
Nella barra mobile, fai clic sull'icona a tre punti e fai clic Gestisci connessione, quindi seleziona Cambia connessione.
-
Nel popup, usa Collega Alt Text a menu a discesa per selezionare la colonna della raccolta creata nel passaggio 3.
-
Clicca Connetti.