Conditions

Une condition affiche ou masque un élément selon vos données. Sélectionnez l'élément et, dans son champ Visibility Condition, choisissez une valeur de votre source de données avec une expression, puis un test. Quand le test est vrai, l'élément s'affiche. Quand il est faux, l'élément est masqué.

Servez-vous-en pour afficher un badge seulement sur certains articles, pour afficher un message « Aucun article » quand une liste est vide, ou pour masquer une image manquante.

La Visibility Condition

Visibility Condition est un champ des réglages de l'élément (icône engrenage en haut du panneau de droite), dans la section Properties.

1. Sélectionnez l'élément
2. Ouvrez les réglages de l'élément (icône engrenage)
3. Dans Properties, trouvez Visibility Condition et cliquez sur Expression
4. Cliquez sur + et choisissez la valeur à tester, par exemple Post card, Loop item, featured_image dans la carte d'article de Boucles et listes
5. Dans le menu ... is en dessous, choisissez le test
6. Si le test compare deux valeurs (==, !=, >, <, >=, <=), un second champ apparaît sous le menu. Tapez la valeur à comparer (Fixed), ou construisez-la avec Expression

Le canevas se met à jour dès que vous modifiez la condition. Un élément n'a qu'une seule Visibility Condition.

Tests sur une seule valeur

Ces tests n'ont besoin de rien d'autre. Choisissez-en un dans le menu ... is et c'est terminé.

truthy : la valeur existe. Elle n'est ni vide ni fausse. Servez-vous-en pour afficher un élément seulement quand il y a des données à afficher.

Exemple : afficher l'image d'un article seulement s'il en a une. Sur l'image dans Post card, réglez Visibility Condition sur Post card, Loop item, featured_image, et choisissez truthy.

Utilisez truthy pour un champ vrai/faux, comme is_featured. N'utilisez pas == true : la valeur Fixed est du texte, et le texte true n'est jamais égal à un champ vrai/faux.

falsy : la valeur est absente ou fausse. C'est l'inverse de truthy.

Exemple : afficher un texte « Pas d'image » dans la carte quand l'article n'a pas d'image. Même valeur que ci-dessus, choisissez falsy.

empty array : la valeur est une liste sans aucune entrée. Utilisez-le sur une liste, comme votre liste d'articles.

Exemple : afficher un message « Aucun article » quand il n'y a pas d'articles. Réglez Visibility Condition sur posts (puis nodes ou data si votre API enveloppe la liste), et choisissez empty array.

not empty array : la valeur est une liste avec au moins une entrée. C'est l'inverse de empty array.

Exemple : afficher un titre « Derniers articles » seulement quand il y a des articles. Même valeur que ci-dessus, choisissez not empty array.

Tests qui comparent deux valeurs

Ces tests comparent la valeur de Visibility Condition avec celle du second champ.

== : les deux valeurs sont égales.

Exemple : afficher un badge « Actu » seulement sur les articles de la catégorie actualités. Sur le badge dans Post card, réglez Visibility Condition sur Post card, Loop item, category. Choisissez ==, et tapez news dans le second champ (Fixed).

!= : les deux valeurs sont différentes.

Exemple : afficher une étiquette « Brouillon » seulement sur les articles non publiés. Sur l'étiquette dans Post card, réglez Visibility Condition sur Post card, Loop item, status, choisissez !=, et tapez published dans le second champ (Fixed).

>, <, >=, <= : plus grand que, plus petit que, plus grand ou égal, plus petit ou égal. Utilisez-les avec des nombres.

Exemple : afficher une alerte « Stock faible » sur les produits qui ont moins de 10 articles en stock. Réglez Visibility Condition sur le champ du stock, choisissez <, et tapez 10 dans le second champ (Fixed).

Les noms de champs comme featured_image, category ou status ne sont que des exemples. Quand vous cliquez sur +, le menu liste les vrais champs de votre source de données.

Exemple pratique : message « Aucun article »

Affichez un message quand il n'y a aucun article de blog. Cet exemple utilise la liste d'articles de Boucles et listes.

