On March 26, 2019 we launched new MODX Forums. Please join us at the new MODX Community Forums.
Subscribe: RSS
  • For some reason I just don't grasp Wayfinder and the layouts. Even though I read the documentation over and over again, I just can't get my menu to show properly using chunks. My website is here: http://www.apicslima.org/home2.html but if you click any of the hyperlinks they not show properly yet. I only have a homepage template right now so the interior pages will not properly show if clicked.

    This HTML is proper and shows my menu the way I need it. Another words this is the ideal layout I need for wayfinder:
    <ul id="mainNav" class="nav nav-pills">
    	<li class=""><a href="[[~12]]">Home </a></li>
    	<li class=""><a href="[[~2]]">Information </a></li>
    	<li class=""><a href="[[~3]]">Events </a></li>
    	<li class=""><a href="[[~4]]">Education </a></li>
    	<li class=""><a href="[[~5]]">Job Board </a></li>
    	<li class="dropdown"><a class="dropdown-toggle" href="#">Pages </a>
    	<ul class="dropdown-menu">
    		<li class="dropdown-submenu"><a href="#">About Us</a>
    		<ul class="dropdown-menu">
    			<li><a href="[[~13]]">About Us</a></li>
    			<li><a href="[[~14]]">About Us - Basic</a></li>
    			<li><a href="[[~15]]">About Me</a></li>
    		</ul>
    		</li>
    		<li class="dropdown-submenu"><a href="#">Shop</a>
    		<ul class="dropdown-menu">
    			<li><a href="[[~16]]">Shop - Full Width</a></li>
    			<li><a href="[[~17]]">Shop - Sidebar</a></li>
    			<li><a href="[[~17]]">Shop - Product Full Width</a></li>
    			<li><a href="[[~18]]">Shop - Product Sidebar</a></li>
    			<li><a href="[[~19]]">Shop - Cart</a></li>
    			<li><a href="[[~20]]">Shop - Login</a></li>
    			<li><a href="[[~21]]">Shop - Checkout</a></li>
    		</ul>
    		</li>
    		<li><a href="[[~22]]">Custom Header</a></li>
    		<li><a href="[[~23]]">Team</a></li>
    		<li><a href="[[~24]]">Services</a></li>
    		<li><a href="[[~25]]">Careers</a></li>
    		<li><a href="[[~26]]">Our Office</a></li>
    		<li><a href="[[~27]]">FAQ</a></li>
    		<li><a href="[[~28]]">Login / Register</a></li>
    	</ul>
    	</li>
    	<li class=""><a href="[[~2]]">Newsletter </a></li>
    	<li class=""><a href="[[~6]]">Contact </a></li>
    </ul>
    


    My snippet call right now only shows outer and row (I realize I need more here)
    [[Wayfinder? &startId=`0` &rowTpl=`rowTpl` &outerTpl=`outerTpl`]]


    My outerTpl looks like this (I think this much is right):
    <!-- outerTpl -->
    <ul id="nav nav-pills" id="mainNav"[[+wf.classes]]>
    [[+wf.wrapper]]
    </ul>


    My rowTpl looks like this:
    <!-- rowTpl -->
    <li[[+wf.id]]>
    <a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>
    [[+wf.wrapper]]</li>


    My parentRow (which is not called in the snipplet right now looks like this:
    <!-- ParentRow -->
    <li>
    <a href="[[+wf.link]]">[[+wf.linktext]]</a> - [[+wf.description]]
    [[+wf.wrapper]]
    </li>


    I am just not finding the layout I need, so right now I have straight HTML pasted in my Navigation area. But I really need wayfinder on this site.

    I have been reading the instructions for almost an entire day and attempting different combinations but I just can't seem to get this right. Your help here would be much appreciated.

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

      Making the web a better place on site at a time! Dayton Web Design: http://www.dayton-web-design.com/
    • Do you have this tag in the head section of all your templates (it's required for the links in the menu to work)?

      <base href="[[!++site_url]]" />



      Wayfinder has been around for a long time and is pretty bulletproof. It should produce a working menu even if you just use:

      [[!Wayfinder? &startid=`0`]]

        Did I help you? Buy me a beer
        Get my Book: MODX:The Official Guide
        MODX info for everyone: http://bobsguides.com/modx.html
        My MODX Extras
        Bob's Guides is now hosted at A2 MODX Hosting
      • Quote from: BobRay at May 06, 2017, 04:34 AM
        Do you have this tag in the head section of all your templates (it's required for the links in the menu to work)?

        <base href="[[!++site_url]]">



        Wayfinder has been around for a long time and is pretty bulletproof. It should produce a working menu even if you just use:

        [[!Wayfinder? &startid=`0`]]


        OK BobRay I noticed my site URL (<base href="[[!++site_url]]">) did not have the proper syntax. It was missing the ! in the front of the pluses. Once I modified the site URL in the header the menu now shows. BUT the menu is not showing my drop-downs like I want them too. You can see the page with my pages here: http://www.apicslima.org/home2.html.

        The SCM and CSCP classes are children of Education. The Production Contol Manager is a child of Job Board. But they do not show as children in my menu (which I want to go 3 deep).

        I modified my snipplet to be:
        [[Wayfinder? &startId=`0` &rowTpl=`rowTpl` &outerTpl=`outerTpl` &level=`3`]]


        My outerTpl to be:
        <!-- outerTpl -->
        [[+wf.wrapper]]

        Since the UL definitions were added directly to the template instead of this area. So I am now showing Wayfinder on the front end, but I still have a little bit of layout issue as my children menus are not dropping down like I need them to.
          Making the web a better place on site at a time! Dayton Web Design: http://www.dayton-web-design.com/
        • discuss.answer
          Yeah, I finally got it to display properly. Just kept looking at the example and it finally all fell into place. The Diagram on the example page: https://docs.modx.com/extras/revo/wayfinder/wayfinder-introductory-examples really helped me out. Thank you BobRay for your help.
            Making the web a better place on site at a time! Dayton Web Design: http://www.dayton-web-design.com/
          • I'm glad you got it sorted. smiley
              Did I help you? Buy me a beer
              Get my Book: MODX:The Official Guide
              MODX info for everyone: http://bobsguides.com/modx.html
              My MODX Extras
              Bob's Guides is now hosted at A2 MODX Hosting