Menus déroulants avec Wayfinder. Questions de novice.

Bonsoir,

MODx c’est du nouveau pour moi et je peine à utiliser le snippet Wayfinder.

J’aimerais avoir une barre de menus déroulants. J’ai compris le rôle des paramètres startId et level.
Comme je prévois à terme un site multilingue, j’ai placé mes pages dans un "dossier-document" nommé "fr" qui porte l’identifiant 49.

Les pages de ce dossier sont bien listées sous la forme d’une liste à puce contenant des liens, mais je ne parviens pas à transformer la mise en page pour en faire un menu déroulant. Certes, mes documents ne contiennent pas encore d’enfants, mais je m’attendais à obtenir des entrées de barre de menu.

Mon modèle contient notamment ceci :


J’ai aussi créé 2 chunks, le premier, AP_wfd_parentRowTpl :



et le second, AP_wfd_cssTpl :


(La feuille de style ultimate_drop.css est placée à la racine de mon site.)

J’ai pu constater que le code correspondant aux chunks n’a pas été inséré.

D’une manière générale, je ne comprends pas bien quels paramètres utiliser pour un menu déroulant classique.
J’ai également essayé avec outerTpl et rowTpl mais sans plus de succès.

Dans le cas du placeholder [+wf.classes+], je ne comprends pas non plus comment MODx sait-il quelle classe (class=...) il doit insérer dans la balise HTML. A priori, il peut y avoir des dizaines de classes définies dans la feuille de style...
Pas évident ces "placeholders" pour qui débute.

Pardonnez ma naïveté... le codage manuel sans CMF m’a sans doute laissé quelques séquelles.

Ah, j’oubliais : Que ce passe-il si la branche dont je souhaite lister les documents, en l’occurence le "dossier" fr change d’id?
Devrai-je alors modifier manuellement l’argument startId dans mon appel du Wayfinder ?
Dois-je de préférence utiliser un placeholder du type [+id+] ou [+parent+] ? Là, ça devient vraiment du chinois pour moi.

Merci pour votre aide.

Salut, je n’ai pas le temps de répondre à tout mais voici des indications
EDIT :

Certes, mes documents ne contiennent pas encore d’enfants,

Si il n’y a pas d’enfant, je ne suis pas sur que wayfinder affiche quoi que ce soit...

Ah, j’oubliais : Que ce passe-il si la branche dont je souhaite lister les documents, en l’occurence le "dossier" fr change d’id?

tu peux utiliser le snippet ultimageParent dans ton appel wayfinder pour détecter automatiquement le parent ultime (= ton dossier langue) au lieu de marquer l’id en "dur". Un truc du genre (vérifier la syntaxe)

[!Wayfinder? &startId=`[[UltimateParent]]` &level=`3` !]

Dans le cas du placeholder [+wf.classes+],

Ce sont des classes propre à wayfinder. Sur un élément de menu actif, il va afficher "active". Sur le dernier élément de menu, il va afficher "last".

ici tu trouveras une documentation avec des exemples :
http://www.muddydogpaws.com/development/wayfinder/features.html

Sur cette page tu trouves une explication assez détaillée des différents paramètres et placeholders
http://www.muddydogpaws.com/notebook/wayfinder-10.html&d=wayfinder.documentation.html

Pour faire un menu avec un design très précis, wayfinder est assez déroutant quand on débute. Il faut surtout se concentrer dans un premier temps sur les paramètres:
&outerTpl
&rowTpl

Si tu comprends déjà bien comment te servir des chunks avec ces paramètres, tu devrais arriver ensuite à trouver comment faire exactement le menu déroulant de tes rêves en étudiant la doc

Merci Nyl,

Je vois qu’il me faut encore creuser un peu.

Je connaissais le "site de Wayfinder", c’est-à-dire www.muddydogpaws.com, et c’est d’ailleurs là que j’ai trouvé les chunks collés dans mon précédent message. Comme ça n’a pas marché dans mon cas, je vais tenter de créer un sous-dossier par menu avec des documents pour voir si ça débloque la situation. Je vais aussi retenter d’utiliser outerTpl et rowTpl.
L’aspect le plus ardu avec Wayfinder est peut-être le nombre énorme de paramètres possibles.

Des nouvelles dès que j’aurai trouvé...

