Wayfinder styling conundrum

35 Posts

wakatashi Reply #1, 11 years, 2 months ago

I'm fairly new to MODX, and am trying to get Wayfinder to output a slightly unusual (to me) format, along these lines:

<div class="footer_top">
	<ul>
		<li><h3>About Us</h3></li>
		<li><a href="#">Our Mission</a></li>
		<li><a href="#">Our Projects</a></li>
		<li><a href="#">Our Trustees</a></li>
		<li><a href="#">Partners</a></li>
	</ul>
	<ul>
		<li><h3>Support Us</h3></li>
		<li><a href="#">Donate</a></li>
		<li><a href="#">Fundraise</a></li>
		<li><a href="#">Corporate</a></li>
		<li><a href="#">Ambassadors</a></li>
		<li><a href="#">Volunteers</a></li>
		<li><a href="#">Our Supporters</a></li>
	</ul>
</div>

The first item in each of the two lists above is a "top level" menu item, and the items underneath them are their respective children.

I've been looking at the official docs, the Wayfinder tutorial at http://codingpad.maryspad.com, and Bob Ray's book. But so far I haven't worked out how to wield those outerTpls, innerTpls, innerRowTpls and so on - in such as way as to spit out something that looks like the above.

I know that in theory this is a little bit of an RTFM type question, but really I'm rather stuck with it at the moment. Can anyone offer any pointers, please?

This question has been answered by wakatashi. See the first response.

793 Posts

ottogal Reply #2, 11 years, 2 months ago

Lets assume that "About Us" has the ID 11 and "Support Us" the ID 22.
Then you could use two Wayfinder calls:

<div class="footer_top">
    [[Wayfinder? &startId=`11`]]
    [[Wayfinder? &startId=`22`]]
</div>

and would get this output:

<div class="footer_top">
    <ul>
        <li><a href="#">Our Mission</a></li>
        <li><a href="#">Our Projects</a></li>
        <li><a href="#">Our Trustees</a></li>
        <li><a href="#">Partners</a></li>
    </ul>
    <ul>
        <li><a href="#">Donate</a></li>
        <li><a href="#">Fundraise</a></li>
        <li><a href="#">Corporate</a></li>
        <li><a href="#">Ambassadors</a></li>
        <li><a href="#">Volunteers</a></li>
        <li><a href="#">Our Supporters</a></li>
    </ul>
</div>

Now just the headlines are missing.

For that purpose use the parameters &displayStart and &startItemTpl.

&displayStart=`1`

tells WF to include the page having the startId in the list - that is page 11 in the first menu and page 22 in the second one.

In the chunk for &startItemTpl you tell WF the HTML code for this starting item. By default it would be

<h2[[+wf.id]][[+wf.classes]]>[[+wf.linktext]]</h2>[[+wf.wrapper]]

You want to have a h3 headline, so just create a chunk "startline" like that:

<h3[[+wf.id]][[+wf.classes]]>[[+wf.linktext]]</h2>[[+wf.wrapper]]

Now the following code should do it:

<div class="footer_top">
    [[Wayfinder? &startId=`11` &displayStart=`1` &startItemTpl=`startline`]]
    [[Wayfinder? &startId=`22` &displayStart=`1` &startItemTpl=`startline`]]
</div>

☆ A M B ☆
24,524 Posts

sottwell Reply #3, 11 years, 2 months ago

You could do it with two tpls, the outerTpl to just generate the inner lists without the enclosing ul tags, and the categoryRowTpl for the ul and h3 elements. categoryRow items are resources that either have no template or have rel="category" in their link attributes field. You could also use parentRowTpl or possibly outerRowTpl for these as well.

[[+wf.wrapper]]

<ul><li><h3>[[+wf.linktext]]</h3></li>[[+wf.wrapper]]</ul>

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

90 Posts

Arkalp Reply #4, 11 years, 2 months ago

Hi wakatashi,

You can try this for your nav menu...

Assume that About Us and Support Us are first level resources, Than Replace all your code with following wayfinder code.

[[Wayfinder? &startId=`0` &level=`1` &outerTpl=`yourouterTpl` &rowTpl=`yourowTpl` ]]

Code in the chunk called "yourouterTpl" is

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

Code in the chunk called "yourrowTpl" is

<ul><li><h3>[[+wf.linktext]]</h3></li>

[[Wayfinder? &startId=`[[+id]] or [[*id]]` &outerTpl=`secondlevelouterTpl` &rowTpl=`secondlevelrowTpl` ]]

</ul>

Code in the chunk called "secondlevelouterTpl" is

[[+wf.wrapper]]

Code in the chunk called "secondlevelrowTpl" is

<li>[[+wf.linktext]]</li>

I think this code will be useful to you for your nav menu.

Follow the above code and read this for error correction and better view.
http://rtfm.modx.com/display/ADDON/Wayfinder+Introductory+Examples

Arkalp.com

discuss.answer

35 Posts

wakatashi Reply #5, 11 years, 2 months ago

Thanks to all three of you for getting back to me so quickly. I've used a variation of ottogal's method, using a separate Wayfinder call for each top-level menu item and its children. I only had to make changes because I discovered that setting &displayStart=`1` puts the heading outside the unordered list, and I needed it inside, as a list item.

So this is what I ended up with (the & parentClass=`last` on the last line is to fit in with the CSS of the template I'm using):

		<div class="footer_top">
	
			[[Wayfinder? &startId=`2` &displayStart=`1` &outerTpl=`FooterMenuOuter` &startItemTpl=`FooterMenuStartItem`]]

			[[Wayfinder? &startId=`3` &displayStart=`1` &outerTpl=`FooterMenuOuter` &startItemTpl=`FooterMenuStartItem`]]

			[[Wayfinder? &startId=`4` &displayStart=`1` &outerTpl=`FooterMenuOuter` &startItemTpl=`FooterMenuStartItem`]]

			[[Wayfinder? &startId=`5` &displayStart=`1` &outerTpl=`FooterMenuOuter` &startItemTpl=`FooterMenuStartItem`]]

			[[Wayfinder? &startId=`6` &displayStart=`1` &outerTpl=`FooterMenuOuter` &startItemTpl=`FooterMenuStartItem` & parentClass=`last`]]

		</div>

...with FooterMenuStartItem looking like this:

<ul[[+wf.classes]]>
	<li>
		<h3>[[+wf.linktext]]</h3>
	</li>
	[[+wf.wrapper]]

...and FooterMenuOuter looking like this:

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

Thanks again to all - I know much more about Wayfinder now, and I learned a lot by working out how all of your approaches worked.

☆ A M B ☆
24,524 Posts

sottwell Reply #6, 11 years, 2 months ago

You can have the start item as part of your list by manipulating the outerTpl and the startItemTpl. The startItemTpl has the beginning <ul>, and an li row for the start item's link or text. Then the outerTpl just has the [[+wf.wrapper]]</ul> to fill in the rest of the menu and close the ul.

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

35 Posts

wakatashi Reply #7, 11 years, 2 months ago

That's just what I did, and it works well. Thanks again for your help!

Answered Wayfinder styling conundrum