Wayfinder 2 tier navigation templating problem

9 Posts

darcey Reply #1, 13 years, 11 months ago

Hi,

Revo 2.2.5 wayfinder 2.3.3

I having been digging into wayfinder trying to replicate my websites navigation system (www.aftc.co.uk), which kind of works like a JQuery accordion but it doesn't.

So I have it all working nicely but I need to use a different template when there is only a tier1 level navigation item. It works fine for when the tier1 level navigation item has tier2 items under it but if it's standing on it's own it is generated as the inner.

Is there a way to detect and output according a different snippet depending on if the navigation item being processed has any items under it?

This is the code for an item with sub items (which I can do fine):

<!-- Header for navigation
<div id="navid1">
    <a href='#'>tier 1 navigation element title<a>
<div>
<div id="navid1body">
    <ul>
        <li>a href="index.php?id=1" title="link title 1">Link title 1</a></li>
        <li>a href="index.php?id=2" title="link title 2">Link title 2</a></li>
        <li>a href="index.php?id=3" title="link title 3">Link title 3</a></li>
    </ul>
</div>
<div class="navbase"></div>

For a single tier item the code should appear as:

<!-- Header for navigation
<div id="navid2">
    <a href='#'>tier 1 navigation item title 2<a>
<div>
<div class="navbase"></div>

Any ideas?
(At the moment I am leaning towards leaving wayfinder generate a standard nested ul & li list and to use JavaScript to assemble the navigation once the page has loaded). [ed. note: darcey last edited this post 13 years, 11 months ago.]

☆ A M B ☆
1,780 Posts

Frogabog Reply #2, 13 years, 11 months ago

What's your wayfinder call? Are all the links/pages that you're trying to use in the menu resources? Are they sorted in the resource tree with parent resources exactly as your menu hierarchy should display?

Wayfinder uses the resource tree hierarchy to display the menus. How you want it to display depends on how you call Wayfinder. You can use one Wayfinder call on one template, and a totally different one on another. When you say use a different template, this is where you can change the id to nav2.

But, I'm thinking you want to use the same template for most of your pages and make sure that resources without children aren't using the subnavigation id instead. If so, as long as you have your resources categorized in the resource tree as single level resources, and they are in the same level as your other parents, Wayfinder will consider them first level resources.

Frogabog- MODX Websites in Portland Oregon
"Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
Having server issues? These guys have MODX Hosting perfected - SkyToaster

9 Posts

darcey Reply #3, 13 years, 11 months ago

My wayfinder call looks like so:

[[Wayfinder? &startId=`0` &level=`2` 
&hereTpl=`wfHereTpl`
&outerTpl=`wfOuter`
&innerTpl=`wfInner`
&innerRowTpl=`wfInnerRowTpl`
&innerHereTpl=`wfInnerHereTpl`
&parentRowTpl=`wfParentRow`
&parentRowHereTpl=`wfParentRowHereTpl`
&categoryFoldersTpl=`wfCategoryFoldersTpl`
]]

The only items that work are "wParentRow" and "wfInner", none of the others output anything in the desired locations. Which will generate:

<!-- wParentRow -->
<div class='NavType1Expander' id="nav6"><a href='#'>Curriculum Vitae</a></div>
<div class='NavType1Container' id="nav6Body">
	<ul>
	
	<!-- wfInner -->
	wfInnerRowTpl

	</ul>
</div>
<div class='NavType1ExpanderBase'></div>
<!-- Navigation component end -->

Single entries end up as a:

<li><a href="index.php?id=8" title="Work history" >Work history</a></li>

My resources are structured as I want my site structure to be.

Templates will vary between 3 or 4 but they are pretty much the same, however the navigation element is identical throughout. I have a hand build CMS of the site running at www.aftc.co.uk

☆ A M B ☆
1,780 Posts

Frogabog Reply #4, 13 years, 11 months ago

Quote from: darcey at Nov 07, 2012, 02:53 PM

Any ideas?
(At the moment I am leaning towards leaving wayfinder generate a standard nested ul & li list and to use JavaScript to assemble the navigation once the page has loaded).

