[SOLVED] Wayfinder + 3 level vert menu problems

213 Posts

rav3n Reply #1, 18 years, 8 months ago

http://www.stunicholls.com/menu/tree_frog_vertical.html - this is menu i want to use (click+hover). i’ve made all necessary changes to my tpl but i can’t configure wayfinder to output the right code

here’s my snippet call:

here are the chunks i use:

&innerTpl:
<!-- tmp inner -->
<li class="fly">[+wf.linktext+]
<ul>
	[+wf.wrapper+]
</ul>
</li>
<!-- tmp inner -->

&parentRowTpl=`tmp.parent`
<li class="sub">[+wf.linktext+]»
		<ul>
		[+wf.wrapper+]
		</ul>
</li>

&outerTpl:
<!-- tmp outer -->
<ul id="menu"[+wf.classes+]>
	[+wf.wrapper+]
</ul>
<!-- tmp outer -->

&rowTpl:
<li><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a></li>

css is copied from the above link.
help me i’m stuck

4,205 Posts

dev_cw Reply #2, 18 years, 8 months ago

I don’t think that Wayfinder can do this one out of the box with the standard methods. The problem is that there are two parentRowTpl states and wayfinder only supports one, we would need an innerParentRowTpl. There might be a way to do it using a TV or a document variable (the attributes is rarely used and may be a good option) to define the class (class="fly"). Or you could use a snippet to determine if it is a parent or not.

On the documents that would have the fly class you would fill in the attributes field with class="fly". Then on your template chunks you would be:

outerTpl:

<ul id="menu">
	[+wp.wrapper+] 
</ul>

rowTpl:

<li class="sub">[+wf.linktext+]
	[+wp.wrapper+] 
</li>

innerTpl:

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

innerRowTpl:

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

-------------------
A cleaner way may be to build a simple snippet to check to see if it is a parent and then include the proper class.

Snippet isParent to check if the current document has children or not:

<?php
$id = isset( $id )? $id: $modx->documentIdentifier;
$child = $modx->getChildIds($id);

if(count($child)){
	return 'class="fly"';
}
?>

Then add the snippet call in the innerRowTpl chunk like this:

<li[!isParent!]><a href="[+wf.link+]">[+wf.linktext+]</a>
	[+wp.wrapper+] 
</li>

Note that embeded snippet calls need alternating cache settings, if the outer snippet is uncached [! !] then the inner one must be cached [[ ]] or the other way around.

This is all untested.

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

213 Posts

rav3n Reply #3, 18 years, 8 months ago

thank you for your reply, i try to do like you said this evening

4,205 Posts

dev_cw Reply #4, 18 years, 8 months ago

I would try the method with the snippet first, it is the better solution since you do not need to add any extra content to the documents.

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

213 Posts

rav3n Reply #5, 18 years, 8 months ago

oh man! thanks a lot! it started working as it should be.
i just fixed your [+wp.wrapper+] to [+wf.wrapper+]
and fixed my snippet call to:
[!Wayfinder? &startId=`78` &level=`3` &outerTpl=`tmp.outer` &innerTpl=`tmp.in` &parentTpl=`tmp.parent` &innerRowTpl=`tmp.inner` &rowTpl=`tmp.row` &rowClass=`loadinto-main`!]
but there’s little problem with isParent snippet.
first case: it writes fly class to all documents with level greater than 1 (not only parents),
second case:
it returns no output at all.
but even with broken isParent it works! thank you!

4,205 Posts

dev_cw Reply #6, 18 years, 8 months ago

Glad it is working

first case: it writes fly class to all documents with level greater than 1 (not only parents),

Humm, will need to think and do some testing here....OK I see the problem $child is an array so it does not evaluate correctly. Here is a fix where I use the count function to see if there is anything in the array (I will fix the original example as well):

<?php
$id = isset( $id )? $id: $modx->documentIdentifier;
$child = $modx->getChildIds($id);

if(count($child)){
	return 'class="fly"';
}
?>

PS: I am glad this is working that is a cool menu to have "up the sleeve".

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

213 Posts

rav3n Reply #7, 18 years, 8 months ago

still it returns ’class="fly"’ to every doc with level greater than 1, i’ve tried hasChildren (http://modxcms.com/hasChildren-1763.html) snippet but it also returns this class to all <li>

☆ A M B ☆
24,524 Posts

sottwell Reply #8, 18 years, 8 months ago

I’ve been thinking it would be awfully convenient sometimes if Wayfinder could insert a "level" class for each item based on its level, like "level1" for top-level, "level2" for second level 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

4,205 Posts

dev_cw Reply #9, 18 years, 8 months ago

rav3n: It seems to be working on my local testing server, only documents who are parents are returning the class info. You need to use the custom snippet only in the innerRowTpl not the rowTpl.

Maybe you could post the output and we can see exactly what is up grin

sottwell: There is a level class, but in this case it would not work since we don’t need a level class so much as a levelParentClass.

&levelClass
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...)

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

213 Posts

rav3n Reply #10, 18 years, 8 months ago

<ul id="menu">
	<li class="sub">×àñû
	<ul>
	<!-- tmp innerRow -->
<li class="fly"><a href="/watches1.html" class="loadinto-main" rel="ao.content">×àñû íàðó÷íûå</a>
	<ul>
	<!-- tmp innerRow -->
<li class="fly"><a href="/adriatika.html" class="loadinto-main" rel="ao.content">×àñû ADRIATIKA</a>
	 
</li>
<!-- tmp innerRow end -->
<!-- tmp innerRow -->
<li class="fly"><a href="/apella.html" class="loadinto-main" rel="ao.content">×àñû APELLA</a>
	 
</li>
<!-- tmp innerRow end -->
<!-- tmp innerRow -->
<li class="fly"><a href="/oris.html" class="loadinto-main" rel="ao.content">×àñû ORIS</a>
	 
</li>
<!-- tmp innerRow end -->

</ul> 
</li>
<!-- tmp innerRow end -->
<!-- tmp innerRow -->
<li class="fly"><a href="/clock.html" class="loadinto-main" rel="ao.content">×àñû èíòåðüåðíûå</a>
	 
</li>
<!-- tmp innerRow end -->
<!-- tmp innerRow -->
<li class="fly"><a href="/clock-acessories.html" class="loadinto-main" rel="ao.content">Àêñåññóàðû</a>
	<ul>
	<!-- tmp innerRow -->
<li class="fly"><a href="/aurora-wristlets.html" class="loadinto-main" rel="ao.content">Ðåìåøêè AURORA</a>
	 
</li>
<!-- tmp innerRow end -->
<!-- tmp innerRow -->
<li class="fly"><a href="/parker-wristlets.html" class="loadinto-main" rel="ao.content">Ðåìåøêè PARKER</a>
	 
</li>
<!-- tmp innerRow end -->

</ul> 
</li>
<!-- tmp innerRow end -->
<!-- tmp innerRow -->
<li class="fly"><a href="/meteo.html" class="loadinto-main" rel="ao.content">Ìåòåîñòàíöèè</a>
	 
</li>
<!-- tmp innerRow end -->
<!-- tmp innerRow -->
<li class="fly"><a href="/100.html" class="loadinto-main" rel="ao.content">Áóäèëüíèêè</a>
	 
</li>
<!-- tmp innerRow end -->

</ul> 
</li>

</ul>

isParent is only in innerRow tpl. Wayfinder is cached, isParent is not cached. 0.9.6 rev 2767