tutoCMS.fr
Réaliser un menu dans MODX en quelques minutes avec Wayfinder
- 02 septembre 2016
- Steeve
La première version de Wayfinder a été créée en Août 2006 mais ce nommé DropMenu. Cette extension qui est également un Snippet, permet de créer des menus personnalisés facilement en utilisant des Chunk (bout de code HTML) et/ou en utilisant des paramètres que nous allons voir dans cet article.
Pour appeler le Snippet (extension) il suffit d’écrire au minimum ceci :
[[Wayfinder? &startId=`0`&level=`1`]]
Le point d’interrogation permet d’ajouter des paramètres. Les paramètres peuvent être ajouté de la façon suivante : &nomduparamètre=`valeurduparamètre`.
Les paramètres dans mon exemple sont « startId » et « level » et ils ont pour valeurs respective 0 et 1, « startId » permet de dire à Wayfinder ou démarrer, à partir de quelle ressource il doit créer le menu. Dans cet exemple il doit tout prendre pour créer le menu. Quand au paramètre « level » il sert à indiquer à Wayfinder la profondeur que l’extension doit prendre en compte.
Les principaux paramètres sont :
| Paramètre | Description | Valeur par défaut |
|---|---|---|
| &startId | Le point de départ (ID de la ressource) à partir duquel on va lister les documents. Specifié 0 pour qu'il démarre à la racine du site. | Id de la ressource dans lequel on se trouve |
| &displayStart | Afficher le document qui est indiqué dans le menu par &startId. | 0 |
| &level | Profondeur (nombre de niveau) pour construire le menu. La valeur de "0" inclus tous les niveaux (profondeur). | 0 |
| &limit | Le paramètre limite indique a Wayfinder de ne traiter que le nombre d'éléments spécifiés par la limite, seuelemnt 5 éléments seront affichés si la valeur de ce champ est "5". | 0 |
| &ignoreHidden | Ignore la case à cocher "Cacher dans le menu" de la ressource, et les affichent quand même dans le menu si la valeur est de "1". | 0 |
| &ph | Nom de l'espace de nom qui servira à retourner le résultat au lieu de retourner le résultat directement. Si vous donnez la valeur "monmenu" il siffura de mettre | 0 |
| &debug | Si la valeur est de "1" ça permet d'afficher les erreurs pour les corriger. | 0 |
| &hideSubMenus | Si la valeur est de "1", cela affichera seulement le sous-menu actif | 0 |
| &removeNewLines | Si la valeur est de "1", les retours à la ligne seront supprimer de l'affichage. | 0 |
| &textOfLinks | Le champ qui doit être récupéré comme valeur pour le texte du lien. Les valeurs possbiles sont : menutitle, id, pagetitle, description, parent, alias, longtitle, introtext | menutitle |
| &titleOfLinks | Le champ qui doit être récupéré comme valeur pour le titre du lien. Les valeurs possbiles sont : menutitle, id, pagetitle, description, parent, alias, longtitle, introtext | pagetitle |
| &rowIdPrefix | Si il est paramètré, chaque élément aura un ID unique. La valeur sera : valeur du paramètre + ID de la ressource. | 0 |
| &useWeblinkUrl | Si le paramètre a pour valeur "1", le lien de la ressource de type "weblink", le tag [[+wf.link]] sera remplacé dans le href du lien à la place du lien web. | 1 |
| &includeDocs | Une liste des ID des ressources séparé par des virgules que l'on veut inclure dans le menu. | |
| &excludeDocs | Une liste des ID des ressources séparé par des virgules que l'on veut exclure dans le menu. | 0 |
| &cacheResults | Mettre en cache les requettes pour un affichage plus rapide. Ajouté depuis la version 2.2.0-rc1. | |
| &cacheTime | Un nombre de secondes pour stocker en cache le menu, si le paramètre "cacheResults" est paramétré à "1". Mettre la valeur à "0" pour stocker indéfiniment, jusqu'à ce que le cache soit effacé manuellement. | 3600 |
| &contexts | Le contexte qui sera utilisé pour construire le menu. Par défaut le contexte courrant. Paramètre ajouté depuis la version 2.2.0-rc1. | |
| &startIdContext | Id du contexte ou le menu doit démarrer. Paramètre ajouté depuis la version 2.2.0-rc1. | |
| &config | Fichier PHP externe pour configurer Wayfinder (voir core/components/wayfinder/configs pour des exemples). | |
| &scheme | Format qui sera utilisé pour générer les URLs. Les valeurs possible sont (basé sur l'API makeUrl) :
|
-1 |
| &sortBy | Quel champ servira pour ordonner le menu, par exemple publié "published". | |
| &sortOrder | Dans quel ordre il faudra ordonner, ascendant ou descendant, 'ASC' ou 'DESC'. | |
| &where | Option de filtre au format JSON. Par exemple quand vous voulez afficher que les ressources qui sont de type document &where=`[{"class_key:=": "modDocument"}]` ou à l'inverse cacher des resources qui sont du type Weblink &where=`[{"class_key:!=": "modWeblink"}]` | |
| &hereId | Défini l'ID à utiliser dans le snippet. Utilisez une valeur de [[ * id]] si le modèle spécifié par hereTpl et activeRowParentTpl est pas appliqué correctement à l'élément de menu. | iterated ID |
| &hereTpl | Le code a utiliser quand il faut afficher l'élément courrant dans le menu. |
Les paramètres d’affichage Html des éléments du menu :
| Paramètre | Description |
|---|---|
|
&outerTpl
|
Nom du Chunk contenant le modèle du conteneur global (le ul de la liste Html). L'espace de nom a utiliser pour récuperer les documents enfants est [[+wf.wrapper]]. |
|
&rowTpl
|
Nom du Chunk contenant le modèle pour afficher les éléments de sous menu. Si ce paramètre n'est pas renseigné, le modèle &outerTpl sera utilisé à la place.
|
|
&startItemTpl
|
Nom du Chunk contenant le modèle pour l'élément de départ, si elle est activée via le paramètre displayStart. Remarque: le modèle par défaut montre l'élément de départ, mais sans lien. Si vous n'avez pas besoin d'un lien, une classe Css peut être appliqué au modèle par défaut en utilisant le paramètre &firstClass=`className`. |
|
&parentRowHereTpl
|
Nom du Chunk contenant le modèle pour le document en cours si il est un conteneur et a des enfants. L'espace de nom a utiliser pour récuperer les documents enfants est [[+wf.wrapper]].
|
|
&parentRowTpl
|
Nom du Chunk contenant le modèle pour tous les documents qui sont des conteneurs et ont des enfants. L'espace de nom a utiliser pour récuperer les documents enfants est [[+wf.wrapper]].
|
|
&hereTpl
|
Nom du Chunk contenant le modèle pour le document courant.
|
| &innerTpl | Nom du Chunk contenant le modèle pour chaque sous menu. Si il n'y a pas de innerTpl défini, outerTpl est utilisé à la place. |
|
&innerRowTpl
|
Nom du Chunk contenant le modèle pour chaque éléments d'un sous dossier.
|
|
&innerHereTpl
|
Nom du Chunk contenant le modèle pour le document courant si c'est un sous dossier.
|
|
&activeParentRowTpl
|
Nom du Chunk contenant le modèle pour les éléments qui sont des conteneurs, qui ont des enfants et sont actuellement actifs dans l'arborescence.
|
|
&categoryFoldersTpl
|
Nom du Chunk contenant le modèle pour des dossiers de catégorie. Les dossiers de catégorie sont déterminés en définissant le modèle à vide ou en mettant l'attributs dans le champ de lien rel="category".
|
Les paramètre de class Css :
Vous pouvez facilement contrôler l’apparence du menu grâce que différents paramètres disponibles ci-dessous.
| Paramètre | Description | Valeur par défaut |
|---|---|---|
|
&firstClass
|
La class Css pour le première élément du menu de chaque niveau.
|
first |
|
&lastClass
|
La class Css pour le dernier élément du menu de chaque niveau.
|
last
|
|
&hereClass
|
La class Css pour l'élément qui vous montre ou vous êtes (élément courant). Si c'est un enfant, tous les parents jusqu'au départ auront cette class.
|
active
|
|
&selfClass
|
La class Css pour l'élément courant uniquement.
|
|
|
&parentClass
|
La class Css pour les éléments qui sont des conteneur et ont des enfants.
|
parent
|
|
&rowClass
|
La class Css pour tous les éléments.
|
|
|
&levelClass
|
La class Css pour tous les différents niveaux. Le niveau va être ajouté sous forme de class (level1, level2, level3 etc si vous spécifié 'level').
|
|
|
&outerClass
|
La class Css utilisé pour le modèle outerTpl.
|
|
|
&innerClass
|
La class Css utilisé pour le modèle innerTpl.
|
|
|
&webLinkClass
|
La class Css utilisé pour les éléments de type weblink.
|
Codes Css et JavaScript que vous voulez ajouter :
Si vous n’utilisez pas Wayfinder sur toutes les pages (ce qui me semblerait un peu fou mais pourquoi pas selon les cas) vous pouvez ajouter du Css et/ou du JavaScript, ce code devra être dans un Chunk et sera automatiquement ajout à votre code Html ou Wayfinder est appelé.
| Paramètre | Description |
|---|---|
|
&cssTpl
|
Nom du Chunk qui contient le Css que vous voulez ajouter à la page ou se trouve l'appel a Wayfinder.
|
|
&jsTpl
|
Nom du Chunk qui contient le JaveScript que vous voulez ajouter à la page ou se trouve l'appel a Wayfinder.
|
Vous êtes maintenant capable de créer des menus en quelques minutes grâce a Wayfinder.
N'hésitez pas à me contacter si vous avez la moindre question sur ce Snippet.
Partagez cet article
A propos de l'auteur
Passionné d’informatique, de Design, de développement d'application et du Web en général (participation au start-up weekend, hackathon, dev Var, formation Google...), j’ai créé ce site afin de partager mes connaissances sur mon système de gestion de contenu préféré MODX. En espérant participer au développement de la communauté.