Wayfinder startItem problems!

16 Posts

samuel02 Reply #1, 16 years, 6 months ago

Hi,

I´m making a website and use two instances of Wayfinder. My document tree looks like this:

Introduction
Information
[list]
[li]Features
Specifikations
Prices
FAQ

[/li]
[li]Contact[/li]
[li]Buy now[/li]
[/list]

In my "mainmenu" Introduction, Information, Contact and Buy now is shown.

The page Information, Features, Specifikations, Prices and FAQ all use the same template containing another WF-call that shows: Features, Specifikations, Prices and FAQ.
Basically what I want to do is to in that menu also show the parent(Information) as a <li>-item that obviously also could have class="active". Also I´d like the text of that item to be Overview. So the menu would look like this:

<ul class="menu-list2">
<li class="active">
  <a title="Overview" href="http://www.domain.com/en/information">OVERVIEW »</a>
</li>
<li>
  <a title="Features" href="http://www.domain.com/en/information/features">FEATURES »</a>
</li>
<li>
  <a title="Specifications" href="http://www.domain.com/en/information/specifications">SPECIFICATIONS »</a>
</li>
<li>
  <a title="Prices" href="http://www.domain.com/en/information/prices">PRICES »</a>
</li>
<li class="last">
  <a title="FAQ" href="http://www.domain.com/en/information/faq">FAQ »</a>
</li>
</ul>

Also as you can see I use YAMS which has a slightly effect on WF.
My current WF-call looks like this:

[[Wayfinder? &startId=`3` &displayStart=`true` &outerTpl=`menuContainer` &outerClass=`menu-list2` &rowTpl=`@FILE:assets/modules/yams/tpl/wayfinder/doc/row.tpl` &level=`2` &startItemTpl=`wfStartItem`]]

And startItemTpl (wfStartItem) looks likte this:

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

Any help is appreciated!

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 16 years, 6 months ago

You’ll need to fiddle with the various chunk tpls to get that right. Your startItem tpl will have the opening outer <ul> tag, while the outerTpl will not have an opening <ul> tag, just the [+wf.wrapper+] placeholder and the closing </ul> tag.

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

16 Posts

samuel02 Reply #3, 16 years, 6 months ago

Thanks! That was a good beginning. I changed the startItemTpl to:

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

But then I still have one problem. The "active" class doesn´t work for the first <li>. Right now the whole <ul> gets the class "active" in addition to the regular active-function.

Any solutions?

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 16 years, 6 months ago

Move the [+wf.classes+] to wherever you want it. You can manually specify a class or ID in the opening <ul> tag. If you go for a shotgun approach and put the [+wf.classes+] placeholder everywhere, then in your CSS you can control what get the styling for which class by being very specific in your css directives:

ul#mainmenu li.active { ... }

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

16 Posts

samuel02 Reply #5, 16 years, 6 months ago

Thanks for replying, but I don’t get it! huh

If I for example put it like this:

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

Is the result following:

If on domain.com/en/information :

<ul>
<li class="active">
  <a href="/information">Information</a>
</li>
<li>
  <a title="Specifications" href="http://www.domain.com/en/information/specifications">SPECIFICATIONS »</a>
</li>
<li>
  <a title="Prices" href="http://www.domain.com/en/information/prices">PRICES »</a>
</li>
<li class="last">
  <a title="Features" href="http://www.domain.com/en/en/information/features">FEATURES »</a>
</li>
</ul>

If on domain.com/en/information/specifications :

<ul>
<li class="active">
  <a href="/information">Information</a>
</li>
<li class="active">
  <a title="Specifications" href="http://www.domain.com/en/information/specifications">SPECIFICATIONS »</a>
</li>
<li>
  <a title="Prices" href="http://www.domain.com/en/information/prices">PRICES »</a>
</li>
<li class="last">
  <a title="Features" href="http://www.domain.com/en/en/information/features">FEATURES »</a>
</li>
</ul>

Did you get my original goal?

Thanks for helping out

16 Posts

samuel02 Reply #6, 16 years, 6 months ago

As I wrote earlier my document tree looks like this:

* Introduction
* Information
o Features
o Specifikations
o Prices
o FAQ
* Contact
* Buy now

My mainmenu:

Introduction | Information | Contact | Buy now

And I want my side menu to be:

OVERVIEW (The information page)
FEATURES
SPECIFICATIONS
PRICES
FAQ

Another solution might be to create a new resource under information called "OVERVIEW" and then let domain.com/en/information go to that resource? But then - how do I do that? Is there anyone out there who understands what I want?

☆ A M B ☆
24,524 Posts

sottwell Reply #7, 16 years, 6 months ago

there are two parameters to set a classname for the current page; one is for the current page only, the other is for the "trail" of current page and its parents.

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