convert menu to wayfinder (urgent attn:)

16 Posts

jerontopaz Reply #1, 10 years, 3 months ago

hello y'all,I thought this would have been easy but I just cannot figure this out. At this point, I'm going to reign in my male ego and just ask for help. Can anyone please provide all the Wayfinder code I would need to make the below work? All the main and tpl codes, please?

<nav class="navbar navbar-default navbar-static-top navbar3">
<div class="container">

<div class="navbar-header">
<a class="navbar-brand" href="index.html"><img src="images/logo/1.png" height="52px" alt=""></a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main_nav" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

</div>


<div class="collapse navbar-collapse" id="main_nav">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">about</a>
<ul class="dropdown-menu" role="menu">
<li><a href="about.html">Overview</a></li>
<li><a href="mission.html">Mission & Vision</a></li>
<li><a href="message.html">A message from the CEO</a></li>
<li><a href="team.html">Our Team</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">services</a>
<ul class="dropdown-menu" role="menu">
<li><a href="clinics.html">Clinics</a></li>
<li><a href="preemployment.html">Pre-employment Services</a></li>
<li><a href="nursing.html">Home Nursing Care</a></li>
<li><a href="hearse.html">Hearse Services</a></li>
<li><a href="ambulance.html">Ambulance evacuation and Emergency medical support</a></li>
<li><a href="#">Medical outsourcing and onsite clinic services</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Patient guide</a>
<ul class="dropdown-menu" role="menu">
<li><a href="patient.html">Guide</a></li>
<li><a href="know-your-rights.html">Know Your Rights</a></li>
<li><a href="library.html">library</a></li>
</ul>
</li>
<li><a href="faq.html">FAQ</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Events</a>
<ul class="dropdown-menu" role="menu">
<li><a href="outreach.html">Outreach calendar</a></li>
</ul>
</li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>
</div>
</nav>

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 10 years, 3 months ago

To begin with, you only need to deal with the actual <ul> section. The rest of it will remain as it is. So go through the actual menu list and break it up into its discrete parts.

The outerClass property will handle the class of the outer ul element, the other class properties will set the classnames for those elements:

[[Wayfinder?
  &startId=`0`
  &outerClass=`nav navbar-nav navbar-right`
  &parentClass=`dropdown`
  &innerClass=`dropdown-menu`
  ...the various tpl properties here ...
]]

For each inner ul element, you need to have an innerTpl:

<ul [[+wf.classes]] role="menu">[[+wf.wrapper]]</ul>

Now you need the parentRowTpl for (top-level) parent li elements - just copy one of the top-level li elements and replace the variables with the appropriate placeholder tags:

<li [[+wf.classes]]>
<a href="[[+wf.link]]" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>

Then the inner row - again, copy/paste one of them and modify it:

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

Any items you don't want to be a link, use the &categoryFoldersTpl property.

Name of the chunk containing the template for category folders. Category folders are determined by setting the template to blank or by setting the link attributes field to rel="category".

This should at least get you very close to what you need. Study the tables with the properties carefully.

https://rtfm.modx.com/extras/revo/wayfinder

[ed. note: sottwell last edited this post 10 years, 3 months ago.]

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

16 Posts

jerontopaz Reply #3, 10 years, 3 months ago

Thanks for your response sir..... Please I don't get what you mean by the various tpl properties. I am new to modx

16 Posts

jerontopaz Reply #4, 10 years, 3 months ago

PLEASE HELP ME CHECK WHAT I AM DOING WRONG ... INCLUDED MY CHUNK AND WAYFINDER CODES BELOW.

HTML CODE

 <nav class="navbar navbar-default navbar-static-top navbar3">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" href="index.html"><img src="images/logo/1.png" height="52px" alt=""></a>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main_nav" aria-expanded="false">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!--
                <a href="book-appointment.html" class="navbar-toggle hidden-xs hidden-sm" data-toggle="modal" data-target="#appointmefnt_form_pop">book appointment</a>
                -->
            </div>
            
            <!-- Collect the nav links, forms, and other content for toggling -->            
            <div class="collapse navbar-collapse" id="main_nav">                
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">about</a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="about.html">Overview</a></li>
                            <li><a href="mission.html">Mission & Vision</a></li>
                            <li><a href="message.html">A message from the CEO</a></li>
                            <li><a href="team.html">Our Team</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">services</a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="clinics.html">Clinics</a></li>
                            <li><a href="preemployment.html">Pre-employment Services</a></li>
                            <li><a href="nursing.html">Home Nursing Care</a></li>
                            <li><a href="hearse.html">Hearse Services</a></li>
                            <li><a href="ambulance.html">Ambulance evacuation and Emergency medical support</a></li>
                            <li><a href="#">Medical outsourcing and onsite clinic services</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Patient guide</a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="patient.html">Guide</a></li>
                            <li><a href="know-your-rights.html">Know Your Rights</a></li>
                            <li><a href="library.html">library</a></li>
                        </ul>
                    </li>
                    <li><a href="faq.html">FAQ</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Events</a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="outreach.html">Outreach calendar</a></li>
                        </ul>
                    </li>
                    <li><a href="contact.html">contact</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container -->
    </nav>

CHUNKS

<!-- outertpl -->

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

<!-- parentRowTpl -->

<li [[+wf.classes]]>
<a href="[[+wf.link]]" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">[[+wf.linktext]]</a>
[[+wf.wrapper]]
</li>

<!-- innerTpl -->

<ul [[+wf.classes]] role="menu">
    [[+wf.wrapper]]
</ul>

<!-- innerRowTpl -->
<li><a href="[[+wf.link]]">[[+wf.linktext]]</a></li>

WAYFINDER CODE

