Wayfinder - How to turn this menu into a Wayfinder menu?

342 Posts

Willi Waizenegger Reply #1, 11 years, 6 months ago

I would think this would have been easy but I just cannot figure this out. At this point, I'm going to reign in my male ego and just ask for help.

I have downloaded an HTML5 template from Themeforest and I'm trying to convert it to a MODx site. The template in question seems to be a really good one (so far...and not that I'm trying to promote it or anything), called Porto-Responsive HTML5 Template, it's a Bootstrap-based design and can be looked at here:

http://themeforest.net/item/porto-responsive-html5-template/4106987

The template provides many variations of different menus but I'm really only interested in a simple dropdown menu...nothing too exotic, just a basic vertical dropdown. A sample of the hardcoded menu that I'm interested in would look like this (I've edited it down to its simplest form for you to see):

<nav class="nav-main mega-menu">
   <ul class="nav nav-pills nav-main" id="mainMenu">
      <li class="dropdown">
         <a class="dropdown-toggle" href="#">Page Name <i class="fa fa-angle-down"></i></a>
            <ul class="dropdown-menu">
               <li><a href="#">Subpage 1</a></li>
               <li><a href="#">Subpage 2</a></li>
               <li><a href="#">Subpage 3</a></li>
            </ul>
      </li>
   </ul>
</nav>

Can anyone please provide all the Wayfinder code I would need to make the above work? All the main and tpl codes, please? Finally, please notice the little down-arrow code hard-coded above:

<i class="fa fa-angle-down"></i>

...that should only appear automatically when a menu item has dropdown items below it.

Thank you in advance.

Running Revo 2.3.3-pl (traditional)
PHP version 5.4.38

This question has been answered by sottwell. See the first response.

discuss.answer

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 11 years, 6 months ago

Your outerTpl will look like this:

<ul class="nav nav-pills nav-main" id="mainMenu">[[+wf.wrapper]]</ul>

Your parentRowTpl will look like this:

<li class="dropdown">
         <a class="dropdown-toggle" href="[[+wf.link]]">[[+wf.linktext]] <i class="fa fa-angle-down"></i></a>
      [[+wf.wrapper]]</li>

Your innerTpl

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

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

342 Posts

Willi Waizenegger Reply #3, 11 years, 6 months ago

Wow, Susan, that was it!! You have no idea how much time I spent on this and I wasn't even close. Wayfinder keeps stumping me. I'll use your above answer to analyze why it works.

If you weren't on the other side of the planet I would hug you. Thank you, thank you, thank you!!

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 11 years, 6 months ago

Some docs that may be helpful. 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

342 Posts

Willi Waizenegger Reply #5, 11 years, 6 months ago

Quote from: sottwell at Mar 28, 2015, 01:45 PM

Some docs that may be helpful. http://sottwell.com/links/wayfinder.html

Thanks. I was there sometime today as part of my research. I've downloaded the (almost) manual years ago. I still have questions that it doesn't seem to answer for me. Hopefully I'll get it in time. In the meantime, I'm grateful for you saving my bottom above.

25 Posts

flipflop1974 Reply #6, 10 years, 10 months ago

Hello,

first of all, sorry for bad english ;-)

I'm struggling with the mentoined Template "Porto" and it's navigation building. Some things have been changed to the html navigation menu and I'm not able to get Wayfinder build a navigation that meets the requirements of porto. But I know that everything should be possible with MODx

Here's how it should look like accoording to the templates source code:

		<ul class="nav nav-pills" id="mainNav">
			<li class="dropdown">
				<a class="dropdown-toggle" href="home.html">Home </a>
				<ul class="dropdown-menu">
					<li class="dropdown-submenu">
						<a href="subsite.html">Subsite</a>
						<ul class="dropdown-menu">
							<li><a href="Sub-Subsite1.html">Sub-Subsite 1</a></li>
							<li><a href="Sub-Subsite2.html">Sub-Subsite 2</a></li>
						</ul>
					</li>
				</ul>
			</li>
      </ul>

I spent many hours of trying but get stuck everytime at the level of the Sub-Subsite's...:-(

The original Page and Code of Porto can be found here: http://preview.oklerthemes.com/porto/4.4.0/

Any kind of help is highly appreciated! Currently I'm frustrated and some kind of upset ;-)

Many thanks in advance!
Greetings from Austria! Mike

MODx: MODX Revolution 2.4.2-pl
Wayfinder: wayfinder-2.3.3-pl

25 Posts

flipflop1974 Reply #7, 10 years, 10 months ago

Hi, again!

Solved my Problem with a nested wayfinder call. For those who are interested, that's the way I used to get it working:

The first call in my template:

[[Wayfinder?
   &startId=`0`
   &sortBy=`menuindex`
   &outerTpl=`outerTpl`
   &rowTpl=`rowTpl`
   &parentRowTpl=`parentRowTpl`
   &innerTpl=`empty`
   &innerRowTpl=`empty`
   &level=`2`
   ]]

The second call in the Chunk parentRowTpl:

<li class="dropdown">
<a class="dropdown-toggle" href="[[+wf.link]]">[[+wf.linktext]] </a>
<ul class="dropdown-menu">
[[Wayfinder?
   &startId=`[[+wf.docid]]`
   &sortBy=`menuindex`
   &outerTpl=`outerTpl2`
   &rowTpl=`rowTpl2`
   &parentRowTpl=`parentRowTpl2`
   &innerTpl=`innerTpl2`
   &innerRowTpl=`innerRowTpl2`
   ]]
</ul>
</li>

Greetings from Austria! Mike

342 Posts

Willi Waizenegger Reply #8, 10 years, 10 months ago

As a strange coincidence, I came here to expand on my original question above since I'm looking to use this Porto theme but utilize a third level menu (which Susan's answer above didn't touch on...her's only worked for two levels), and see that only three days ago as of this writing Mike ( @flipflop1974 ) had the same question.

The issue, as I see it is that the first list item looks like this (notice the class): <li class="dropdown">

The second list item looks like this (notice the class): <li class="dropdown-submenu">

The third list item doesn't have a class associated with it: <li>

I'm hoping flipflop1974's solution addresses this. Mike, can you elaborate more as to what the contents of your tpl chunks are? In other words, what did you put inside the following chunks (tpl's):

outerTpl2
rowTpl2
parentRowTpl2
innerRowTpl2

Thank you in advance.

342 Posts

Willi Waizenegger Reply #9, 10 years, 9 months ago

I'm sorry to bump this one up but it is driving me crazy. Can someone please help share the code that would need to go in each tpl (using Wayfinder), as well as the Wayfinder call needed for this?

The problem is that I need a third level menu item. That third level <li>, unlike the ones above it, does not have a class name attached to it (notice flipflop1974's reply #6 above which shows how the output looks). Sue's code above works only for two levels.

Thank you in advance.

342 Posts

Willi Waizenegger Reply #10, 10 years, 9 months ago

Is Wayfinder the only menu system for MODx Revolution?

Answered Wayfinder - How to turn this menu into a Wayfinder menu?