Aperçu du résultat
Dans le designer vous pouvez voir que nous aurons une div avec la liste de toutes nos Collection List Wrapper, ainsi qu'une grid, dans laquelle tous les éléments se retrouverons une fois la page chargée :
Sur votre site publié, vous verrez alors les différents éléments de vos CMS dans une seule et même liste, comme vous pouvez voir en dessous :
Ce dont vous aurez besoin
- Pouvoir accéder au Designer de votre site
Et c'est tout 😁
Etape par étape
- Créer vos CMS, avec une structure semblable ou différente, en fonction de vos besoins
- Créer la page dans dans laquelle vous allez lister toutes vos listes
- Ajouter dans cette page une div et donnez lui la classe que vous souhaitez. Elle peut-être placée où vous le souhaitez dans la page, cachée ou non.
- Ajouter dans la page une seconde div sur laquelle vous pouvez définir l'affichage final (dans le cas de mon exemple plus haut, une grille de 3 colonnes)
- Ajouter dans la première div une collection list. Petite astuce pour gagner du temps, ne la liez pas tout de suite à votre CMS, gardez là vide 😉
- Ajouter sur le collection list item un custom attributes (sélectionner l'élément, onglet settings de la barre de droite) ayant pour nom cd-moving-item et valeur le nom global de votre pages, dans mon cas "Ressources"
- Dupliquer l'élément pour autant de CMS que vous souhaitez fusionner
- Connecter les CMS et ajouter le design de vos éléments, ils peuvent tous être différents si vous le souhaitez 😊
- Ajouter sur la div créée à l'étape 4 l'attribut ayant pour nom cd-moving-item et pour valeur le même nom que celui que vous avez choisi à l'étape 6
- Ajouter dans la section before </body> tag des paramètres de la page où vous travaillez le code suivant, en pensant à changer "votre_id" par votre id👇
1<!-- Gathering items into one list by Codelius -->
2<script>
3 $('[cd-moving-item="votre_id"]').appendTo($('[cd-moving-target="votre_id"]'));
4</script>- Vous pouvez maintenant publier votre site !
.png)
