WayFinder > 3 Level deep Accordion problems - Please help!

10 Posts

MODxcellent Reply #1, 17 years, 6 months ago

Hi all,

I’m having some problems trying to setup WayFinder on my site for the following menu setup.

I have created a similar menu using WayFinder already (thanks to some online tutorials) but they were 2 levels deep. This one however is 3 levels deep and I can’t work out what parameters to use for each section.

Are there any people able to help point me in the right direction as I’ve exhausted all my ideas to get this working?

Here is the code:

<div class="arrowlistmenu">

    <h3 class="menuheader expandable"><a href="#">Main Link 1</a></h3>
    	<ul class="categoryitems">
        <li class="active"><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
        <li><a href="#">Link 6</a></li>
        <li><a href="#">Link 7</a></li>
        <li><a href="#">Link 8</a></li>
    	</ul>
    
    <h3 class="menuheader expandable"><a href="#">Main Link 2</a></h3>
    	<ul class="categoryitems">
        <li><a href="#">Link 1</a></li>
        <li><a href="#" class="subexpandable">Link 2</a>
            <ul class="subcategoryitems">
            <li><a href="#">Sub Link 1</a></li>
            <li><a href="#">Sub Link 2</a></li>
            <li><a href="#">Sub Link 3</a></li>
            <li><a href="#">Sub Link 4</a></li>
            <li><a href="#">Sub Link 5</a></li>
            </ul>
    	</li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
        <li><a href="#">Link 6</a></li>
        </ul>
    
</div><!-- /.arrowlistmenu -->

10 Posts

MODxcellent Reply #2, 17 years, 6 months ago

This is the code I have so far. Problem is it works to a point, but I have no more parameters left to use for the "subcategoryitems" which I can’t get to display correctly/at all:

Snippet Call:

[!Wayfinder? &startId=`9` &level=`3` &outerTpl=`NwfOuter` &parentRowTpl=`NwfParentRow` &activeParentRowTpl=`NwfActiveParentRow` &innerTpl=`NwfInner` &rowTpl=`NwfRow` &innerRowTpl=`NwfInnerRow` &jsTpl=`NwfJs` &hereTpl=`NwfHere` !]

Chunks:

NwfOuter- Outer section for the accordion nav

<div class="arrowlistmenu">
	[+wf.wrapper+]
</div>

NwfParentRow - Parent row section for the accordion nav

<h3 class="menuheader expandable"><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a></h3>
[+wf.wrapper+]

NwfActiveParentRow - Active parent row section for the accordion nav

<h3 class="menuheader expandable" id="active"><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a></h3>
[+wf.wrapper+]

NwfInner - Inner section for the accordion nav

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

NwfRow - Row section for the accordion nav

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

NwfInnerRow - Inner row section for the accordion nav

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

NwfHere - Your here section for the accordion nav

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

NwfStyle - CSS for the accordion nav

<link rel="stylesheet" type="text/css" media="all" href="/assets/css/style.css" />

NwfJs - JavaScript for the accordion nav

<script type="text/javascript" src="/assets/js/nav.js"></script>

I have removed some JS and changed some names to keep the code simple here but other that that this is exactly what I have setup so far.

Can anybody help me? Can you see what I am doing wrong? What should I do?

Thanks in advance

9 Posts

amwdesign Reply #3, 17 years, 6 months ago

We are also experiencing this problem sad

it would seem wayfinder can only handle active state for <li> - &activeParentRowTpl

we have tried to create active state for <ul> - &activeInnerTpl

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

we then added the following to the function renderRow

        } elseif ($resource['isfolder'] && $this->_templates['activeInnerTpl'] && $this->isHere($resource['id'])) {
           	$usedTemplate = 'activeInnerTpl';

then changed the tpl output to:

[!Wayfinder? &startId=`0` &level=`2` &outerTpl=`wfOuter` &parentRowTpl=`wfParentRow` &activeParentRowTpl=`wfActiveParentRow` &innerTpl=`wfInner` &activeInnerTpl=`wfActiveInnerRow` &rowTpl=`wfRow` &innerRowTpl=`wfInnerRow` &jsTpl=`wfJs` &hereTpl=`wfHere` !]

but nothing changed huh

not sure why this functionality is not included in wayfinder but we hope someone can help us resolve this issue A.S.A.P.

60 Posts

traveller_ted Reply #4, 17 years, 6 months ago

^ Not sure that’s true. If you’re using the MooTools accordion you need to set the <ul> to a recognised class [or classes] which the javascript recognises from the DOM. The toggle is not in itself an active link, that function is added by the javascript. The key is to ensure that the toggle content link is maintained and the <ul></ul> wraps the ’element’. I spent some time getting this functioning within Ditto calls but have only looked briefly at a Wayfinder application.

Regards

10 Posts

MODxcellent Reply #5, 17 years, 6 months ago

I am still having problems trying to get this working and I really need to find a solution. Is there anyone out there who can help? :’(

Happy to make a small donate to someone’s beer fund for the help!