Wayfinder/ListGlobal/DropMenu/etc. Nav Creation

hello,

i’ve tried all of the various incarnations of various snippets that create a css list from my site’s tree structure, and so far have failed. i am having two main problems. i have used modx a number of times in the past, but not encountered these two specific issues.

1) i need the snippet to create a <ul> that has classes assigned to all items: ".selected" to the one item that is the current page, and ".unselected" to all the other items. (in the past, i haven’t needed to style unselected items, and ListGlobal has worked fine for me.) but so far i’ve tried a lot of different snippets and, depending on which snippet (or even which version of which snippet) i use, i have only been able to get it to EITHER assign the proper <li> class to each item OR get it to show both parents and children. but not both. so in one snippet i get the nav to *work* correctly, but it doesn’t *style* correctly. in another snippet i can get it style right, but the children items don’t show up. can someone recommend a possible solution for me? ideal would be a snippet that "just works" since i pretty much don’t get php at all, and appear to be hopeless when it comes to editing a snippet to be more like what i need.

2) this may be corrected automatically once my nav works, but for some reason i’m having trouble with my friendly urls. i have modx set to generate paths such as: www.domain.com/parent/child.html. this seems to work, but for some reason if you’re on a child’s page, and you click a parent’s link in the nav, the new url will be www.domain.com/parent/parent2.html instead of www.domain.com/parent2.html, see what i’m saying? it’s like it doesn’t know to go up a level for some reason. i’ve never encountered this on previous modx sites. any ideas?

any help would be greatly appreciated! thanks in advance!

-daniel

Wayfinder can handle this with custom rowTpl and hereTpl:

In the wayfinder call include &rowTpl=`myrowTpl` &hereTpl=`myhereTpl` (you can name the tpl whatever you like). And then create a chunk called myrowTpl (or whatever you named it) with the following content:



and one for the hereTpl with:


In theory this should work but I have not tested it. If you have not yet had a chance take a look at the parameters for Wayfinder at:
http://www.muddydogpaws.com/development/wayfinder/parameters.html

For the URLs I think that there is a setting in the manager > tools > configuration in Friendly URLs select the option Use friendly alias path.

Setting this option to ’yes’ will display the full path to the document if the document has an alias. For example, if a document with an alias called ’child’ is located inside a container document with an alias called ’parent’, then the full alias path to the document will be displayed as ’/parent/child.html’.

dev_cw, thanks for your reply!

please bare with me, but don’t quite follow. i seriously only know like one way to do things, so hopefully that explains why i am going to sound so dense here.

the way i’ve done the nav-created-via-site-tree thing before successfully was with ListGlobal and basically all i needed to do was name the snippet, say, "leftNav", then go to where in my template the nav needed to be, and drop in [[leftNav]], and BAM it all worked. so that’s kinda like all i know how to do.

the thing you described doing with Wayfinder sounds a bit more involved, what with the "includes" and chunks, and so on. if doing so isn’t too difficult, could you please explain where to put what exactly? like what do i put in my template, and what goes in the chunk, and so on? sorry, i know this is such basic stuff!

thanks!

Sure, no problem. It looks worst than it really is.

FIrst in the manager (manage resources > chunks) you need to create two chunks that represent the rowTpl and the hereTpl as I described above. You will notice that they are basically the same but with different classes.

Then in your template where you want the menu you would add:

The &startId parameter lets you determine where you want the menu to start. It is commonly `0` but can be any document id that encompasses the documents in the menu.

The result of this would be something like this:


And if there is a sub-menu it would look like this:


You can edit the Tpl’s to get just the output you need. Hope this helps rather than make things worst

well the good news is that this is sooo much closer to working than i’ve gotten so far! wayfinder even seems to have fixed whatever the issue i was having with the nav not understanding how to go up a directory!

but, sadly, the "selected" item isn’t showing up with the correct style. so all items in the list show up assigned with the "unselected" class, instead of all but one...

any ideas?

thanks so much dev_cw... or as i will henceforth refer to you: lifesaver!

-daniel

oh! i just changed the string in the template from



to


and that seems to have sorta made it work. the selected top-level items now show up as selected! but for some reason the children don’t show up as selected.

ideally, of course, would be if when you were on one of the child pages, the parent AND the selected child would show up as "selected"... but whatever. i can settle for it not doing that.

thanks!

I think you should use &hereClass as opposed to &hereTpl


will add a class="activated" to whereever [wf.classes] is in your template. You just need to add the .activated to your CSS.



would be an example of a template for the outerTpl.

Thats what I used to do www.wssunaa.org so for instance if I’m in a particular news entry in news & events => news => entry it will display like: http://wssunaa.org/index.php?id=121

This didn’t work. I think I correctly implemented what you said to do Taff, but now none of the "unselected" classes are assigned correctly.

Shucks.

Is the class activated being added to the HTML if you check the source code?

If the class is not selected...it should appear as normal without any class="activated" in the HTML

If you want I can post the 4 templates I am using on that site & the wayfinder call. The downside here is that I was given the HTML for it so it doesn’t use lists rather a <p><a>link</a></p> type affair.

Have you got a link to your page?

Taff

Taff, thanks for your help!

The selected item does have "activated" as it’s class, but my nav requires that all items have a class assigned: either ".selected" or ".unselected" to look right. I added an ".activated" class to my css (and just made it a copy of ".selected"). But none of the other, non-selected items have classes assigned anymore. They need to have an "unselected" class applied.

Thanks!

-Daniel