The good news is that I finally got it working ( after a few evenings), the bad is that Wayfinder is not the most intuitive snippet around... imho. In fact I now know how it got it’s name... considering the time I needed to, ahum ’find my way’.
The get a grip on how Wayfinder ticks I went thru lots of documentation and experimenting. Resigning to the good old ’trial and error’ method in fine. Here’s how I did it:
- First code yourself a pure HTML example of what you want, right in your template and where you want it. Typically it goes something like this:
<h3>Nice title</h3>
<ul>
<li>first</li>
<li>second</li>
</ul>
Check that your html code is valid and everything displays and feels ok. Do this before you even try convincing wf to generate code for you.
- After reading up on the wiki to know what exactly wf does I made myself a ’debugging’ Wayfinder call that I inserted in my template, right after my example html code:
[!Wayfinder? &startId=`48` &level= `2` &outerTpl=`wf.outer` &rowTpl=`wf.row` &parentRowTpl=`wf.parentRow` &parentRowHereTpl=`wf.parentRowHere` &innerTpl=`wf.inner` &hereTpl=`wf.here` &innerRowTpl=`wf.innerRow` &innerHereTpl=`wf.innerHere` &activeParentRowTpl=`wf.activeParentRow` &categoryFoldersTpl=`wf.categoryFolders` !]
Don’t forget to change startId and level to your context!
- The chunks look like these, code comes straight from the wiki. For instance the wf.Outer chunk:
<!-- Wayfinder debugging starts here:
<ul wf="Outer" id="topnav"[+wf.classes+]>[+wf.wrapper+]</ul>
-->
I made it start with an html comment, so the generated code will not mix up your screen while your developping the wf call.
- The wf.parentRow chunk:
<li wf="parentRow" [+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>
You’ll notice I did add a bogus attribute wf so I can trace which template got processed.
- The general idea is now to display your page in a browser and to take a look at it’s source code ( right click the page, View source) in order to compare the example code with the code that Wayfinder produced.
- Look for templates you can use to math the example code.
- Make a copy of the ’debugging’ Wayfinder call before you start, the original will help you out while you’re develloping the definitive one. Replace one template at a time and take a close look on the Wayfinder behaviour while you test different pages.
- Sometimes you’ll want Wayfinder to generate nothing at all, in that case I use a wf.span chunk:
If you don’t provide a template wf will generate some context based standard code... use this if it doesn’t fit your purpose.
- If you don’t wan’t any code generated but would like Wayfinder to drill down the document structure, use a wf.wrap chunk:
- Once the Wayfinder code is equal to the example code you’re done. Comment out the example code and the ’debugging’ call.
That’s about it, I hope this will help you master Wayfinder faster than I did. ;-).
☆ A M B ☆
