Custom Wayfinder call, how to setup?

1,613 Posts

fourroses666 Reply #1, 10 years, 8 months ago

So how would the Wayfinder call looks like, or more important the rowTpl / inner / outer etc.?

There needs to be a small hack too I think because of the <li class="dropdown"> and the <a href="#" class="dropdown-toggle" data-toggle="dropdown"> for the ones with dropdown.

This is what I need to get:

<ul class="nav">
    <li><a href="#">Home</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop meh</a>
      <ul class="dropdown-menu">
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
      </ul>
    </li>
</ul>

[ed. note: fourroses666 last edited this post 10 years, 8 months ago.]

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

1,613 Posts

fourroses666 Reply #2, 10 years, 8 months ago

** this one didn't work out that great ** [ed. note: fourroses666 last edited this post 10 years, 8 months ago.]

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

1,613 Posts

fourroses666 Reply #3, 10 years, 8 months ago

Ok, looks much better now, everything is right except for the menu links with no submenu:

Needs to be:

<li><a href="#">Home</a></li>

But this is the output:

<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Home</a></li>

Wayfinder call:

[[Wayfinder?
&startId=`0`
&level=`2`
&outerTpl=`menuOuter`
&rowTpl=`menuRow`
&innerTpl=`menuInner`
&innerRowTpl=`menuInnerRow`
&outerClass=`nav`
]]

menuInner:

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

menuInnerRow:

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

menuOuter:

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

menuRow:

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

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

953 Posts

iusemodx Reply #4, 10 years, 8 months ago

I haven't thoroughly tested this but one of my menus is similar to what you need - I have slightly modified it for your stuff:

WF Call:

[[Wayfinder? 
&startId=`0`  
&hideSubMenus=`0` 
&outerTpl=`wf.outerTpl` 
&innerTpl=`wf.innerTpl` 
&rowTpl=`wf.rowTpl` 
&parentRowTpl=`wf.parentRowTpl` 
&parentClass=`dropdown` 
&firstClass=`` 
&lastClass=`last-child`
]]

wf.outerTpl

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

wf.innerTpl

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

wf.parentRowTpl

<li[+wf.id+][+wf.classes+]><a class="dropdown-toggle" data-toggle="dropdown" href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>

wf.rowTpl

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

Result

<ul class="nav">
  <li class="dropdown active"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Link</a>
    <ul class="dropdown-menu">
      <li><a href="#">Link</a></li>
      <li class="last-child"><a href="#">Link</a></li>
    </ul>
  </li>
  <li><a href="#">Link</a></li>
  <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Link</a>
    <ul class="dropdown-menu">
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Link</a>
        <ul class="dropdown-menu">
          <li><a href="#">Link</a></li>
        </ul>
      </li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Link</a>
        <ul class="dropdown-menu">
          <li><a href="#">Link</a></li>
          <li class="last-child"><a href="#">Link</a></li>
        </ul>
      </li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Link</a>
        <ul class="dropdown-menu">
          <li><a href="#">Link</a></li>
        </ul>
      </li>
      <li><a href="#">Link</a></li>
      <li class="last-child"><a href="#">Link</a></li>
    </ul>
  </li>
  <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Link</a>
    <ul class="dropdown-menu">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li class="last-child"><a href="#">Link</a></li>
    </ul>
  </li>
  <li class="last-child"><a href="#">Link</a></li>
</ul>

Cheers

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

1,613 Posts

fourroses666 Reply #5, 10 years, 8 months ago

Hey thanx man!!

The parentRow did the trick!

I only had to change the innerTpl to get my submenu working, it needed the dropdown-menu class:
<ul class="dropdown-menu">[+wf.wrapper+]</ul>

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

953 Posts

iusemodx Reply #6, 10 years, 8 months ago

Quote from: fourroses666 at Aug 14, 2013, 09:20 AM

The parentRow did the trick!

Glad it worked

Cheers

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