Le Dynamic Repeater est un widget de conception basé sur des collections qui vous permet de créer rapidement et facilement des mises en page répétitives et structurées où le design est le même pour chaque élément, mais le contenu est différent, comme des listes de produits, d'événements ou de services.
Le contenu affiché dans le Repeater est géré à partir d'une collection interne. Pour vous familiariser avec les collections internes et leur fonctionnement, consultez Contenu dynamique : collections internes.
Le wrapper (également appelé « frame ») du widget Repeater est le conteneur des éléments de la collection. Dans l'image ci-dessous, trois articles de collection sont illustrés.
Chaque élément de collection affiche le contenu d'une ligne de la collection interne connectée. Cela est rendu possible en connectant des widgets aux colonnes de la collection interne.
Par exemple, sur un site Web d'adoption de chiens, il existe une collection interne répertoriant les chiens adoptables. Voir une image de la collection ci-dessous.
Pour afficher les chiens dans le répéteur dynamique, les colonnes et les widgets sont connectés comme suit :
-
La colonne « Image » est connectée à un widget Image.
-
La colonne « Nom du chien » est connectée à un widget Small Heading.
-
La colonne « Description du chien » est connectée à un widget Texte.
Lorsque vous ajoutez le répéteur dynamique au canevas, une collection interne d'échantillons est créée et liée au répéteur dynamique. Vous pouvez modifier cette collection d'échantillons ou créer une nouvelle collection à lier au répéteur dynamique
Pour ajouter un widget Dynamic Repeater :
-
Dans le Éléments de mise en page section du panneau Widget, localisez Répéteur dynamique et faites-le glisser sur le canevas. Notez que lorsque vous ajoutez le répéteur au canevas, un exemple de collection interne est créé avec 4 éléments de collection (lignes de la collection) qui sont renseignés dans le répéteur dynamique. Cela vous aidera à visualiser le design avant d'ajouter votre propre contenu.
-
Si vous le souhaitez, vous pouvez ajouter et supprimer des widgets du répéteur dynamique pour répondre à vos besoins. Quel que soit l'élément de collection que vous modifiez, les modifications mettront automatiquement à jour tous les autres éléments de collection. Notez que les nouveaux widgets devront être connectés manuellement à une colonne de collection spécifique. Cela sera terminé dans une étape ultérieure.
Vous pouvez modifier la conception de l'enveloppe du répéteur dynamique ou les éléments de collection à l'intérieur du répéteur dynamique. Notez que les modifications de conception apportées à un élément de collection s'appliqueront à tous les autres. Cela vous permet de gagner du temps au lieu d'appliquer manuellement des modifications de conception à chaque élément de collection individuel et de risquer des erreurs
Pour modifier la conception du wrapper, cliquez sur le widget Dynamic Repeater pour ouvrir le menu flottant, puis cliquez sur Modifier le design. Dans le Enveloppe section du panneau de conception, vous pouvez configurer les éléments suivants :
-
Design de l'emballage. Vous pouvez définir la couleur d'arrière-plan, l'alignement, la taille, l'animation, la position (fixe ou épinglée) et l'espace entre les éléments de collection du répéteur dynamique.
Pour en savoir plus sur les sections du panneau de conception et sur la configuration de chaque option de conception, voir Concevez avec la technologie Flexbox.
Pour en savoir plus sur ce que signifie « fixe » ou « épinglé » en termes de position du widget, consultez Position du widget : fixe et épinglée.
Pour définir la façon dont les éléments de collection s'affichent dans le répéteur dynamique, cliquez sur le widget Répéteur dynamique pour ouvrir le menu flottant, puis cliquez sur Modifier le design. Dans le Disposition section du panneau de conception, vous pouvez configurer les éléments suivants :
-
Éléments par ligne. Sélectionnez le nombre d'éléments de collection à afficher par ligne. Maximum de 10 éléments par ligne.
-
Les articles conviennent. Sélectionnez l'une des options Largeur fixe ou S'étire pour s'adapter.
Pour activer la pagination ou une option de chargement supplémentaire, ouvrez le Navigation section du panneau de conception et allumez Activer la navigation basculer. Une fois la navigation activée, configurez les éléments suivants :
-
Pagination ou Charger plus. La pagination divise les éléments de la collection en pages entre lesquelles les visiteurs du site naviguent. Charger plus affiche un nombre défini d'éléments de collection, puis chaque clic charge un ensemble supplémentaire d'éléments de collection.
-
Articles par page. Définissez le nombre d'éléments de collection à afficher par page ou avant que d'autres résultats ne soient chargés.
Pour modifier la conception des widgets d'un élément de collection, cliquez sur un élément de collection individuel pour ouvrir le menu flottant, puis cliquez sur Modifier le design. Toutes les modifications de conception seront appliquées à chaque élément du répéteur. Dans le Disposition section du panneau de conception, vous pouvez configurer les éléments suivants :
-
Alignement du contenu. Définissez l'alignement horizontal et vertical du contenu à l'intérieur de l'élément de collection.
-
Direction d'empilage. Indiquez si les widgets du répéteur sont empilés horizontalement ou verticalement
-
Enrouler et aligner les lignes. Si vous le souhaitez, vous pouvez activer les widgets de chaque élément de collection pour les placer dans une autre ligne. Si vous choisissez d'encapsuler, vous devez également définir l'alignement des lignes.
Il est important de noter que la largeur ou la hauteur des éléments de collection dans le répéteur dynamique ne peuvent pas être modifiées. L'élément de collection est dimensionné pour s'adapter à 100 % de l'emballage, ce qui signifie que la hauteur et la largeur de l'élément de collection sont contrôlées par la hauteur et la largeur de l'emballage du répéteur dynamique. La hauteur et la largeur du répéteur dynamique peuvent être définies dans Taille section du panneau de conception.
Lorsque vous ajoutez le répéteur dynamique au canevas, une collection interne d'échantillons est créée et liée au répéteur dynamique et aux widgets par défaut qu'il contient. Vous pouvez modifier cette collection d'échantillons ou créer une nouvelle collection interne à lier au répéteur dynamique. Si vous ajoutez de nouveaux widgets au répéteur dynamique, ils devront être connectés à une colonne de collection
Note
Actuellement, le répéteur dynamique ne peut être connecté qu'à une collection interne ou d'images. À l'avenir, nous prévoyons de prendre en charge tous les types de collections.
Pour connecter un répéteur dynamique à une collection :
-
Cliquez sur le widget Dynamic Repeater pour ouvrir le menu flottant.
-
Cliquez sur l'icône à trois points dans le menu flottant, puis sélectionnez Remplacer la collection.
-
Dans la fenêtre modale, utilisez le menu déroulant pour sélectionner la collection souhaitée.
-
Cliquez Remplacer.
-
Ensuite, vous devez connecter des widgets aux colonnes de la collection. Cliquez sur un widget dans le répéteur dynamique pour ouvrir le menu flottant, puis cliquez sur l'icône à trois points et Connectez-vous aux données.
-
Dans le modal, utilisez le menu déroulant pour sélectionner la colonne de la collection qui sera connectée au widget. Notez que seules les colonnes compatibles seront affichées. Par exemple, les widgets Image ne peuvent être connectés qu'à une colonne de la collection avec Image défini comme type de champ. Connecter. Répétez l'opération pour chaque widget du répéteur dynamique
Utilisez le filtrage et le tri pour contrôler quels éléments de collection sont affichés, dans quel ordre et dans quelles conditions.
Voici une description de chaque option :
-
Trier vous permet de trier les éléments de collection par colonne de collection dans l'ordre alphabétique croissant ou décroissant. Par exemple, pour afficher la liste des membres de l'équipe par ordre alphabétique en fonction de leur prénom, vous pouvez trier selon le Prénom colonne de la collection connectée et sélectionnez ascendant comme ordre d'affichage des résultats. Peut être utilisé sur des pages régulières et dynamiques.
-
Filtres fixes vous permettent d'afficher des éléments de collection avec des valeurs spécifiques. Par exemple, pour afficher la liste des membres de l'équipe ayant des domaines d'expertise dans les domaines commerciaux ou technologiques, créez un filtre fixe qui nécessite Domaines d'expertise colonne de collection contenant les valeurs « business » ou « technology ». Peut être utilisé sur des pages régulières et dynamiques.
-
Filtres dynamiques vous permettent de lier des champs correspondants provenant de deux collections distinctes ; l'une provient de la collection associée à la page dynamique en cours et l'autre de la collection connectée au widget Dynamic Repeater. Cela vous permet d'afficher uniquement le contenu pertinent pour une page dynamique spécifique. Par exemple, les filtres dynamiques peuvent être utilisés pour afficher les articles de blog de la même catégorie que la page dynamique actuelle.
Pour configurer le filtrage et le tri :
-
Cliquez sur le répéteur dynamique pour ouvrir la barre flottante. Recueil et sélectionnez Trier et filtrer.
-
Dans le écran section, utilisez Nombre d'articles menu déroulant pour sélectionner le nombre d'éléments à afficher dans le widget.
-
Sur le Filtrer et trier onglet de la fenêtre contextuelle, activez Trier par basculer.
-
Utilisez le Trier par menu déroulant pour sélectionner la colonne de collection selon laquelle vous souhaitez effectuer le tri. Utilisez les flèches vers le haut et vers le bas à côté de la liste déroulante pour organiser les éléments de la collection par ordre alphabétique croissant ou décroissant
-
En dessous Filtres fixes, cliquez +Ajouter un filtre. Utilisez la liste déroulante pour sélectionner la colonne de collection par laquelle vous souhaitez filtrer et entrez la ou les valeurs exactes qui doivent être respectées pour que les éléments de collection souhaités s'affichent
-
Cliquez Terminé.
Pour configurer des filtres dynamiques sur des pages dynamiques :
-
Cliquez sur le répéteur dynamique pour ouvrir la barre flottante. Recueil et sélectionnez Trier et filtrer.
-
En dessous Filtres dynamiques, cliquez +Ajouter un filtre.
-
Utilisez le Collecte de services menu déroulant pour sélectionner un champ dans la collection de la page dynamique actuelle.
-
Utilisez le Collection de répéteurs menu déroulant pour sélectionner un champ dans la collection connectée du répéteur dynamique qui correspond au champ sélectionné dans Recueil de services menu déroulant à l'étape précédente.
-
Cliquez Terminé.
Pour ajouter un élément de collection au répéteur dynamique, vous devez ajouter une nouvelle ligne dans la collection. La ligne doit avoir du contenu avant d'être remplie dans le répéteur dynamique
Pour supprimer un élément de collection, supprimez la ligne correspondante dans la collection.
Pour ajouter un widget, ouvrez le panneau des widgets et faites glisser le widget souhaité dans le répéteur dynamique. Le widget est automatiquement ajouté à tous les autres éléments de la collection.
Lorsque vous êtes prêt à connecter le widget à la collection, cliquez sur le widget pour ouvrir le menu flottant. Cliquez sur l'icône à trois points et sélectionnez Connectez-vous aux données. Dans la fenêtre contextuelle, sélectionnez la colonne à laquelle vous souhaitez connecter le widget. Notez que seules les colonnes compatibles s'afficheront, ce qui signifie que les widgets Image ne peuvent être connectés qu'à une colonne de la collection avec Image défini comme type de champ. Connecter.
Pour modifier la connexion au widget, cliquez sur le widget pour ouvrir le menu flottant. Cliquez sur l'icône à trois points et sélectionnez Modifier la connexion. Utilisez le menu déroulant de la fenêtre contextuelle pour sélectionner une autre colonne de collection. Connecter.
Pour modifier le contenu d'un élément dans le répéteur dynamique, cliquez sur le widget et effectuez les mises à jour souhaitées. Le répéteur dynamique prenant en charge l'édition en ligne, vos modifications seront également mises à jour dans la collection connectée
Vous pouvez également modifier le contenu d'un élément de collection directement depuis la collection.
Pour augmenter ou diminuer l'espacement entre les éléments de la collection, cliquez sur le répéteur dynamique pour ouvrir le menu flottant, puis cliquez sur Modifier le design. Dans le Espacement section du panneau de conception, utilisez Espacement entre les éléments paramètre pour définir l'espace entre les éléments de la collection.
Chaque image du répéteur dynamique peut avoir son propre texte alternatif unique.
Pour ajouter du texte alternatif aux images dans le répéteur dynamique, procédez comme suit :
-
Ouvrez la collection connectée au répéteur dynamique.
-
Dans le tableau des collections, cliquez sur l'icône plus (+) pour ajouter une nouvelle colonne/un nouveau champ.
-
Entrez Texte alternatif comme nom de champ et sélectionnez Texte brut comme type de champ.
-
Revenez au répéteur dynamique et cliquez pour sélectionner l'un des widgets d'image.
-
Dans la barre flottante, cliquez sur l'icône à trois points, puis sur Gérer la connexion, puis sélectionnez Modifier la connexion.
-
Dans la fenêtre contextuelle, utilisez Connecter Alt Text à menu déroulant pour sélectionner la colonne de collection créée à l'étape 3.
-
Cliquez Connecter.