We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 19646
    • 31 Posts
    HI folks,

    I have spent yesterday reading the excellent documentation on muddydogpaws (helpful to print off !) and all 27 pages of this forum.

    I managed to reproduce my menu system in modx but it refuses to display the 3rd layer correctly.
    To assist with this reuest for help I have set up the menu system as it appears in the "static HTML" on this link http://www.ebxpstaging.com/wayfinder/menuTest/exampleHTML.html

    I will fill you in a little on the way the menu system works.
    1) The javascript is called from the ’onclick’ and then shows or hides the information shown within the span tags that carry the same index as the "parent container".

    2) Where the "parent container" has child pages below it, it has NO link of it’s own as there is no page content associated with that page but I still need the "parent containers" to be displayed in the menu tree.

    3) On the menu labelled "Become a DIY expert", if you click on that menu label and then on "Expert In" the tree opens up again to display the "3rd level" (light blue buttons).
    This is what has been causing the issues !!!! The client is adamant that this must be a 3rd level and only display when clicked on.

    4) When you goto another page the site sets a cookie and then when the new page is loaded it opens th etree to display it in the position you left it. (again a client specific request)


    I will list below the wayfinder statement I have used and the "page source text" that is generated when the MODx page is displayed in the web browser.


    WAYFINDER STATEMENT

    A) This is the main statement

    <div id="masterdiv">
    [[Wayfinder?startId=`0` &level=`3` &outerTpl=`menu_outer` &rowTpl=`menu_row` &innerRowTpl=`sub_row_menu` &innerHereTpl=`third_level`]]
    </div <!-- end div masterdiv -->


    Chunks

    (i) menu_outer == [+wf.wrapper+]

    (ii) menu_row == <div class="menutitle" onclick="[+sub_name+][+sub_number+]’)"><a href="[+menuTreeLink+]">[+wf.linktext+]</a></div>
    <span class="[+span_class+]" id="[+span_prefix+][+sub_number+]">
    [+wf.wrapper+]
    </span>

    Template variables for this chunk == sub_name : this outputs "SwitchMenu(’sub" as default and can be changed user to "ThreeMenu(’three"
    sub_number : this outputs a number
    menuTreeLink : this outputs either the wayfinder link info or a "#" based upon result from template variable (runs a snippet we wrote to achieve this)
    span_class : this is set to "submenu" by default but allows you to enter "submenusub" as required
    span_prefix : this is set to "sub" by default but allows you to enter "three" as required


    (iii) sub_row_menu == <div class="subMenuBack"><a href="[+wf.link+]">[+wf.linktext+]</a></div>
    [+wf.wrapper+]

    (iv) <div class="subMenuBacksub"><a href="[+wf.link+]">&nbsp;&nbsp;[+wf.linktext+]</a></div>





    This is the output from the "view page source"

    ??? Note the lack of the addional span container around the expert in section huh


    <div id="masterdiv">
    <div class="menutitle" onclick="SwitchMenu(’sub1’)"><a href="w w w.mysite.com/index.php">Home</a></div>
    <span class="submenu" id="sub1">

    </span>

    <div class="menutitle" onclick="SwitchMenu(’sub2’)"><a href="#">Become a DIY Expert</a></div>
    <span class="submenu" id="sub2">
    <div class="subMenuBack"><a href="/mysite/index.php?id=8">Expert in</a></div>
    <div class="subMenuBack"><a href="/mysite/index.php?id=9">Introduction</a></div>


    <div class="subMenuBack"><a href="/mysite/index.php?id=10">Handtools</a></div>


    <div class="subMenuBack"><a href="/mysite/index.php?id=11">Drilling</a></div>


    <div class="subMenuBack"><a href="/mysite/index.php?id=12">Using a router</a></div>


    <div class="subMenuBack"><a href="/mysite/index.php?id=13">Mitre saw</a></div>


    <div class="subMenuBack"><a href="/mysite/index.php?id=14">Bench saw</a></div>


    <div class="subMenuBack"><a href="/mysite/index.php?id=15">Key safety points</a></div>




    <div class="subMenuBack"><a href="/mysite/index.php?id=16">Your tools</a></div>




    </span>
    <div class="menutitle" onclick="SwitchMenu(’sub3’)"><a href="#">Loyalty programme</a></div>
    <span class="submenu" id="sub3">
    <div class="subMenuBack"><a href="/mysite/index.php?id=38">Your details</a></div>


    <div class="subMenuBack"><a href="/mysite/index.php?id=39">Purchases</a></div>


    <div class="subMenuBack"><a href="/mysite/index.php?id=40">Your points</a></div>


    <div class="subMenuBack"><a href="/mysite/index.php?id=41">Redeem points</a></div>




    </span>
    <div class="menutitle" onclick="SwitchMenu(’sub4’)"><a href="#">Marketing</a></div>

    <span class="submenu" id="sub4">
    <div class="subMenuBack"><a href="/mysite/index.php?id=35">Events</a></div>


    <div class="subMenuBack"><a href="/mysite/index.php?id=36">Resources</a></div>


    <div class="subMenuBack"><a href="/mysite/index.php?id=37">Merchandise</a></div>




    </span>
    <div class="menutitle" onclick="SwitchMenu(’sub5’)"><a href="#">Project library</a></div>

    <span class="submenu" id="sub5">
    <div class="subMenuBack"><a href="/mysite/index.php?id=22">Trolleys</a></div>


    <div class="subMenuBack"><a href="/mysite/index.php?id=25">Tables</a></div>


    <div class="subMenuBack"><a href="/mysite/index.php?id=23">Bird boxes</a></div>


    <div class="subMenuBack"><a href="/mysite/index.php?id=24">Stools</a></div>


    <div class="subMenuBack"><a href="/mysite/index.php?id=26">Toys and games</a></div>


    <div class="subMenuBack"><a href="/mysite/index.php?id=27">Food & restaurants</a></div>


    </span>
    <div class="menutitle" onclick="SwitchMenu(’sub6’)"><a href="#">Newsletter</a></div>

    <span class="submenu" id="sub6">
    <div class="subMenuBack"><a href="/mysite/index.php?id=33">Current newsletter</a></div>


    <div class="subMenuBack"><a href="/mysite/index.php?id=34">Archive</a></div>




    </span>
    <div class="menutitle" onclick="SwitchMenu(’sub7’)"><a href="/mysite/index.php?id=21">Contact</a></div>
    <span class="submenu" id="sub7">

    </span>


    </div> <!-- end div masterdiv -->






    I am quite happy to ditch all my wayfinder code and implement a new set of code

    Please treat me a blind man as regards my wayfinder as I seem to have wrapped myself up in knots with it all..... undecided
    .... therefore please extend me the courtesy of a little TLC and lead me but the hand a bit with some step by step corrections of the WAYFINDER code I used or a new set of code to use.

    I will be so grateful for all help you can give me


    regards and thanks in advance

    Minty




      • 19646
      • 31 Posts
      Done IT

      grin

      I have created a menu system that outputs it all and displays the whole thing as per the example URL I gave.

      The solution was to output each branch of the tree separately, then to output the third level separately.

      If anyone has a solution that will chunk it out in one go with the correct <span> tags in the correct places please shout up, I’ll be delighted to hear from you

      regards

      Minty
        • 28042 ☆ A M B ☆
        • 24,524 Posts
        That’s one of the great advantages of MODx; if you can’t figure out one way to do something, there’s almost always two or three other ways to accomplish the same effect  grin
          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