Wayfinder + andreas01 + new user...

OK, so I am trying to integrate Wayfinder into the andreas01 template and this is raising a lot of questions - about MODx, about Wayfinder and about andreas01... As a new user, I have been lurking around the Wayfinder board sympathising a bit with the other new users who are finding it all a bit overwhelming and finding the documentation difficult to follow...

However I think that I have managed to get some feeling for what is going on, but I still lack some of the pieces of the puzzle.... so I’ll just say what I think is true as though I were writing a "beginner’s guide" and would appreciate it if you let me know if, when and where I deviate from the truth...

(1) The basic Wayfinder snippet call simply produces a nested unordered list of links with no styling or formatting at all - the only things provided by default are two CSS class IDs "active" and "last" which are attached to the link referring to the current location and one attached to the last element of the list, respectively.

-- the purpose of these class IDs is to permit the templater to make special CSS for those classes in order to style them specially [I think]

(2) The parameters of the form "&rowTpl" should refer to the name of an existing chunk (chunks are located are Resources -> Manage Resources -> Chunks from the manager). These chunks are bits of HTML that describe the FORMAT (but not the STYLE) of the display. The chunks contain a combination of plain HTML and "placeholders" such as [+wf.link+], [+wf.title+] which get replaced by the appropriate dynamically generated links, titles etc as each list item is processed.

The package comes with "suggested" chunks that you can use such as "wfRow" which looks like



so basically just a list item containing an anchor tag with a link, title and link text. The [+wf.wrapper+] will be empty unless the current item has sub-folders, in which case the entire menu representing that item will be placed at that location (ie after before the enclosing list item is closed). This performs the "nesting" of the lists.

To use this chunk you need to INSTALL the chunk first by copying the above text into a New Chunk which you may as well call "wfRow". Then the snippet call



will format each row by using that chunk.

-- one question that I have here is that even if I DON’T specify this chunk, then I get essentially the same output - it seems to be the default behaviour [is that right?]


(3) The parameters of the form "&innerClass" and "&outerClass" allow the user to associate a CSS class ID with a specific type of element in the resulting nested list. The Wayfinder snippet will simply ensure that each item is properly marked, and it is the user’s responsibility to THEN supply CSS that actually STYLES these classes.

The parameter "&levelClass" is particularly useful because if the snippet call contains



then the items at the top level of the menu will be marked as being in class "demo1", the second level in "demo2" and so on. Then just by adding CSS for classes "demo1" and "demo2" you can arrange the menu items to indent, reduce font size, change colour or whatever you like.


-- my big question here is whether these classes are even necessary? I have seen a number of CSS files that simply style things according to their location in the hierarchy by using selectors of the form

ul li ul li

for a list item at the second level of a nested unordered list.


(4) Now the question is WHERE to put the snippet call... Usually the menus are structured by the TEMPLATE you are using (although there is nothing to stop you putting a menu in the middle of the content part of the page). So that means digging through the actual code in the template and working out how IT structures its menus.. (if you want to replace them with Wayfinder).

In my case, andreas01 (using something called ListMenuBlock to actually produce the menu) produces a menu contained in a CSS id "avmenu" (Andreas Viklund menu, I guess) and also wrapped in a CSS class "sideblock" and a CSS id "sideMenu". I am not sure what role all of these play in the styling - in particular the accompanying CSS file seems to contain no styling for "sideblock" at all...

Fortunately the styling seems to be done purely in terms of "ul li ul li" and so simply replacing ListMenuBlock by Wayfinder results in an acceptable first-pass....

(5) Now for my final big question ... the reason I am working through all this is that I want to have my side menu display only the menu below some particular folder... I can see how to use UltimateParent to identify the appropriate folder, but what I currently cannot do is to make the menu look like

Title of Folder

Item 1
Item 2
Item 3

I can get the list of "Item 1", "Item 2", "Item 3" and so on, but not the name of the parent. I am not sure if this is just a tweak to the Wayfinder snippet call or if I need to do something else...


Any comments on my understanding or lack of understanding and what I need to brush up on would be most appreciated..

Cheers

Gordon

Gordon,
That really is a great post and really hits things right on the nose. Here are the answers to your questions:

-- one question that I have here is that even if I DON’T specify this chunk, then I get essentially the same output - it seems to be the default behaviour [is that right?]

Corrent, the example I provided for wfRow is the same as the one I use if none is specified. You only need to use a custom chunk if you want to change the output.

-- my big question here is whether these classes are even necessary? I have seen a number of CSS files that simply style things according to their location in the hierarchy by using selectors of the form

No they are not necessary, but they do allow you to do some things not otherwise possible. Like styling the active page differently, determining the last or first item in a menu, or the active item including the parents. So use them if you have a need for them.

Now the question is WHERE to put the snippet call... Usually the menus are structured by the TEMPLATE

You can call the snippet from inside the template, or put in in the content. You could also put it in a chunk and call the chunk somewhere on the page. You could even have it inserted with a template variable. MODx is pretty flexible in terms of where the code can be run from.

I can get the list of "Item 1", "Item 2", "Item 3" and so on, but not the name of the parent. I am not sure if this is just a tweak to the Wayfinder snippet call or if I need to do something else...

I’m not sure about this one. I don’t have code in wayfinder to ouput the parent item like this. I’m not sure if anyone has a work around for this, but I will look into adding this ability to Wayfinder.

Hope that helps,
Kyle