Wayfinder (cannot get to work)

6 Posts

manny wolf Reply #1, 14 years, 6 months ago

Hi everyone,

I'm a newbie to the whole MODX Revo thing. I think I understand the basics, I even bought Bob Ray's The Official Guide, but I'm having a problem with Wayfinder. I hope someone can point me in the right direction, because I'm beginning to think I'm an absolute (arty) idiot.

I have managed to get the default wayfinder menu on my locally hosted site and have created a chunk for the nav menu, which shows the default Wayfinder ul of my pages. The call being Wayfinder? &startId=`0`, but when I add the extra code: Wayfinder? &startId=`0` &outerTpl=`WayfinderOuter` the ul list disappears from my site. (I've omitted the square brackets as this site doesn't seem to show them)

I have set the outerTpl chunk up as stated in the official guide.

Also with adding the extra code, it messes up the divs so that the following divs become sub-divs of the "nav" div, where as before the code is added they aren't sub-divs.

Can anyone please help?

Thank you in advance if you can. Manny.

[ed. note: manny wolf last edited this post 14 years, 6 months ago.]

387 Posts

whistlemaker Reply #2, 14 years, 6 months ago

You can use the insert code button to display code (its the button with '< >'

Have you created the template 'WayfinderOuter' ?
- it sounds as if if you have, so the question becomes what is it (paste it inside code tags)

6 Posts

manny wolf Reply #3, 14 years, 6 months ago

Thanks for the tip about entering code Whistlemaker.

To explain further, I have created the 5 chunks as written in the Official Guide

The OuterTpl which I called WayfinderOuter has the following code

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

which seems to be the same as written in the Wayfinder ebook by Kongondo. I've also created the innerTpl, parentRowTpl, rowTpl, CssTpl.

In my main navigation div I have the following

   <!-- This is 'Header' -->

	<div id="header">

		<!-- This is 'rss_link' -->
       <div id="rss" class="rss link">
		<a href=""><img src="assets/components/images/rss link.png" width="19" height="19" alt="rss" class="pngimg" /></a>   </div>

		<!-- This is 'facebook_link' -->
       <div id="fb" class="facebook link"  >
		<a href=""><img src="assets/components/images/fb link.png" width="23" height="23" alt="facebook" class="pngimg" /></a></div>	

	<!-- This is 'Titlebig_link' -->
       <div id="titlebig" class="Titlebig link"  >
		<a href="http://localhost/manny/index.php?id=3"><img src="assets/components/images/site title large.png" width="334" height="166" alt="Titlebig" class="pngimg" border="0" /></a></div>

       <div id="sitedeionbig" class="sitedeion">
		<img src="assets/components/images/My pic2.png" width="250" height="258" alt="my pic" class="pngimg" border="0" /></div>

		<div id="navigation" class="navigation"><img src="assets/components/images/navigation.png" width="1100" height="55" alt="sidebar" class="pngimg" />

[[$nav]]

                      
                        <div id="search">[[!AdvSearchForm? &landing=`10`]]</div>

		</div><!--Closes off navigation block-->
	</div><!-- closer below closes off header -->

Then the Nav chunk has:

<div id="nav" class="nav">[[Wayfinder? &startId=`0`]]</div>

So, when I add the &outerTpl=`WayfinderOuter` &innerTpl=`WayfinderInner` ... etc to the Wayfinder call, the CSS styling totally messes up, and the main div and footer div become sub-divs of the nav div (as I described earlier).

After inspecting with Firebug, Wayfinder does seem to be creating a div, but it has zero height.
If I remove the &outerTpl, &innerTpl from the Wayfinder call, the CSS styling returns to the original correct positions and I get the default Wayfinder ul list. The sub-pages are showing as being processed by the Wayfinder dropdown.css, but not the main page names.

(Am I using xampp 1.7.3 as the later versions of xampp wouldn't work with Revo - don't know if this is worth mentioning?)

Am I doing something obvious, that is wrong? [ed. note: manny wolf last edited this post 14 years, 6 months ago.]

1,098 Posts

microcipcip Reply #4, 14 years, 6 months ago

There are unclosed tags and links within links, can you show me all your Wayfinder template chunks code?

Jertix.org -> Web Design & Development, Motion Graphics | Follow me on Twitter | MODx Tutorials (in Italiano) | MODx Snippets (English)

6 Posts

manny wolf Reply #5, 14 years, 6 months ago

Hi microcipcip,

Thanks for your reply. I'll have a look at the unclosed tags and links within links issue. Could you give me a quick example? Could this be a reason it doesn't work?

The 5 chunks are:

OuterTpl=`WayfinderOuter`

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

innerTpl=`WayfinderInner`

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

RowTpl=`WayfinderRow`

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

parentRowTpl=`WayfinderParentRow`

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

CssTpl=`WayfinderCss`

<link rel="stylesheet" media="all" type="text/css" href="core/components/wayfinder/examples/cssplay/dropdown.css" />

I really appreciate your help. Thanks Manny.

1,098 Posts

microcipcip Reply #6, 14 years, 6 months ago

Your code seems perfectly fine, I can't understand why it doesn't output the <ul>. Where did you put the Wayfinder call? In a template, a chunk, inside another snippet? What is the exact output of Wayfinder?

Jertix.org -> Web Design & Development, Motion Graphics | Follow me on Twitter | MODx Tutorials (in Italiano) | MODx Snippets (English)

6 Posts

manny wolf Reply #7, 14 years, 6 months ago

I put the Wayfinder call in the chunk I called "nav".

I have removed and re-installed Wayfinder, removed the chunks and re-created them and now I get the default ul list Wayfinder output (not the css dropdown style) with the following code:

                 <div id="menu"[[Wayfinder? &startId=`3` 
						                   &outerTpl=`WayfinderOuter`
                                                                   &innerTpl=`WayfinderInner`
                                                                  &parentRowTpl=`WayfinderParentRow`
                                                                  &rowTpl=`WayfinderRow`
                                                                  &cssTpl=`WayfinderCss`
                                                                  &outerClass=`menu`
                                                                  &parentClass=`hide`]]
		                                                  </div>

I'm not sure if the css file is being picked up, or if my main stylesheet is causing a problem. But, can't find a way to test this. Do I need to create new properties for Wayfinder or are the defaults OK?

[ed. note: manny wolf last edited this post 14 years, 6 months ago.]

387 Posts

whistlemaker Reply #8, 14 years, 6 months ago

Which version of Revo? the latest?
And other environment stuff (php, mysql etc)?

Your code looks OK to me

1,098 Posts

microcipcip Reply #9, 14 years, 6 months ago

I think your code is fine, I can't spot any mistake. The css file as far as I know is completely indipendent from Wayfinder, so if the menu list is being generated correctly but you still don't see the menu as it should be, you may have to work on your css file.

Jertix.org -> Web Design & Development, Motion Graphics | Follow me on Twitter | MODx Tutorials (in Italiano) | MODx Snippets (English)

793 Posts

ottogal Reply #10, 14 years, 6 months ago

<div id="menu"[[Wayfinder? &startId=`3`
                          &outerTpl=`WayfinderOuter`
                                                  &innerTpl=`WayfinderInner`
                                                 &parentRowTpl=`WayfinderParentRow`
                                                 &rowTpl=`WayfinderRow`
                                                 &cssTpl=`WayfinderCss`
                                                 &outerClass=`menu`
                                                 &parentClass=`hide`]]
                                         </div>

Here the closing bracket of the <div> tag is missing.

In your outerTpl, shouldn't it be

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

instead of

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

?
But, of course, without knowing better your CSS it's hard to say...