[Solved] Having a bit of a problem with Wayfinder and setting it up correctly...

☆ A M B ☆
476 Posts

flinx777 Reply #1, 18 years, 3 months ago

So I’ve run into a small problem with Wayfinder. I’ve got a navigation set up the way I want it to be. This page shows it coded in just plain HTML...this page is not set up on MODx but was my starting point while coding the page. The navigation on the left is what I am after...simple navigation:

http://gpc.my619.com/t_left_hand_nav.html

When setting up my Wayfinder call in MODx, I think (well, I know) I set it up wrong. Here’s what I’m doing:

    
<div id="column1">

[!Wayfinder? &startId=`57` &outerTpl=`mh.OuterTpl` &innerTpl=`mh.InnerTpl` &level=`2` !]

</div><!--Column 1-->

mh.OuterTpl:

  
<ul class="Lnav">
[+wf.wrapper+]
</ul>

mh.InnerTpl

<li>
<ul class="Lnav">
[+wf.wrapper+]
</ul> 
</li>

Here’s the actual output from the Wayfinder set up above:

http://gpc.my619.com/

On IE6 and 7 it looks fine, but not in FF and other browsers...it’s messed up in those. It’s not outputting the way I had intended for Wayfinder to output it. I guess my question is, what am I doing incorrectly with Wayfinder as my goal is to have this output:

<ul class="Lnav">
<li><a href="#">Solar Home & Office</a></li>
<li>
<ul class="Lnav">
<li><a href="#">All Solar Products</a></li>
<li><a href="#">Another Solar Product</a></li>
</ul>    
</li>
</ul><!--Left Nav-->

but instead it is outputting this:

<li><a href="/index.php?id=58" title="Solar Home & Office" >Solar Home & Office</a><li>
<ul class="Lnav">
<li><a href="/index.php?id=66" title="All Solar Products" >All Solar Products</a></li>
<li class="last"><a href="/index.php?id=70" title="Inverters" >Inverters</a></li>
</ul> 
</li>
</li>

Precision Web Development ... SmashStack.com

4,205 Posts

dev_cw Reply #2, 18 years, 3 months ago

The problem is that the original menu repeats the entire block for each menu rather than treating it as a single unit (I hope this makes sense).

<ul class="Lnav">
    	<li><a href="#">First menu...</a></li>
		...  
        </li>
    </ul><!--Left Nav-->

<ul class="Lnav">
    	<li><a href="#">Second menu</a></li>
		...  
        </li>
    </ul><!--Left Nav-->

But wayfinder wants to treat it as a single unit with a single outer.

The way to do this is to use the rowTpl to output the wrapper for each menu.

rowTpl:

<ul class="Lnav">
    	<li><a href="#">Solar Home & Office</a></li>
	[+wf.wrapper+]  
        </li>
    </ul><!--Left Nav-->

you will also need to add an innerRowTpl otherwise it will want to use the same as the rowTpl.

innerRowTpl:

<li><a href="#">All Solar Products</a> [+wf.wrapper+]</li>

Now we need to remove the outerTpl or actually make it blank, since we are wrapping each rowTpl individually there is no need for an outerTpl. So we need to make it blank,

I think that should do it, the inner looks like it should remain the same as you have. Give this a try and see if it helps.

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

☆ A M B ☆
476 Posts

flinx777 Reply #3, 18 years, 3 months ago

Hey dev_cw,

Thanks so much for replying to my post...sorry for the delayed response on my end...been out of the office this week.

So I implemented your suggested changes, and it still doesn’t produce what I’m looking for. If you look at http://gpc.my619.com/, it now is outputting a bit differently from my target goal found here: http://gpc.my619.com/t_left_hand_nav.html

So here’s what I have now using your suggested changes (I think I did exactly what you suggested):

[!Wayfinder? &startId=`57` &outerTpl=`gpc.OuterTpl` &rowTpl=`gpc.rowTpl` &innerRowTpl=`gpc.innerRowTpl` &level=`2` !]

gpc.OuterTpl is now blank (the chunk that is)

gpc.innerRowTpl has the following:

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

gpc.rowTpl has the following:

<ul class="Lnav">
    	<li><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a></li>
	[+wf.wrapper+]  
        </li>
</ul><!--Left Nav-->

Did I not follow your directions correctly?

Precision Web Development ... SmashStack.com

☆ A M B ☆
476 Posts

flinx777 Reply #4, 18 years, 3 months ago

Oh, I found the mistake.

For gpc.rowTpl, it should be:

<ul class="Lnav">
    	<li><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a></li>
<li>
[+wf.wrapper+]         
</li>
</ul><!--Left Nav-->

We were just missing a "<li>" before the [+wf.wrapper+] ... once I put that in, it fixed it. Thanks again for your help with this!

But now I’ve found another thing that Wayfinder is putting in unexpectedly. At the beginning of the list, it’s adding an additional "<ul>" and adding a "</ul>" at the end that I didn’t specify thus causing the navigation to not validate...do you know where that is coming from?

The results are show here:

http://gpc.my619.com

And the validation results are show here:

http://validator.w3.org/check?uri=http%3A%2F%2Fgpc.my619.com&charset=%28detect+automatically%29&doctype=Inline&group=0

Precision Web Development ... SmashStack.com

4,205 Posts

dev_cw Reply #5, 18 years, 3 months ago

I think that the extra may be coming form the outerTpl. The outer should simply contain the [+wf.wrapper+] placeholder (I think, it is late in the day and my brain is a jumbled mess).

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

☆ A M B ☆
476 Posts

flinx777 Reply #6, 18 years, 3 months ago

Hey dev_cw,

Thanks again for the response.

I thought that would fix it too, but if you look at the output, you’ll see that it causes a different result:

http://gpc.my619.com

Outputs a bit different from my what I’m trying to get it to do.

Thanks again for helping me with this...I understand being wiped out

Precision Web Development ... SmashStack.com

4,205 Posts

dev_cw Reply #7, 18 years, 3 months ago

That doesn’t look right shocked

Now the problem seems to be the innerTpl, since when we cleared the outer it effected the inner (which is the default process, if no innerTpl is set it will use the outerTpl).

mh.InnerTpl

<ul class="Lnav">
[+wf.wrapper+]
</ul>

Note: I removed the <li></li> since they were added to the rowTpl.

Recapping: we need to use the outerTpl, innerTpl, rowTpl and innerRowTpl.

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

☆ A M B ☆
476 Posts

flinx777 Reply #8, 18 years, 3 months ago

Hey dev_cw,

Perfect! That fixed the nav issue and it is now validating...hooray! Thanks so much, I really appreciate it a lot. That did the trick! I’ve been stuck on that for awhile and got so frustrated by that...

Thanks!

Precision Web Development ... SmashStack.com

4,205 Posts

dev_cw Reply #9, 18 years, 3 months ago

Great. Looks good. Glad to help. Actually I have come to enjoy messing with Wayfinder menus, building them is like a jigsaw puzzle and it only works when all the pieces are in the right place. It can be very frustrating as well, but once you get it it can be so satisfying (I need a life!). grin

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

☆ A M B ☆
476 Posts

flinx777 Reply #10, 18 years, 3 months ago

Hehe...for whatever reason, list based navigations give me problems. I feel like I have a pretty decent handle on CSS, but when I get into more than just plain simple navigations, I always have issues...not sure why.

Thanks again!

Precision Web Development ... SmashStack.com