Struggling with Wayfinder - output incorrect

26 Posts

coldhand Reply #1, 14 years, 10 months ago

Hi all,

Could someone kindly assist with Wayfinder. Still can't fully get my head around no matter how much I try...

Okay so attached the navigation CSS.

The real problem is, the html code doesn't look correct and does not output anything.

Started off really simple and driving me crazy...

HTML code (working):

	<div id="menu" class="grid_7 omega">
		<li class="first-child active"><a href="#">Home</a></li>
		<li><a href="#">About Us</a>
			<ul>
			<li class="first-child"><a href="#">What we do?</a></li>
			<li><a href="#">Where we work?</a></li>
			<li class="last-child"><a href="#">Services</a></li>
			</ul>
		</li>
		<li><a href="#">Latest News</a></li>
		<li><a href="#">Q&A</a></li>
		<li class="last-child"><a href="#">Contacts</a></li>
	</div>

This is the code I've used.

	
<div id="menu" class="grid_7 omega">
	[[!Wayfinder? &startId=`0` ]] 
</div>

This is my output from source code. Nothing is displayed in the browser itself.

<div id="menu" class="grid_7 omega">

	<ul><li class="first"><a href="http://www.domainname.org/" title="Home" >Home</a></li>
<li><a href="index.php?id=4" title="About Us" >About Us</a><ul><li class="first"><a href="index.php?id=5" title="What we do?" >What we do?</a></li>
<li><a href="index.php?id=6" title="Where we work?" >Where we work?</a></li>
<li class="last"><a href="index.php?id=7" title="Services" >Services</a></li>

</ul></li>
<li><a href="index.php?id=14" title="Contact Us" >Contact Us</a></li>
<li class="last active"><a href="index.php?id=15" title="test" >test</a></li>
</ul> 
</div>

As you can see, the output is a mess. Can someone help me with amending the code so i can get this running correctly please?

Environment:
MODX Revolution 2.1.5-pl Standard
PHP 5.2

This question has been answered by multiple community members. See the first response.

[ed. note: coldhand last edited this post 14 years, 10 months ago.]

387 Posts

whistlemaker Reply #2, 14 years, 10 months ago

Looks like your home link is a mess.

Do you have anything in the home 'Alias' box ?

In your page template do you have in the head?

<base href="[[++site_url]]" />

24,544 Posts

BobRay Reply #3, 14 years, 10 months ago

If the browser isn't displaying that, you must have some display:none settings in your CSS. They're probably supposed to show drop-down items when you hover. I suspect that your CSS depends on you setting the correct Tpl chunks for Wayfinder to use rather than letting Wayfinder use its default Tpl chunks.

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

387 Posts

whistlemaker Reply #4, 14 years, 10 months ago

from the first li tag:

<li class="first">
<a href="<a href="http://www.fesabilillah.org/"" target="_blank" rel="nofollow">
http://www.fesabilillah.org/"
</a>
 title="Home" >Home</a>
</li>

an extra "
an extra closing anchor tag

needs fixing but I would expect it to display - never the less I would start by fixing the obvious mistakes

26 Posts

coldhand Reply #5, 14 years, 10 months ago

Thanks for the replies.

I've checked the base URL but it is set correctly. (Actually, the code had an additional space - easily overlooked!).

<base href="[[++site_url]]"/>

The code is being produced by Wayfinder itself.

Wayfinder Version: 2.3.3pl

@BobRay, i know the CSS is correct as the html version that i've manually wrote works correctly. I think i need some assistance with modifying the Tpl chunk to match the correct output...

Edit:
I just realised the code snippet on the forum modifies the output links slightly. Here is the code once again.

http://pastebin.com/y5ASCZPi

The UL and LI containers don't line up correctly, but this is what is being produced by Wayfinder. [ed. note: coldhand last edited this post 14 years, 10 months ago.]

116 Posts

Wanze Reply #6, 14 years, 10 months ago

You have two possibilities i think:
1) You can adjust the css to make it work with the default Wayfinder syntax (classes etc.)
or
2) You have to adjust the Wayfinder templates and its call a bit.

Try this:

[[Wayfinder? &startId=`0` &firstClass=`first-child` &lastClass=`last-child` &outerTpl=`myOuterTpl`]]

myOuterTpl Chunk:

[[+wf.wrapper]]

I'm not sure if it is valid to have li-tags without ul or ol tags as parents, but this chunk will delete those. In your working html-code, inside the div, there are no ul tags for the 1 level list.

24,544 Posts

BobRay Reply #7, 14 years, 10 months ago

Ah, I'm beginning to suspect that you've modified the default Wayfinder Tpl chunks -- something you should never do.

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

☆ A M B ☆
24,524 Posts

sottwell Reply #8, 14 years, 10 months ago

You should always copy the default tpl chunks, then edit the copies and tell Wayfinder to use your copies in its parameters. And don't forget to use its classname setting options. For example, you can change the classname for first, last and current items.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

26 Posts

coldhand Reply #9, 14 years, 10 months ago

Thank you Wanze, have much more to go on from here! I've done what you have said and i now can see the full css working and the entire menu working (kind of).

The remaining issue is instead of the drop-down menu, it now shows it all on one line. I've tried adding &level=`2` without any luck.

@BobRay, nothing have been changed as this was a fresh install.

116 Posts

Wanze Reply #10, 14 years, 10 months ago

coldhand,
you're welcome!
can you post once again the html Wayfinder is generating now?
Or can you provide a link to the site?

Answered Struggling with Wayfinder - output incorrect