Need a little help with wayfinder dropline menu. InnerTPL not displaying.

29 Posts

smitch Reply #1, 17 years, 9 months ago

Hey,

Im nearly there I think. I just cant get the innerTpl to display.

page template:

<div id="nav">
            <p class="nav-right-bg"></p>
            <p class="nav-left-bg"></p>
                [[Wayfinder]]
</div>

default config file

<?php
    $level = 3;

    $startId ='0';
	//$parentClass = 'hide';
	//$outerClass = 'nav';

	$outerTpl = '@CODE:<div id="ddtabs1" class="nav-inner">
           <ul>
	        [+wf.wrapper+]
	    </ul>
	</div>';

	$rowTpl = '@CODE:<li><a href="[+wf.link+]" title="[+wf.title+]" rel="sc1">[+wf.linktext+]</a>[+wf.wrapper+]</li>1';

	$parentRowTpl = '@CODE:<li><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>2';

	$innerTpl = '@CODE:
                <div id="searchbox-holder"><form action="" method="get" class="form">
              <p id="search-icon"><a href="#"><img src="assets/images/search-icon.jpg" alt="Search" border="0" /></a></p>
              <p id="searchbox-inner">
                <input type="text" class="searchinput" value="Search Here" />
              </p>

            </form></div>

            <!-- end #nav --></div>


            <div class="tabcontainer">

          <div id="sc1" class="tabcontent">

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

    $innerRowTpl = '@CODE:
      <li><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a></li>3
    ';
?>

When I test this, the top level links show. Anything below that does not. Its not parsing the $innerTpl and $innerRowTpl sections.

Any ideas why?

any assistance is greatly appreciated.

Regards
Smitch

2,877 Posts

mrhaw Reply #2, 17 years, 9 months ago

Try this [!Wayfinder?&startId=`0`&level=`2`!] // http://wiki.modxcms.com/index.php/Wayfinder

Have you modified the config file? You can use chunks as templates!
then add:
&firstTpl=`chunkname`
&lastTpl=`chunkname`
&innerTpl=`chunkname`
&outerTpl=`chunkname`
and so on...

check out the wiki! :)

@hawproductions | http://mrhaw.com/

Infograph: MODX Advanced Install in 7 steps:
http://forums.modx.com/thread/96954/infograph-modx-advanced-install-in-7-steps

Recap: Portland, OR (PDX) MODX CMS Meetup, Oct 6, 2015. US Bancorp Tower
http://mrhaw.com/modx_portland_oregon_pdx_modx_cms_meetup_oct_2015_us_bancorp_tower

29 Posts

smitch Reply #3, 17 years, 9 months ago

Thanks heaps for that. However after doing that Ive realised something else Ive done wrong.

My menu system is put together slightly differently in that the sub menu’s are not nested within the top menu bullet list. They are a completly seperate DIV.
Can I still do this in wayfinder? Ive been reading the wiki and the forum but cannot find a working example of it done this way.

The code sample below shows how my menu system has two distinct parts in different DIV’s. One for the top level, one for the sub level.

Any guidance of how i should structure this is much appreciated.

Regards
Smitch

Example:

   
 <div id="nav">
            <p class="nav-right-bg"></p>
            <p class="nav-left-bg"></p>

         <!-- **TOP MENU**-->            
            <div id="ddtabs1" class="nav-inner">
                   <ul>
                        <li><a href="index.php">Home</a></li>
                        <li><a href="services.html" rel="sc1">Services</a></li>
                        <li><a href="library.html">Library</a></li>
                        <li><a href="about_us.html">About Us</a></li>
                        <li><a href="clients.html">Clients</a></li>
                        <li><a href="products.html">Products</a></li>
                        <li><a href="contact_us.html">Contact Us</a></li>
                  </ul>
           </div> 
            
            <div id="searchbox-holder">
                   <form action="" method="get" class="form">
                         <p id="search-icon"><a href="#"><img src="images/search-icon.jpg" alt="Search" border="0" /></a></p>
                         <p id="searchbox-inner"><input type="text" class="searchinput" value="Search Here" /></p>
                    </form>
            </div>
            
            <!-- end #nav -->
</div>

<!-- **SUBMENU **-->
<div class="tabcontainer">

      <div id="sc1" class="tabcontent">
            <ul>
                  <li><a href="business_consulting.html">Business Consulting</a> |</li>
                  <li><a href="#">Training</a> |</li>
                  <li><a href="#">I.T.</a></li>
             </ul>
      </div>

      <!-- end #ddtabs -->
</div>

2,877 Posts

mrhaw Reply #4, 17 years, 9 months ago

