Comment cacher une section entière dans Webflow quand une liste est vide ?

Les registres des membres sont nécessaires

https://www.memberstack.com/scripts/hide-element-based-on-other-elements-children

Tutoriel

Clonable

https://webflow.com/made-in-webflow/website/filter-saved-cms-items

Pourquoi/Cas d'utilisation

1. Masquer les sections vides qui ne servent à rien lorsqu'elles sont vides.
2. Améliorer l'expérience de l'utilisateur lors de la création de listes personnalisées.

Parfois, en fonction de l'activité de vos utilisateurs sur votre site, vous pouvez avoir certaines sections sans aucun contenu. Pour améliorer l'expérience de vos utilisateurs, vous pouvez cacher les sections inutiles et ne pas encombrer votre interface utilisateur.

Nous allons étudier un exemple dans lequel les utilisateurs peuvent mettre en favori des éléments d'une liste et, selon qu'ils ont ou non mis en favori un élément, afficher ou masquer la section dédiée aux favoris.

Comment cacher une section vide sur Webflow

Pour cela, nous allons utiliser le MemberScript #25 - Hide Element Based on Other Element's Children (cacher un élément en fonction des enfants d'un autre élément). Suivez le lien pour obtenir le code que vous devrez ajouter à votre page et regardez un tutoriel vidéo sur la façon de tout mettre en place.

Création de votre liste d'articles

Tout d'abord, vous devez créer la liste elle-même. Créez la collection CMS que vous utiliserez pour alimenter la liste, puis construisez-la sur le frontend comme vous le souhaitez et connectez-la à la collection CMS.

Après avoir créé et conçu votre liste, ajoutez-y ces attributs :

• ms-code-filter-list="x"
• ms-code-visibility-subject="x"

Nous utilisons "x" comme valeur pour faire correspondre la liste à la section elle-même, mais vous pouvez utiliser la valeur de votre choix (par exemple, "favoris" pour une section Favoris, "épinglés" pour une section Épinglés, et ainsi de suite).

Maintenant, pour le conteneur qui contient toute la section que vous voulez faire disparaître si la liste est vide, ajoutez l'attribut suivant :

• ms-code-visibility-target="x"

Faire fonctionner la visibilité conditionnelle

Maintenant que vous avez votre liste et que vous l'avez connectée à une collection CMS, tout ce qu'il vous reste à faire est d'ajouter le code personnalisé MemberScript #25 à votre page, avant la balise de fermeture du corps de la page.

Tout cela fonctionne en masquant la cible (le conteneur avec l'attribut target) si le sujet (la liste avec l'attribut subject) n'a pas d'éléments enfants ou s'ils sont réglés sur display:none.

Conclusion

Voilà, vous pouvez maintenant tester votre section disparue en ajoutant et en supprimant des éléments de la liste qu'elle contient.

Pour créer d'autres sections disparaissant sur votre page, répétez les étapes ci-dessus et remplacez simplement les valeurs des attributs par quelque chose de représentatif de cette nouvelle section.

Si vous souhaitez utiliser notre projet de démonstration pour commencer, cliquez simplement sur le bouton ci-dessous pour l'ajouter à votre site Webflow.

Notre démo vous aidera à filtrer facilement les éléments d'une liste en fonction de la présence d'un élément dans ses enfants - cela fonctionne parfaitement non seulement pour les listes CMS, mais aussi pour les listes statiques et les listes générées par les membres JSON.

Emmenez-moi aux Scripts

https://www.memberstack.com/scripts/hide-element-based-on-other-elements-children