Can't get Wayfinder quite right! Inners, Outers, OuterRows, InnerRows TplRows etc...

197 Posts

jonahnaylor Reply #1, 11 years, 8 months ago

Hi I've tried all sorts of combinations of Wayfinder calls and chunks with inners, outers and all the other bits and bobs. Can anyone please help me to recreate this output:

<ul class="nav">
              <li><a href="index.html">Home</a></li>                  
              <li class="dropdown"><a href="room.html">Reservation</a>
                <ul class="dropdown2">
                  <li><a href="room.html">Room 1</a></li>
                  <li><a href="room.html">Room 2</a></li>
                  <li><a href="room.html">Single Room</a></li>
                  <li><a href="room.html">Double Room</a></li>
                  <li><a href="room.html">Room 3</a></li>
                </ul>
              </li>             
              <li class="dropdown"><a href="about.html">About</a></li>
           </li>           
           <li class="dropdown"><a href="blog.html">Blog</a>
           	  <ul>
	           	  <li><a href="blog.html">Blog 1</a></li>
	              <li><a href="blog.html">Blog 2</a></li>
	          </ul>
            </li>        
            <li><a href="contact.html">Contact</a></li>
            <div class="clearfix"></div>
          </ul>

Thanks very much if this is possible.

Yorkshire UK based hosting provider: https://www.simulant.uk

☆ A M B ☆
222 Posts

Jason Sonderman Reply #2, 11 years, 8 months ago

Outertpl (wraps the whole wayfinder call):

<ul class="nav">
              [[+wf.wrapper]]
            <div class="clearfix"></div>
          </ul>

rowTpl (tpl for each item in the set):

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

parentRowTpl (tpl for item in the list IF it has children. if not, will use rowTpl):

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

innerTpl (The subitems below a list item. If this isn't defined, it will use OuterTpl):

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

If you need to make the parentRowTpl and innerTpl classes unique, you need to look into innerClass and parentClass settings on the wayfinder call (or append the class="dropdown[[+wf.id]]" which will make the class be dropdown plus the doc id).

☆ A M B ☆
24,524 Posts

sottwell Reply #3, 11 years, 8 months ago

Recommend the "Almost Complete Guide" here http://sottwell.com/links/wayfinder.html

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

1,613 Posts

fourroses666 Reply #4, 11 years, 7 months ago

Looks like Jason's code looks good.
If you need this for Evolution you can use this (needs some minor adjustments when looking at your wanted output classes)

[[Wayfinder? 
&startId=`0` 
&level=`2` 
&outerTpl=`NavbarOuter` 
&rowTpl=`NavbarRow` 
&activeParentRowTpl=`NavbarActiveParentRow` 
&parentRowTpl=`NavbarParentRow` 
&innerTpl=`NavbarInner` 
&innerRowTpl=`NavbarInnerRow` 
&removeNewLines=`1`
]]

NavbarActiveParentRow

<li class="dropdown active"><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="[+wf.title+]">[+wf.linktext+] <b class="caret"></b></a>[+wf.wrapper+]</li>

NavbarInner

<ul class="dropdown-menu">[+wf.wrapper+]</ul>

NavbarInnerRow

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

NavbarOuter

<ul class="nav navbar-nav">[+wf.wrapper+]</ul>

NavbarParentRow

<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="[+wf.title+]">[+wf.linktext+] <b class="caret"></b></a>[+wf.wrapper+]</li>

NavbarRow

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

Evolution user, I like the back-end speed and simplicity

953 Posts

iusemodx Reply #5, 11 years, 7 months ago

@jonahnaylor

You may want to take a look at this post

Download the latest Evo release
Report an issue about Evo
Read the Evo documentation

197 Posts

jonahnaylor Reply #6, 11 years, 7 months ago

Hi thanks I've ended up using a combinatin of the two - with the evo extras added in for good measure but with Revo calls...

The menu works much better now but is still giving me a problem.

There is a little graphic to show when a menu is a dropdown menu or not.

But for some reason it is on some menus and not others and some menus it is on aren't dropdowns at all...

Have a look here: http://farthingsyork.co.uk/newsite/

any ideas of a fix or what is going wrong with the css on this one?

Thanks again for any help.

Yorkshire UK based hosting provider: https://www.simulant.uk

☆ A M B ☆
24,524 Posts

sottwell Reply #7, 11 years, 7 months ago

You might want to see about getting the page to validate first. http://validator.w3.org/check?uri=http%3A%2F%2Ffarthingsyork.co.uk%2Fnewsite%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

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

197 Posts

jonahnaylor Reply #8, 11 years, 7 months ago

Hi thanks I will look at getting this to validate properly as I do more work on the new site. I don't think the above query though is a validation issue, but I may be wrong. Any help with the menu issue would be really appreciated. Thanks again.

Yorkshire UK based hosting provider: https://www.simulant.uk

1,613 Posts

fourroses666 Reply #9, 11 years, 7 months ago

Your css isn't correct.

I think you need to change the below css:
.nav > li a{background-image:none;}

and add:
.nav > li.dropdown a{background:url("../images/menu-arrow.png") no-repeat scroll 51% 66% rgba(0, 0, 0, 0)}

the arrow doesn't need to be on every .nav > li a but only one with class dropdown.

Evolution user, I like the back-end speed and simplicity

197 Posts

jonahnaylor Reply #10, 11 years, 7 months ago

Fantastic, that has done the trick nicely and it is now fixed up!

Thanks again.

Yorkshire UK based hosting provider: https://www.simulant.uk