Quelle différence entre ces deux moyens d’appeler Wayfinder :

[[Wayfinder? ... ]]

[!Wayfinder? ... !]

Le premier dans les documents et le second dans les modèles ?

Salut,

il a deux méthodes pour appeler un snippet
1/ cached => [[
2/ uncached => [!

Dans le 1/ le résultat du snippet ets mis en cache lors de sa première éxécution. Lors du rechargement de page, il n’est plus éxécuté, le parser récupère le résultat mis en cache.
Dans le 2/,le snippet est éxécuté à chaque chargement de la page, cette syntaxe demande plus de ressources et s’applique dans le cas des formulaires ou des script reposant sur le traitement de variables en GET ou POST.

On peut également combiner un snippet cached et une page uncached pour obtenir le résultat du 2/.

:-)

Bon, ça va déjà un peu mieux.
Voici donc une mini marche à suivre, même si le résultat n’est pas encore parfait.

J’ai vu qu’il existe un certains nombres de configurations prédéfinies pour le menus déroulants.
Celles-ci se trouvent dans assets/snippets/wayfinder/configs.

En ouvrant une de ces configs dans un éditeur de texte, on voit que des variables PHP sont définies, correspondant aux noms des paramètres acceptés par Wayfinder. C’est donc comme si on définissait tout les chunks en batch dans un fichier PHP. (Je suppose que les chunks sont en fait de simples variables PHP stockées en base de donnée. )

J’ai donc testé l’utilisation du fichier de configuration cssplay-dropdown.config.php,
(cf. dans ce fil de discussion le second des messages postés le 11.09.2008 :
http://www.modxcms.de/forum/comments.php?DiscussionID=1544)
c’est-à-dire que j’ai placé dans mon modèle :


Et j’ai obtenu un menu déroulant, comme espéré.

Ensuite, j’en suis revenu à mes chers chunks correspondant aux paramètres du snippet outerTpl, rowTpl et cssTpl et j’ai ajouté class="menu" dans la <div> contenant le Wayfinder, afin que les écritures de ce snippet utilisent la classe "menu" définie dans le fichier ultimate_drop.css que j’ai copié à la racine de mon site.

Dans le template :


Chunk AP_wfd_outerTpl :


Chunk AP_wfd_rowTpl :


Chunk AP_wfd_cssTpl :


Les noms des chunks sont arbitraires.
Ici, AP est une abréviation du nom de mon site et wfd est choisi pour me souvenir qu’il s’agit de chunks pour Wayfinder.

Le résultat ? Ca fonctionne, mais j’ai encore des problèmes de mise en page, par exemple une indentation des entrées de liste ou encore un espace vertical entre les éléments de liste. Je me demande si je dois mettre un class="menu" dans les <ul> et dans les <li>. Selon la feuille de style ultimate_drop.css, il me semble que non.

Ci-joint, une copie d’écran du résultat obtenu.

Ma question précédente reste ouverte : Quand utilise-t-on [! plutôt que [[ pour inclure un snippet ?

Merci heliotrope !

J’étais trop occupé à la rédaction de mon dernier message et je n’ai pas vu ta réponse.
C’est bien utile de savoir que [[ = cached et [! = uncached.

(...) j’ai encore des problèmes de mise en page, par exemple une indentation des entrées de liste ou encore un espace vertical entre les éléments de liste. Je me demande si je dois mettre un class="menu" dans les <ul> et dans les <li>. Selon la feuille de style ultimate_drop.css, il me semble que non.

Problèmes d’affichage résolus !

En fait les décalages verticaux et horizontaux des entrées de menu <li> étaient hérités d’une feuille de style autre que celle pertinente pour le menu qui définissait des styles pour tous les <ul> et <li>.

Pour la feuille de style du menu, j’ai récupéré celle se trouvant dans le code source de cette page de démo :
http://www.cssplay.co.uk/menus/final_drop2.html

Par contre, j’ai dû la compléter un peu en rajoutant :
.menu li {
padding:0;
margin:0;

(lignes 27 à 29 depuis l’en-tête de la feuille de style)

L’image jointe montre le résultat du menu "Feuille d’automnes".
Le menu ne fonctionne pas encore sous MSIE 7 (problème de chunks peut-être), mais je lancerai une nouvelle discussion sur ce sujet.