[SOLVED]Wayfinder templates

10 Posts

pixelboxdesign Reply #1, 14 years, 2 months ago

I have been trying to create a wayfinder template for almost 4 hours now and I'm just not getting it.

Can some kind sole please show me how I would go about creating a wayfinder template to output the list in the following format/classes etc.

	<ul class="menu-top">
		<li>
			<a href="#" class="menu-button"><span class="menu-label">Menu</span></a>
        </li>
        <li>
			<a href="#" class="menu-button menu-drop"><span class="menu-label">Menu</span></a>
				<div class="menu-dropdown menu-dropdown1">
					<ul class="menu-sub">
                        <li><a href="#" class="menu-subbutton"><span class="menu-label">sub-menu</span></a></li>
                        <li><a href="#" class="menu-subbutton"><span class="menu-label">sub-menu</span></a></li>
                        <li><a href="#" class="menu-subbutton"><span class="menu-label">sub-menu</span></a></li>
                    </ul>
				</div>
        </li>
        <li>
            <a href="#" class="menu-button menu-drop"><span class="menu-label">Menu</span></a>
                <div class="menu-dropdown menu-dropdown1">
					<ul class="menu-sub">
                        <li><a href="#" class="menu-subbutton"><span class="menu-label">sub-menu</span></a></li>
                        <li><a href="#" class="menu-subbutton"><span class="menu-label">sub-menu</span></a></li>
                    </ul>
                </div>
        </li>
        <li>
            <a href="#" class="menu-button"><span class="menu-label">Menu</span></a>
        </li>
    </ul>

[ed. note: pixelboxdesign last edited this post 14 years, 2 months ago.]

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 14 years, 2 months ago

Presuming this is for Revo; if it's for Evo just change the placeholder tags. This should do the job, at least enough to give you the idea.

outerTpl - default, use &outerClass=`menu-top` as a snippet property.

rowTpl - default, use &rowClass=`menu-button` as a snippet property.

parentRowTpl -

<li>
    <a href="[[+wf.link]]" class="menu-button menu-drop"><span class="menu-label">[[+wf.linktext]]</span></a>
    [[+wf.wrapper]]

innerTpl -

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

innerRowTpl -

<li>
    <a href="[[+wf.link]]" class="menu-subbutton"><span class="menu-label">[[+wf.linktext]]</span></a>
</li>

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

10 Posts

pixelboxdesign Reply #3, 14 years, 2 months ago

Fantastic, thank-you so much I can't seem to get my head around the templating.

10 Posts

pixelboxdesign Reply #4, 14 years, 2 months ago

I'm almost there I created the chunks as above and I'm using the following call

[[Wayfinder? &startId=`0` &level=`3` &parentRowTpl=`parentrow` &innerTpl=`inner` &innerRowTpl=`innerrow` &outerClass=`menu-top` &rowClass=`menu-button`]]

Unfortunately I'm not getting the

<span class="menu-label"></span>

on the single links with no children links.

<ul class="menu-top"><li class="menu-button first active"><a href="fullurl/" title="Home" >Home</a></li>
<li class="menu-button"><a href="fullurl/About" title="Menu" >About</a></li>
<li>
<a href="services/" class="menu-button menu-drop"><span class="menu-label">Services</span></a>
    <div class="menu-dropdown menu-dropdown1">
    <ul class="menu-sub">
        <li>
		<a href="services/learning-and-development/" class="menu-subbutton"><span class="menu-label">Learning and Development</span></a>
		</li>
    </ul>

For some reason it's also outputing the full url incl domain on those links. It's probably something simple but I can't see it. Any suggestions? [ed. note: pixelboxdesign last edited this post 14 years, 2 months ago.]

10 Posts

pixelboxdesign Reply #5, 14 years, 2 months ago

Anybody?

☆ A M B ☆
2,213 Posts

AMDbuilder Reply #6, 14 years, 2 months ago

Try adding &rowTpl=`innerrow` to the template call.

Patrick | Server Wrangler
About Me: Website | Tweets | MODX Hosting

10 Posts

pixelboxdesign Reply #7, 14 years, 2 months ago

That done the trick. Many thanks, I wish I could get my head around those templates.