Yes, by far this will be the easiest, although you could also simply assign level classes with Wayfinder and do it all with css.

Frogabog- MODX Websites in Portland Oregon
"Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
Having server issues? These guys have MODX Hosting perfected - SkyToaster

☆ A M B ☆
1,780 Posts

Frogabog Reply #5, 13 years, 11 months ago

Quote from: darcey at Nov 07, 2012, 03:39 PM

My wayfinder call looks like so:

[[Wayfinder? &startId=`0` &level=`2` 
&hereTpl=`wfHereTpl`
&outerTpl=`wfOuter`
&innerTpl=`wfInner`
&innerRowTpl=`wfInnerRowTpl`
&innerHereTpl=`wfInnerHereTpl`
&parentRowTpl=`wfParentRow`
&parentRowHereTpl=`wfParentRowHereTpl`
&categoryFoldersTpl=`wfCategoryFoldersTpl`
]]

Just to be certain, you created new chunks and renamed them wfParentRow, wfInner, etc. Correct? According to the docs, did you make sure to include the wf.wrapper placeholder?

Frogabog- MODX Websites in Portland Oregon
"Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
Having server issues? These guys have MODX Hosting perfected - SkyToaster

9 Posts

darcey Reply #6, 13 years, 11 months ago

CSS on single <ul> tags wont work correctly for the visual result I require. The css version would require detection and specific styles applied to for:

1. Menus with nested items
2. Menus with non nested items (standard rounded button and borders)
3. Nested menu last item would cause a problem as this need a rounded base

I don't think wayfinder can handle this kind of functionality, my output at present with attached screen grab of resource structure gives:

<!-- ########################### NAV START ########################### -->
	<div id="site-nav">
		<div id="Nav">






<!-- wfHereTpl -->


<!-- wParentRow -->
<div class='NavType1Expander' id="nav6"><a href='#'>Curriculum Vitae</a></div>
<div class='NavType1Container' id="nav6Body">
	<ul>
	
	<!-- wfInner -->
	wfInnerRowTpl

	</ul>
</div>
<div class='NavType1ExpanderBase'></div>
<!-- Navigation component end -->






<!--MANUAL ADDED NOTE: here is the issue -->
<li><a href="index.php?id=8" title="Work history" >Work history</a></li>

<!--MANUAL ADDED NOTE: here is the issue -->
<li><a href="index.php?id=9" title="Portfolio" >Portfolio</a></li>


<!-- wParentRow -->
<div class='NavType1Expander' id="nav10"><a href='#'>HTML5, XHTML, CSS & JavaScript</a></div>
<div class='NavType1Container' id="nav10Body">
	<ul>
	
	<!-- wfInner -->
	wfInnerRowTpl
wfInnerRowTpl
wfInnerRowTpl
wfInnerRowTpl
wfInnerRowTpl
wfInnerRowTpl
wfInnerRowTpl
wfInnerRowTpl
wfInnerRowTpl
wfInnerRowTpl

	</ul>
</div>
<div class='NavType1ExpanderBase'></div>
<!-- Navigation component end -->









<!-- wfCategoryFoldersTpl -->
<!--MANUAL ADDED NOTE: here is the issue -->
<li><a href="index.php?id=12" title="Away3D 3.x" >Away3D 3.x</a></li>

<!--MANUAL ADDED NOTE: here is the issue -->
<li class="last"><a href="index.php?id=23" title="Welcome" >Welcome</a></li>





		</div>
	</div>
	<!-- ########################### NAV END ########################### -->

☆ A M B ☆
1,780 Posts

Frogabog Reply #7, 13 years, 11 months ago

These wayfinder class parameters may be helpful

&firstClass
CSS class for the first item at a given menu level.

&lastClass
CSS class for the last item at a given menu level.
last
&hereClass
CSS class for the items showing where you are, all the way up the chain.
active
&selfClass
CSS class for the current item.

&parentClass
CSS class for menu items that are a container and have children.
parent
&rowClass
CSS class denoting each output row

&levelClass
CSS class denoting every output row level. The level number will be added to the specified class (level1, level2, level3 etc if you specified 'level').

