Afficher ou cacher un éléments automatiquement, formulaire, popup, etc..

• 07 novembre 2018
• Steeve

Ce petit tutoriel peut être très utile lorsque vous désirez afficher puis masque un élément que ce soit un formulaire ou une fenêtre pop-up ect...

L'idée : la plupart du temps quand je voulais afficher puis cacher un élément automatiquement j'utilisai une ressource qui a la possibilité de pouvoir déterminer une date de publication/dépublication. ce qui permet de pouvoir cacher/afficher ce que vous désirez.
Le problème c'est que ce n'est pas très pratique dans l'absolu il serait plus simple d'utiliser un outil et c'est ce que nous allons voir maintenant.

Pour commencer il faut créer un snippet (getDate dans mon exemple) qui renvoie la date.

$date = date('Y-m-d h:m:s');
return $date;

Si vous appelez le snippet par défaut il renvoie la date du style 2018-11-07 11:11:00 (Année-Mois-Jour Heure:Minutes:Seconde). C'est un peu la même chose que si on affiche la date de creation d'une ressource, exemple [[*createdon]] qui affichera 2018-10-17 22:26:50

• Y Année sur 4 chiffres Exemples : 1999 ou 2003
• m Mois au format numérique, avec zéros initiaux 01 à 12
• j Jour du mois sans les zéros initiaux 1 à 31

Vous pouvez retrouver toute la liste de la fonction PHP date en cliquant sur le lien.
À partir de là on peut très facilement modifier l'affichage en utilisant MODX date format pour le formater comme on le désire.

Pour pouvoir l'utiliser simplement, il faudrait avoir une date du style AnnéeMoisJour = 20181107. C'est très simple, il suffit d'utiliser Modx date format comme ceci :
[[!getDate:strtotime:date=`%Y%m%d`]] ou [[*createdon:strtotime:date=`%Y%m%d`]]
ce qui donne :
20240426 ou 20181017

Maintenant on peut utiliser les filtres de sortie MODX (Input and Output Filters (Output Modifiers)) dont j'ai déjà parlé dans un précédent tutoriel. Ce qui nous permettra de pouvoir comparer une ou plusieurs valeurs avec la valeur récupérée dans le snippet MODX getDate

[[!getDate:strtotime:date=`%Y%m%d`:toPlaceholder=`now`]]
[[+now:greaterthan=`20181106`:and:lowerthan=`20221108`:then=`
Je m'affiche si la date est plus grande que le 06 Novembre 2018 et plus petite que le 08 Novembre 2022
`]]

Le filtre de sortie sur le snippet getDate permet de placer le contenu dans un placeholder [[+now]]

Tandis que celui utilisé sur le placeholder "now" permet de comparer :
greaterthan plus grand que
lowerthan plus petit que.

J'aurais pu d'ailleur utiliser les raccourcis pour les filtres (greaterthan = gt, lowerthan = lt)

[[+now:gt=`20181106`:and:lt=`20221108`:then=`
Je m'affiche si la date est plus grande que le 06 Novembre 2018 et plus petite que le 08 Novembre 2022
`]]