Wayfinder output your modx manager document tree! So in this case
Make some docs and choose them to be container/folders, then create your docs inside here.
Mark "show in menu".

When you get this working you can then assign css classes and ids to your divs (inside the template chunks).

@hawproductions | http://mrhaw.com/

Infograph: MODX Advanced Install in 7 steps:
http://forums.modx.com/thread/96954/infograph-modx-advanced-install-in-7-steps

Recap: Portland, OR (PDX) MODX CMS Meetup, Oct 6, 2015. US Bancorp Tower
http://mrhaw.com/modx_portland_oregon_pdx_modx_cms_meetup_oct_2015_us_bancorp_tower

29 Posts

smitch Reply #5, 17 years, 9 months ago

How do I ’un-nest’ the two menus though?

Do I need to call wayfinder twice?

2,877 Posts

mrhaw Reply #6, 17 years, 9 months ago

Yes! See this page: http://wiki.modxcms.com/index.php/Beginner’s_Guide_to_MODx#The_Results

@hawproductions | http://mrhaw.com/

Infograph: MODX Advanced Install in 7 steps:
http://forums.modx.com/thread/96954/infograph-modx-advanced-install-in-7-steps

Recap: Portland, OR (PDX) MODX CMS Meetup, Oct 6, 2015. US Bancorp Tower
http://mrhaw.com/modx_portland_oregon_pdx_modx_cms_meetup_oct_2015_us_bancorp_tower

29 Posts

smitch Reply #7, 17 years, 9 months ago

Thanks for all the help. Iv got it working.

There is probably a better way but this will do me for now.

This is what I did.

            <div id="nav">
            <p class="nav-right-bg"></p>
            <p class="nav-left-bg"></p>



           [!Wayfinder? &startId=`0`&level=`1`!]


{{nav_bar_search}}

            </form></div>

            <!-- end #nav --></div>

            <div class="tabcontainer">

            <!--HOME PAGE LOGIN LINK -->
            <!--<div class="login-holder"><p><a href="#">Login</a></p></div> -->

           <div id="sc1" class="tabcontent">
           [!Wayfinder? &startId=`7` &level=`2` $config='submenu'!]
           </div>

            
					<!-- end #ddtabs --></div>

That gets me this output....

<div id="nav">
            <p class="nav-right-bg"></p>
            <p class="nav-left-bg"></p>



           <div id="ddtabs1" class="nav-inner">
           <ul>
	        <li><a href="http://projects.solutionsbd.com.au/partnercorp/" title="Home">Home</a></li>
                        <li><a href="/index.php?id=7" title="Services" rel="sc1">Services</a></li>
                        <li><a href="/index.php?id=8" title="Library">Library</a></li>
                        <li><a href="/index.php?id=2" title="About Us">About Us</a></li>
                        <li><a href="/index.php?id=9" title="Clients">Clients</a></li>
                        <li><a href="/index.php?id=10" title="Products">Products</a></li>
                        <li><a href="/index.php?id=11" title="Contact Us">Contact Us</a></li>

          </ul>
	</div>


            <div id="searchbox-holder"><form action="" method="get" class="form">
              <p id="search-icon"><a href="#"><img src="images/search-icon.jpg" alt="Search" border="0" /></a></p>
              <p id="searchbox-inner">
                <input type="text" class="searchinput" value="Search Here" />
              </p>

            </form></div>

            <!-- end #nav --></div>

            <div class="tabcontainer">

            <!--HOME PAGE LOGIN LINK -->
            <!--<div class="login-holder"><p><a href="#">Login</a></p></div> -->

           <div id="sc1" class="tabcontent">
           <ul>
                 <li><a href="index.php?id=12" title="Submenu" >Business Consulting</a></li>
                <li><a href="index.php?id=13" title="Training" >Training</a></li>
                <li class="last"><a href="index.php?id=14" title="I.T" >I.T</a><ul>
                <li><a href="/partnercorp/index.php?id=15" title="it sub" >it sub</a></li>
           </ul>
           </li>
            </ul>
           </div>

            
					<!-- end #ddtabs --></div>

2,877 Posts

mrhaw Reply #8, 17 years, 9 months ago

Nice that you used the &config parameter! This is a way better approach to handle menus which I didnt was
aware off. So I learned from you!

@hawproductions | http://mrhaw.com/

Infograph: MODX Advanced Install in 7 steps:
http://forums.modx.com/thread/96954/infograph-modx-advanced-install-in-7-steps

Recap: Portland, OR (PDX) MODX CMS Meetup, Oct 6, 2015. US Bancorp Tower
http://mrhaw.com/modx_portland_oregon_pdx_modx_cms_meetup_oct_2015_us_bancorp_tower