&outerClass
CSS class for the outer template.

&innerClass
CSS class for the inner template

&webLinkClass
CSS class for weblink items.

Frogabog- MODX Websites in Portland Oregon
"Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
Having server issues? These guys have MODX Hosting perfected - SkyToaster

9 Posts

darcey Reply #8, 13 years, 11 months ago

I have placed:

<!-- chunk file name -->

within all the defined linked wfTPL files. Adding coded where output is correct. Some contain

[[+wf.wrapper]]

and some just the comment [ed. note: darcey last edited this post 13 years, 11 months ago.]

9 Posts

darcey Reply #9, 13 years, 11 months ago

Sorry but the css class elements in wf are of no use to me:

I need to generate:

<!-- Navigation component start: cat > cat --> 
<div class='NavType1Expander' id='root7'><a href='#'>Away3D 3.x & Away3DLite 1.x</a></div>
<div class='NavType1Container' id='rootContainer7'>
	<!-- Navigation start: nested -->
	<ul id='menu'>
				<li><a href="index.php?clist=110&index=7&subindex=0">Links & Resources</a></li>
				<li><a href="index.php?clist=114&index=7&subindex=1">Flash, FD, Flex and Flash Builder</a></li>
				<li><a href="index.php?clist=115&index=7&subindex=2">View, Scene, Camera & Filters</a></li>
				<li><a href="index.php?clist=116&index=7&subindex=3">Primitives</a></li>
				<li><a href="index.php?clist=117&index=7&subindex=4">Materials / Textures</a></li>
				<li><a href="index.php?clist=118&index=7&subindex=5">Lighting</a></li>
				<li><a href="index.php?clist=119&index=7&subindex=6">Interactivity</a></li>
				<li><a href="index.php?clist=120&index=7&subindex=7">Panoramics</a></li>
				<li><a href="index.php?clist=121&index=7&subindex=8">Collision detection</a></li>
				<li><a href="index.php?clist=122&index=7&subindex=9">AS3Dmod</a></li>
				<li><a href="index.php?clist=123&index=7&subindex=10">JigLibFlash</a></li>
				<li><a href="index.php?clist=167&index=7&subindex=11">Augmented Reality (FLARToolkit)</a></li>
				<li><a href="index.php?clist=124&index=7&subindex=12">Blender</a></li>
				<li><a href="index.php?clist=125&index=7&subindex=13">Prefab</a></li>
				<li><a href="index.php?clist=193&index=7&subindex=14">Away3DLite</a></li>
				<li><a href="index.php?clist=192&index=7&subindex=15">Useful utilities & classes</a></li>
				<li><a href="index.php?clist=209&index=7&subindex=16">Books</a></li>
				<li><a href="index.php?clist=126&index=7&subindex=17">Other</a></li>
	</ul>
	<!-- Navigation end: nested -->
</div>
<div class='NavType1ExpanderBase'></div>
<!-- Navigation component end -->

Which wf can do....

But wf cannot do this at the same time:

<!-- Navigation component start: cat > cat --> 
<div class='NavType1Expander' id='root7'><a href='index.php?clist=110&index=7&subindex=0'>Away3D 3.x & Away3DLite 1.x</a></div>
<div class='NavType1ExpanderBase'></div>
<!-- Navigation component end -->

☆ A M B ☆
1,780 Posts

Frogabog Reply #10, 13 years, 11 months ago

According to your current site, these parent with children aren't viewable resources, so you could ~~change the content type of the parents to category,~~ and then apply the NavType1Container to the &categoryFoldersTpl parameter instead of the &outerTpl.

I'm a little more concerned that you're not getting any output other than wfParentRow and wfInner from your Wayfinder call though.

Edit: sorry, it's not the content type. NVM, don't waste your time looking for the category content type.

- Read this thread - discussion about non-clickable parents and different menus - page 3
https://forums.modx.com/thread/79861/wayfinder---two-separate-menus-help-please-solved

[ed. note: frogabog last edited this post 13 years, 11 months ago.]

Frogabog- MODX Websites in Portland Oregon
"Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
Having server issues? These guys have MODX Hosting perfected - SkyToaster