[[Wayfinder?
&startId=`0`
&outerClass=`nav navbar-nav navbar-right`
&parentClass=`dropdown`
&innerClass=`dropdown-menu`
&outerTpl=`outerTpl`
&innerTpl=`innerTpl`
&parentRowTpl=`parentRowTpl`
&innerRowTpl=`innerRowTpl`
]]

[ed. note: iusemodx last edited this post 10 years, 3 months ago.]

953 Posts

iusemodx Reply #5, 10 years, 3 months ago

@jerontopaz

Please don't start multiple threads for one and the same problem - that won't get your problem sorted faster

As you can see I have moved your code from your second thread to hear and modified it for readability

Also: If you are having so many problems with this and it is so urgent to get it sorted, why don't you ask for commercial help

Download the latest Evo release
Report an issue about Evo
Read the Evo documentation

16 Posts

jerontopaz Reply #6, 10 years, 3 months ago

Quote from: jerontopaz at Jun 30, 2016, 02:53 AM

PLEASE HELP ME CHECK WHAT I AM DOING WRONG ... INCLUDED MY CHUNK AND WAYFINDER CODES BELOW.

HTML CODE

 <nav class="navbar navbar-default navbar-static-top navbar3">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" href="index.html"><img src="images/logo/1.png" height="52px" alt=""></a>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main_nav" aria-expanded="false">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!--
                <a href="book-appointment.html" class="navbar-toggle hidden-xs hidden-sm" data-toggle="modal" data-target="#appointmefnt_form_pop">book appointment</a>
                -->
            </div>
            
            <!-- Collect the nav links, forms, and other content for toggling -->            
            <div class="collapse navbar-collapse" id="main_nav">                
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">about</a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="about.html">Overview</a></li>
                            <li><a href="mission.html">Mission & Vision</a></li>
                            <li><a href="message.html">A message from the CEO</a></li>
                            <li><a href="team.html">Our Team</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">services</a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="clinics.html">Clinics</a></li>
                            <li><a href="preemployment.html">Pre-employment Services</a></li>
                            <li><a href="nursing.html">Home Nursing Care</a></li>
                            <li><a href="hearse.html">Hearse Services</a></li>
                            <li><a href="ambulance.html">Ambulance evacuation and Emergency medical support</a></li>
                            <li><a href="#">Medical outsourcing and onsite clinic services</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Patient guide</a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="patient.html">Guide</a></li>
                            <li><a href="know-your-rights.html">Know Your Rights</a></li>
                            <li><a href="library.html">library</a></li>
                        </ul>
                    </li>
                    <li><a href="faq.html">FAQ</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Events</a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="outreach.html">Outreach calendar</a></li>
                        </ul>
                    </li>
                    <li><a href="contact.html">contact</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container -->
    </nav>

CHUNKS

<!-- outertpl -->

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

<!-- parentRowTpl -->

<li [[+wf.classes]]="">
<a href="[[+wf.link]]" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">[[+wf.linktext]]</a>
[[+wf.wrapper]]
</li>

<!-- innerTpl -->

<ul [[+wf.classes]]="" role="menu">
    [[+wf.wrapper]]
</ul>

<!-- innerRowTpl -->
<li><a href="[[+wf.link]]">[[+wf.linktext]]</a></li>

WAYFINDER CODE

[[Wayfinder?
&startId=`0`
&outerClass=`nav navbar-nav navbar-right`
&parentClass=`dropdown`
&innerClass=`dropdown-menu`
&outerTpl=`outerTpl`
&innerTpl=`innerTpl`
&parentRowTpl=`parentRowTpl`
&innerRowTpl=`innerRowTpl`
]]

Please kindly assist

☆ A M B ☆
24,524 Posts

sottwell Reply #7, 10 years, 3 months ago

1. You don't need an outer tpl. The outerClass property will insert the necessary classnames into the outer UL element.

2. The [[+wf.classes]] does not take the "=", just the tag is all that's needed.

Not

<li [[+wf.classes]]="">

Just

<li [[+wf.classes]]>

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

16 Posts

jerontopaz Reply #8, 10 years, 3 months ago

thanks but doesnt still work ......... sad

☆ A M B ☆
24,524 Posts

sottwell Reply #9, 10 years, 3 months ago

Can you provide a link?

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

16 Posts

jerontopaz Reply #10, 10 years, 3 months ago

please find the link and code as used below

http://162.144.94.120/~avonmedical/

 <nav class="navbar navbar-default navbar-static-top navbar3">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" href="index.html"><img src="images/logo/1.png" height="52px" alt=""></a>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main_nav" aria-expanded="false">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!--
                <a href="book-appointment.html" class="navbar-toggle hidden-xs hidden-sm" data-toggle="modal" data-target="#appointmefnt_form_pop">book appointment</a>
                -->
            </div>
            
            <!-- Collect the nav links, forms, and other content for toggling -->            
            <div class="collapse navbar-collapse" id="main_nav">                
               [[Wayfinder?
                 &startId=`0`
                 &outerClass=`nav navbar-nav navbar-right`
                 &parentClass=`dropdown`
                 &innerClass=`dropdown-menu`
                 &innerTpl=`innerTpl`
                 &parentRowTpl=`parentRowTpl`
                 &innerRowTpl=`innerRowTpl`
                 ]]
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container -->
    </nav>

innerRowTpl

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

innerTpl

<ul [[+wf.classes]] role="menu">
    [[+wf.wrapper]]
</ul>

parentRowTpl

<li [[+wf.classes]]>
<a href="[[+wf.link]]" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">[[+wf.linktext]]</a>
[[+wf.wrapper]]
</li>

[ed. note: jerontopaz last edited this post 10 years, 3 months ago.]

Answered convert menu to wayfinder (urgent attn:)