How to make wayfinder output this layout?

61 Posts

formulax Reply #1, 11 years, 10 months ago

So I've got a bit of a unique navigation structure that kind of breaks out of the typical wayfinder mold:

<nav>
					<ul class="sf-menu">
						<li><a href="/">Home</a></li>
						<li class="hassubs">
							<a href="/">Foundry</a>
							<div class="sf-mega">
								<div class="sf-mega-section">
									<h2>Blast Equipment</h2>
									<ul>
										<li><a href="#">Blast Cabinets</a></li>
										<li><a href="#">Blast Cabinets</a></li>
										<li><a href="#">Blast Cabinets</a></li>
										<li><a href="#">Blast Cabinets</a></li>
										<li><a href="#">Blast Cabinets</a></li>
										<li><a href="#">Blast Cabinets</a></li>
										<li><a href="#">Blast Cabinets</a></li>
										<li><a href="#">Air Coolers</a></li>
									</ul>
									<h2>Blast Parts & Accessories</h2>
									<ul>
										<li><a href="#">Hoses, Fitting & Couplings</a></li>
										<li><a href="#">Metering Valves</a></li>
										<li><a href="#">Nozzles</a></li>
										<li><a href="#">Replacement Parts</a></li>
									</ul>
								</div> <!-- sf-mega-section -->
								<div class="sf-mega-section">
									<h2>Lighting</h2>
									<ul>
										<li><a href="#">Blast Cabinets</a></li>
										<li><a href="#">Blast Cabinets</a></li>
									</ul>
									<h2>Blast Media</h2>
									<ul>
										<li><a href="#">Blast Cabinets</a></li>
										<li><a href="#">Blast Cabinets</a></li>
										<li><a href="#">Blast Cabinets</a></li>
										<li><a href="#">Blast Cabinets</a></li>
										<li><a href="#">Blast Cabinets</a></li>
										<li><a href="#">Blast Cabinets</a></li>
										<li><a href="#">Blast Cabinets</a></li>
										<li><a href="#">Blast Cabinets</a></li>
										<li><a href="#">Blast Cabinets</a></li>
										<li><a href="#">Blast Cabinets</a></li>
										<li><a href="#">Blast Cabinets</a></li>
										<li><a href="#">Blast Cabinets</a></li>
									</ul>
								</div> <!-- sf-mega-section -->
								<div class="sf-mega-section">
									<h2><a href="#">Paint Equipment</a></h2>
									<h2><a href="#">Safety Equipment</a></h2>
									<ul>
										<li><a href="#">Blast Cabinets</a></li>
										<li><a href="#">Blast Cabinets</a></li>
										<li><a href="#">Blast Cabinets</a></li>
										<li><a href="#">Blast Cabinets</a></li>
										<li><a href="#">Blast Cabinets</a></li>
									</ul>
								</div> <!-- sf-mega-section -->
							</div> <!-- sf-mega -->
						</li>
						<li class="active"><a href="/">Industrial</a></li>
						<li><a href="/">About</a></li>
						<li><a href="/">Contact</a></li>
					</ul>
				</nav>

You can see a working example here: http://108.60.22.8/~jrjoseph/index.html

I know the basics of &outerTpl=`outerTpl` &parentRowTpl=`parentRow` &innerTpl=`innerTpl` &innerRowTpl=`innerRowTpl` etc. but I'm not sure how to handle the fact that instead of ul so secondary pages I have a div that has it's pages listed as <h4> and then tert. nav in a <ul> under that. But several sections are wrapped in another div to create the columns.

I could probably make this all work if the drop-down was just the single column layout, but I think the main thing I am stuck on is how to work in the extra div to create the columns without making every link in a div.

Please let me know if you need any more clarification... I'm on another night of little sleep so it is possible none of that make sense

Note: The markup structure is from the superfish drop-down script. I'm sure it can probably be modified to work with <ul><li> instead of the <div class="sf-mega"><h2> if it has to.

Thanks!
Steve

1,613 Posts

fourroses666 Reply #2, 11 years, 10 months ago

Maybe this can be used after some class= changes etc?
(used for bootstrap nav)
Source: https://github.com/fourroses666/bootstrap-template

