Wayfinder unique id with innerTPL

6 Posts

ringmaster Reply #1, 13 years, 11 months ago

Hello all,

I am building out a new site and working with NLSMenu JS library to build it an make it look prettier than I can do..

The trick for me here is that it requires all levels ul/li to have unique id's. This is where I have become lost.

Specifically, I am really struggling with trying to get a unique value at the ul innerTPL level. the innerClass="level" works great and is exactly what I need but again at the ul innerTPL spot. I have spent days searching for the solution and finally, just figured either I am really loosing it and looked right at the answer and dont get it, or its simply WAY over my head to grasp, so heck ask the experts here..

Here are specifics on my setup;

MODX Revolution 2.2.4-pl (traditional)
Wayfinder 2.3.3

Wayfinder call

[[!Wayfinder? &startId=`0` &outerTpl=`menuOuter` &rowTpl=`menuRow` &innerTpl=`menuInner` &innerRowTpl=`menuInnerRow` &hereClass=`current_page_item` &firstClass=`` &lastClass =`` &levelClass=`level` &innerClass=`submenu` &rowIdPrefix=`m` ]]

TPLs Being used are noted above, if you need to me insert them, I certainly can however they are very basic and working great with the exception of this unique item..

Thank you so much for any direction you can provide..

-Roland

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 13 years, 11 months ago

&rowIdPrefix default: FALSE
values: name of prefix
description: If this parameter is set, Wayfinder will replace the placeholder [+wf.id+] with a unique id consisting of the specified prefix plus the document id.
example: &rowIdPrefix=`topMenu` will output the following for doc # 29: id="topMenu29"

You will need to have custom rowTpl and innerRowTpl chunks with the [[+wf.id]] placeholder added. Just copy the default tpls and add the placeholder where you need it, in the li tags or the a tags.

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

6 Posts

ringmaster Reply #3, 13 years, 11 months ago

Thanks for the response however, I saw this and thought it only worked at the li level and I must have it at the ul subs.. I could be totally lost as I mentioned though so here is what I have for my current TPLs..

menuOuter <-- works fine

<ul id="main">[[+wf.wrapper]]</ul>

menuRow <-- works fine

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

menuInner <-- this is where I need the id="classnamesUNIQUE"

<ul id="[[+wf.classnames]]">[[+wf.wrapper]]</ul>

menuInnerRow <-- works fine with level class used

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

Again here is my wayfinder call

[[!Wayfinder? &startId=`0` &outerTpl=`menuOuter` &rowTpl=`menuRow` &innerTpl=`menuInner` &innerRowTpl=`menuInnerRow` &hereClass=`current_page_item` &firstClass=`` &lastClass =`` &levelClass=`level` &innerClass=`submenu` &rowIdPrefix=`m` ]]

Thanks again for the response and I hope this helps if I was unclear..

-Roland

6 Posts

ringmaster Reply #4, 13 years, 11 months ago

I NOTICED THIS WAS TRIMMED

menuInner <-- this is where I need the id=UNIQUEID with classname

☆ A M B ☆
24,524 Posts

sottwell Reply #5, 13 years, 11 months ago

Would the &levelClass help?

default: NULL
values: name of class
description: The levelClass will be applied to each item denoting each items level, the level number will be added to the specified class (i.e. level1, level2, level3, etc...)

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

6 Posts

ringmaster Reply #6, 13 years, 11 months ago

The &levelClass=`level` works great for the li elements but I need it to be applied on the submenu ul elements and thats where the &innerClass=` ` works, but again it only adds whatever I put it unlike the levelClass thats counts up..

So for example here is what I have..

<div id="menu_container" style='display:none'>
<div class="nav_block">

<ul id="main">
<li  class="level1"><a href="#" title="" ><span>Home</span></a></li>
<li  class="level1"><a href="#" title="" ><span>About</span></a>
     <ul id=" "> <--- THIS IS WHERE innerClass works but I must have unique anything here..??
          <li class="level2"><a href="#" title="" ><span>Overview</span></a></li>
     </ul>
</li>

hope that helps.. I simply cannot imagine this is not doable so until I hear otherwise, I am going to blame my total numbness to it..

thanks again..

☆ A M B ☆
24,524 Posts

sottwell Reply #7, 13 years, 11 months ago

I am not aware of such an ability.

You could fake it, however, by setting the &rowIdPrefix to something like 'column', and in your CSS using something like

#column1 ul{background:green;}
#column2 ul{background:yellow;}
#column3 ul{background:red}

where the columnxx numbers would be those of your top-level row items. You could use an innerRowTpl that doesn't include the wf.id placeholder so they would only appear in the top-level items if you want to avoid cluttering up the rest of the menu items with unneeded id attributes.

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

58 Posts

craigphiz Reply #8, 13 years ago

@ringmaster

Hi Roland, Did you find a solution to this? I'm facing the same issue. See my post here:

http://stackoverflow.com/questions/18580518/modx-revo-wayfinder-3rd-level-ul-different-to-2nd-level-ul

Any help greatly appreciated!

Craig

☆ A M B ☆
24,524 Posts

sottwell Reply #9, 13 years ago

I would simply use CSS:

ul {top level css...}
ul ul {second level css ...}
ul ul ul {third level css...}

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

6 Posts

ringmaster Reply #10, 13 years ago

Hey Craig, I am sorry to report that I did not. I ended up just dropping the nls as an option. The suggestion from sottwell may work just fine though.. Sorry I do not have the solution, best of luck in your chase for it though... -Roland

Quote from: craigphiz at Sep 04, 2013, 06:18 AM

@ringmaster

Hi Roland, Did you find a solution to this? I'm facing the same issue. See my post here:

http://stackoverflow.com/questions/18580518/modx-revo-wayfinder-3rd-level-ul-different-to-2nd-level-ul

Any help greatly appreciated!

Craig