[SOLVED] I cannot get my head around how to do this WayFinder menu

73 Posts

larsb Reply #1, 16 years, 11 months ago

Hi all,

I’m trying to help a friend build a website, and of course also trying to lure him over to ModX. He is a Joomla user at the moment.

Anyways, he has found this template http://benblogged.com/dev/ninja_biz/index.html via Themeforest, and has already bought it rolleyes

Yesterday I helped him converting the template to ModX. Not a very hard task, but the right-side menu gave me some problems.

The markup of the menu looks like this in the original template:

<div class="demo-show">

	<h3>Ninjas</h3>
		<div>
			<ul>
				<li><a href="#">Ben Johnson </a></li>	
			</ul>
		</div>

	<h3>Moves</h3>
		<div>
			<ul>
				<li><a href="#">Dragon Fist</a></li>
				<li><a href="#">TIger Claw</a></li>
			</ul>
		</div>
				  
</div>

And with some fancy jQuery added, you get a nice little expanding menu when you click on one of the <h3> elements.

However, putting this together in WayFinder seemed just about impossible to me yesterday and I finally gave up after pulling my hair out for a few hours.

The problem is that my &rowTpl is being used on generating both the <h3> element and the individual <li>’s. Resulting in the documents repeating themselves.

Since I forgot to bring my usb stick today, I haven’t got any examples on the tpl chunks I have tried to create. But I am also afraid that these would not be of any good, since a fresh pair of eyes is needed here.

Can someone shed some light on this particular WayFinder challenge?

.larsb

Signature on it's way

241 Posts

bob1000 Reply #2, 16 years, 11 months ago

Depending on how you’ve structured your documents, it might be easier to use a separate Wayfinder call for each section. Use a normal &rowTpl chunk to output each <li>:

<li>
	<a href="[+wf.link+]">[+wf.linktext+]</a>
	[+wf.wrapper+]
</li>

And put the <ul> <div> and <h3> in your &outerTpl chunk:

<h3>Ninjas</h3>
<div>
	<ul>
	[+wf.wrapper+]
	</ul>
</div>

What does your document structure look like? Would this solution work with your set up?

73 Posts

larsb Reply #3, 16 years, 11 months ago

Hi bob1000,

Thank you for the answer.

The problem with this menu is that the <h3> elements also needs to be controllable by the end-user. Menaning that he should be able to create these elements as he sees fit, without having to edit any code since he has no clue on how to do that.

The suggestion you give here is something that I have already tried, but I cannot make it work when the <h3> also needs to be part of the &rowTpl.

.larsb

Signature on it's way

241 Posts

bob1000 Reply #4, 16 years, 11 months ago

Can you use the &displayStart parameter and &startItemTpl chunk to generate the <h3> element?

<h3>[+wf.linktext+]</h3>[+wf.wrapper+]

If each of the menu sections has a different parent, this would output the menu title of each parent which can be edited by the user.

Or do all of the menu items have the same parent?

73 Posts

larsb Reply #5, 16 years, 11 months ago

Hi bob1000,

You reply helped me getting a bit closer to achieving what I would like. However it’s not working perfectly yet.

For now I have the following:

<div class="menu">
[!Wayfinder?&startId=`[*id*]` &rowTpl=`SubRowTpl` &startItemTpl=`SubStartItemTpl` &displayStart=`true`!]
</div>

SubRowTpl

<li><a href="[+wf.link+]" [+wf.attributes+]>[+wf.linktext+]</a></li>
[+wf.wrapper+]

SubStartItemTpl

<h3>[+wf.linktext+]</h3>
<div>
<ul>
[+wf.wrapper+]
</ul>
</div>

My menu structure looks like this:

The problem however is that the <h3> element now contains the current document’s title instead of the child doc. Secondly it is only the first item in the menu that is being affected by the &startItemTpl. If you compare the screenshot from what I have got and the original template the difference is clear.

Instead of the ’Top Level’ item becomming the <h3> anchor it should have been the ’AAAAAAAAAA’ and ’BBBBBBBBBB’ item, with the ’aaaaaaaaaa’ and ’bbbbbbbbbb’ being the children.

I hope that I am making sense huh

.larsb

Signature on it's way

241 Posts

bob1000 Reply #6, 16 years, 11 months ago

You also need an &outerTpl. This should contain the inner div and ul elements.

&startItemTpl

<h3>[+wf.linktext+]</h3>[+wf.wrapper+]

&outerTpl

<div>
<ul>
[+wf.wrapper+]
</ul>
</div>

Which document are you calling Wayfinder from? You are using &startId=`[*id*]` in the call so that will pull in the current document title.

73 Posts

larsb Reply #7, 16 years, 11 months ago

I get the exact same result as before when using the &outerTpl as you suggested. I tried changing the &startId to &startId=[[UltimateParent?]] but that did not change anything either.

&outerTpl

<div>
<ul>
[+wf.wrapper+]
</ul>
</div>

&rowTpl

<li><a href="[+wf.link+]" [+wf.attributes+]>[+wf.linktext+]</a></li>
[+wf.wrapper+]

&startItemTpl

<h3>[+wf.linktext+]</h3>
[+wf.wrapper+]

Call

[!Wayfinder?&startId=`[[UltimateParent?]]` &outerTpl=`SubOuterTpl` &rowTpl=`SubRowTpl` &startItemTpl=`SubStartItemTpl` &displayStart=`true`!]

.larsb

Signature on it's way

241 Posts

bob1000 Reply #8, 16 years, 11 months ago

I got it working on a test using multiple Wayfinder calls, one for each parent doc, and hard coding the id into the &startId parameter.

241 Posts

bob1000 Reply #9, 16 years, 11 months ago

OK, I think I understand what you’re trying to get! Instead of the &startItemTpl, I’ve used an &innerTpl and &innerRowTpl. Instead of hard coding the ID, I’ve added &topLevel=`1` to UltimateParent.

Wayfinder call:

[!Wayfinder? &startId=`[[UltimateParent? &topLevel=`1`]]` &outerTpl=`SubOuterTpl` &rowTpl=`SubRowTpl` &innerTpl=`SubInnerTpl` &innerRowTpl=`SubInnerRowTpl` &level=`2`!]

SubOuterTpl - contains your containing div:

<div class="menu">
	[+wf.wrapper+]
</div>

SubRowTpl - contains the h3

<h3>[+wf.linktext+]</h3>
[+wf.wrapper+]

SubInnerTpl - contains the inner div and the ul

<div>
<ul>
[+wf.wrapper+]
</ul>
</div>

SubInnerRowTpl - contains your list items

<li><a href="[+wf.link+]" [+wf.attributes+]>[+wf.linktext+]</a></li>
[+wf.wrapper+]

How does that work?

73 Posts

larsb Reply #10, 16 years, 11 months ago

That works like a f****** miracle!

Thanks alot, I’ll put it as solved

.larsb

Signature on it's way