(These <h2> must be possible aswell don't know exactly how)

[[Wayfinder? 
&startId=`0` 
&level=`2` 
&outerTpl=`NavbarOuter` 
&rowTpl=`NavbarRow` 
&activeParentRowTpl=`NavbarActiveParentRow` 
&parentRowTpl=`NavbarParentRow` 
&innerTpl=`NavbarInner` 
&innerRowTpl=`NavbarInnerRow` 
&removeNewLines=`1`
]]

NavbarActiveParentRow

<li class="dropdown active"><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="[+wf.title+]">[+wf.linktext+] <b class="caret"></b></a>[+wf.wrapper+]</li>

NavbarInner

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

NavbarInnerRow

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

NavbarOuter

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

NavbarParentRow

<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="[+wf.title+]">[+wf.linktext+] <b class="caret"></b></a>[+wf.wrapper+]</li>

NavbarRow

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

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

793 Posts

ottogal Reply #3, 11 years, 10 months ago

Wayfinder depends much on the resouces tree. How does it look?
Splitting the 3rd level nav into colunns is just a layout question, isn't it? So all its items are on the same level in the tree?
Or are the group headings (h2) naming resources of their own?

5,888 Posts

Bruno17 Reply #4, 11 years, 10 months ago

If you have the resource-tree build exactly like you want to have the nav migxGetCollectionTree could do it.

[[migxGetCollectionTree?
&currentClassname=`modResource`
&treeSchema=`
{
    "classname": "modResource",
    "tpl": "tplLevel1",
    "wrapperTpl": "@CODE:<ul class=\"sf-menu\">[[+output]]</ul>",
    "selectfields": "id,pagetitle",
    "where": {
        "parent": "0",
        "published": "1",
        "deleted": "0"
    },
    "_branches": [{
        "alias": "children",
        "classname": "modResource",
        "local": "parent",
        "foreign": "id",
        "tpl": "tplLevel2",
        "selectfields": "id,pagetitle,parent",
        "_branches": [{
            "alias": "children",
            "classname": "modResource",
            "local": "parent",
            "foreign": "id",
            "tpl": "tplLevel3",
            "selectfields": "id,pagetitle,parent",
            "where": {
                "published": "1",
                "deleted": "0"
            },
            "_branches": [{
                "alias": "children",
                "classname": "modResource",
                "local": "parent",
                "foreign": "id",
                "tpl": "tplLevel4",
                "selectfields": "id,pagetitle,parent",
                "where": {
                    "published": "1",
                    "deleted": "0"
                }
            }]
        }]
    }]
}
`]]

tplLevel1:

[[+innercounts.children:gt=`0`:then=`
<li class="hassubs">
<a href="[[~[[+id]]]]">[[+pagetitle]]([[+id]])</a>
    <div class="sf-mega">
    [[+innerrows.children]]
    </div> <!-- sf-mega -->
</li>
`:else=`
<li class="[[+_activelabel]] [[+_currentlabel]]" ><a href="[[~[[+id]]]]">[[+pagetitle]]([[+id]])</a></li>
`]]

tplLevel2:

<div class="sf-mega-section [[+_activelabel]] [[+_currentlabel]]">
[[+innercounts.children:gt=`0`:then=`
    [[+innerrows.children]]
`:else=``]]
</div> <!-- sf-mega-section -->

tplLevel3:

    <h2>[[+pagetitle]]</h2>
[[+innercounts.children:gt=`0`:then=`
    <ul>[[+innerrows.children]]</ul>
`:else=``]]

tplLevel4:

<li class="[[+_activelabel]] [[+_currentlabel]]" ><a href="[[~[[+id]]]]">[[+pagetitle]]([[+id]])</a></li>

[ed. note: Bruno17 last edited this post 11 years, 10 months ago.]

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

1,613 Posts

fourroses666 Reply #5, 11 years, 10 months ago

@Bruno, I think he can't use Revolution stuff, this is the Evo section!

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

5,888 Posts

Bruno17 Reply #6, 11 years, 10 months ago

oops, yeah, sorry!

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

61 Posts

formulax Reply #7, 11 years, 10 months ago

Quote from: ottogal at Nov 13, 2014, 03:15 AM

Wayfinder depends much on the resouces tree. How does it look?
Splitting the 3rd level nav into colunns is just a layout question, isn't it? So all its items are on the same level in the tree?
Or are the group headings (h2) naming resources of their own?

Resource tree looks like:

Foundry (Primary)
-- Blast Equipment (Secondary)
---- Blast Cabinets (Tertiary)
---- etc. (Tertiary)

The H4 is the secondary items in the resources tree. Splitting into columns is indeed a layout question, I just don't know how to open and close the column div within the wayfinder code.

299 Posts

jisaac Reply #8, 11 years, 10 months ago

Check out this thread where someone is attempting do to something very similar.

https://forums.modx.com/thread/?thread=25755&page=3

61 Posts

formulax Reply #9, 11 years, 10 months ago

Alright.. I finally got this thing figured out. Thank you to everyone who commented with your suggestions. Jisaac's link led me to another post by flanger: https://forums.modx.com/thread/89514/wayfinder-mega-menu-for-revo-based-on-the-jquery-dropdown-by-soh-tanaka#dis-post-515593

His code was not exactly the same but close enough to get me where I needed to be.

FYI, I am using the superfish mega-menu http://users.tpg.com.au/j_birch/plugins/superfish/

Here is my wayfinder call

[[Wayfinder? &startId=`0` &level=`3` &outerTpl=`topOuterTpl` &innerTpl=`topInnerTpl` &categoryFoldersTpl=`topCategoryFoldersTpl` &parentRowTpl=`topParentRowTpl` &innerRowTpl=`topInnerRowTpl` &rowTpl=`topRowTpl` &parentRowTpl=`topParentRowTpl` ]]

topCategoryFoldersTpl

<div class="sf-mega-section">
	<h2>[+wf.linktext+]</h2>
	<ul>	
		[+wf.wrapper+]
	</ul>
</div>

topInnerTpl

[+wf.wrapper+]

topOuterTpl

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

topParentRowTpl

<li[+wf.classes+] class="hassubs"><a href="[+wf.link+]">[+wf.linktext+]</a>
	<div class="sf-mega">[+wf.wrapper+]</div>
</li>

topRowTpl

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