1. Depuis le panneau Blocs, glissez un Text sur la page, en dehors de Post card, par exemple juste au-dessus de la liste. Tapez Aucun article pour l'instant
2. Text sélectionné, ouvrez les réglages de l'élément (icône engrenage)
3. Dans Properties, trouvez Visibility Condition et cliquez sur Expression
4. Cliquez sur + et choisissez posts, puis le champ qui contient la liste si votre API l'enveloppe (comme nodes ou data)
5. Dans le menu ... is, choisissez empty array

Le texte ne s'affiche que quand la liste d'articles est vide. Quand il y a des articles, il est masqué, sur le canevas comme sur le site publié.

Exemple pratique : badge « À la une »

Affichez un badge « À la une » seulement sur les articles mis en avant. Cet exemple utilise la Post card de Boucles et listes.

1. Déposez un Text dans la première Post card, ou dans Post card dans le panneau Calques. Tapez À la une. Il apparaît dans toutes les cartes
2. Text sélectionné, ouvrez les réglages de l'élément (icône engrenage)
3. Dans Properties, trouvez Visibility Condition et cliquez sur Expression
4. Cliquez sur +, trouvez le groupe Post card, choisissez Loop item, puis is_featured
5. Dans le menu ... is, choisissez truthy

Le badge ne s'affiche que sur les articles où is_featured est vrai. Si votre CMS n'a pas ce champ, choisissez un champ vrai/faux dans le menu +, ou utilisez == avec une valeur, comme le badge « Actu » plus haut.

Conditions dans les boucles

Dans une boucle, chaque copie de l'élément teste la condition avec son propre Loop item. Dans les exemples ci-dessus, le badge « Actu » et le badge « À la une » sont dans Post card : chaque carte teste son propre article, donc le badge s'affiche sur certaines cartes et pas sur d'autres.

Pour tester un champ de l'article courant, cliquez sur +, trouvez le groupe qui porte le nom de l'élément qui boucle (Post card), choisissez Loop item, puis le champ.

En savoir plus

• Lier des données — afficher vos données dans des éléments
• Boucles et listes — répéter un élément pour chaque entrée d'une liste
• Expressions — comprendre comment enchaîner les jetons
• Filtres — transformer vos données (slice, where, reverse, sort, etc.)

---

Quiz

Q1 : Vous voulez afficher l'image d'un article seulement s'il en a une. Que réglez-vous sur l'image ?

• A) Post card, Loop item, featured_image, puis truthy
• B) Post card, Loop item, featured_image, puis falsy
• C) Post card, Loop item, featured_image, puis ==

Réponse

A) : truthy signifie que la valeur existe. Si l'article n'a pas d'image, l'image est masquée.

Q2 : Vous voulez afficher un texte « Aucun article pour l'instant » seulement quand il n'y a pas d'articles. Que réglez-vous ?

• A) posts (et nodes ou data si besoin), puis truthy
• B) posts (et nodes ou data si besoin), puis empty array
• C) posts (et nodes ou data si besoin), puis not empty array

Réponse

B) empty array : le texte ne s'affiche que quand la liste n'a aucune entrée. Placez le texte en dehors de Post card, sinon il se répète avec les cartes.

Q3 : Vos articles ont un champ vrai/faux, is_featured. Comment afficher un badge seulement sur les articles mis en avant ?

• A) Choisir == et taper true dans le second champ
• B) Choisir truthy
• C) Choisir not empty array

Réponse

B) truthy : la valeur du second champ est du texte, et le texte true n'est jamais égal à un champ vrai/faux. Avec ==, le badge ne s'affiche jamais.

Q4 : Vous voulez afficher une étiquette seulement sur les articles dont le status est published. Que réglez-vous sur l'étiquette ?

• A) Post card, Loop item, status, puis truthy
• B) Post card, Loop item, status, puis ==, et tapez published dans le second champ
• C) published, choisi dans le menu +

Réponse

B) : == compare le statut de chaque article avec le texte que vous tapez dans le second champ.

Q5 : Vous choisissez == dans le menu ... is. De quoi d'autre avez-vous besoin ?

• A) De rien, le test est complet
• B) De la valeur à comparer, dans le second champ sous le menu
• C) D'une seconde Visibility Condition sur le même élément

Réponse

B) : les tests qui comparent deux valeurs ont besoin d'une seconde valeur. Tapez-la (Fixed) ou construisez-la avec Expression. Un élément n'a qu'une seule Visibility Condition.