Using multiple styles in Wayfinder

78 Posts

rjohnson375 Reply #1, 11 years, 7 months ago

Hello, I have a question about Wayfinder using different styles for my drop-down menu items. I have it coded so that my drop-downs have 3 styles, single-column, two-column, and three-column. My code looks something like:

<ul>
<li><a href="">Resource 1</a></li>
<li class="has-dropdown"><a href="">Resource 2</a>
  <div class="dropdown double">
    <div class="inner">
      <div class="row">
        <div class="col left">
          <ul>
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
          </ul>
        </div>
        <div class="col right">
          <ul>
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</li>

<li class="has-dropdown"><a href="">Resource 3</a>
  <div class="dropdown triple">
    <div class="inner">
      <div class="row">
        <div class="col left">
          <ul>
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
          </ul>
        </div>
        <div class="col middle">
          <ul>
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
          </ul>
        </div>
        <div class="col right">
          <ul>
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</li>
.
.
.

So, I'm having trouble figuring out how I can set my chunks to link the correct drop-down layout in Wayfinder, can someone please help with suggestions? Thank you very much.

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

☆ A M B ☆
1,780 Posts

Frogabog Reply #2, 11 years, 7 months ago

Since Wayfinder will use the same chunks for all items, you likely will need to use two Wayfinder calls. Which should work just fine, just as if you had one menu on the left, and another pushed to the right such as you find in the MODX 2.3.x manager.

Frogabog- MODX Websites in Portland Oregon
"Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
Having server issues? These guys have MODX Hosting perfected - SkyToaster

78 Posts

rjohnson375 Reply #3, 11 years, 7 months ago

Thank you @Frogabog, I think that makes sense. Originally what I had tried was setting a TV called dropdown_class, and on my documents set those as dropdown_double, dropdown_triple, etc, and then in my Wayfinder call I had &innerTpl=`[[*dropdown_class]]`, which didn't work because it would change my dropdown layout based on the landing page and not on the menu item. I'm trying your suggestion with using multiple Wayfinder instances, but I am confused about how to add that. For example, here is my main site navigation:

Home - No class
Weather - This will have 2 columns when hovered over
Beach Activities - This will have 3 columns when hovered over
Dining Out - This will have 1 columns when hovered over
Contact Info - This will have 2 columns when hovered over

Would that be something like setting my outerTpl to:

<ul>
<li>[[Wayfinder &startId=`18`]]</li>
<li class="has-dropdown">[[Wayfinder &startId=`34` &innerTpl=`dropdown_double`]]</li>
<li class="has-dropdown">[[Wayfinder &startId=`36` &innerTpl=`dropdown_triple`]]</li>
<li class="has-dropdown">[[Wayfinder &startId=`38` &innerTpl=`dropdown_single`]]</li>
<li class="has-dropdown">[[Wayfinder &startId=`39` &innerTpl=`dropdown_double`]]</li>
</ul>

Thank you.

discuss.answer

☆ A M B ☆
1,780 Posts

Frogabog Reply #4, 11 years, 7 months ago

The Wayfinder call should be outside of the line items, and actually outside of the <ul> as well, as Wayfinder will produce those for you. If the resources that populate the dropdowns are children of the top level items, you can use the &parentClass parameter which will determine if child resources exist and add the has-dropdown class if so. If not, then I would suggest putting them under the top level resources as children so that Wayfinder can automatically create your menu.

Actually now that I think about it, I would not use Wayfinder for this menu because you don't really need all that Wayfinder does in this case. GetResources or pdoResources is a much better option and can be tailored to do what you want much easier.

<ul>
[[getResources? 
&parents=`0` 
&depth=`2` 
&tpl_n1=`@INLINE <li><a href="[[~[[+id]]]]" title="[[+pagetitle]]">[[+pagetitle]]</a></li>` 
&tpl_n2=`@INLINE <li class="has-dropdown">[[$dropdown_double]]</li>` 
&tpl_n3=`dropdown_triple` 
&tpl_n4=`dropdown_single` 
&tpl_n5=`dropdown_double`
]]
</ul>

Above shows different ways to template each item, either inline with @INLINE or by chunk alone with each tpl containing the full markup for the line items as shown in the first two inline examples (tpl_n1 & tpl_n2). See http://rtfm.modx.com/extras/revo/getresources for more information and options.

[ed. note: frogabog last edited this post 11 years, 7 months ago.]

Frogabog- MODX Websites in Portland Oregon
"Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
Having server issues? These guys have MODX Hosting perfected - SkyToaster

78 Posts

rjohnson375 Reply #5, 11 years, 7 months ago

Thank you so much, getResources was the way to go, in case anyone else finds this post looking to do something similar, here is the code I used that is working:

<ul>
[[getResources? 
&parents=`0` 
&depth=`2` 
&sortby=`FIELD(id, 37,36,35,34,19 )`
&tpl_1=`@INLINE <li><a href="[[*market_id_active]]/page1" title="[[+pagetitle]]">[[+pagetitle]]</a></li>` 
&tpl_2=`@INLINE <li class="has-dropdown"><a href="[[*market_id_active]]/page2" title="[[+pagetitle]]">[[+pagetitle]]</a>
    <ul>[[$dropdown_double]]</ul>
</li>`
&tpl_3=`@INLINE <li class="has-dropdown"><a href="[[*market_id_active]]/page3" title="[[+pagetitle]]">[[+pagetitle]]</a>
    <ul>[[$dropdown_full]]</ul>
</li>` 
&tpl_4=`@INLINE <li class="has-dropdown"><a href="[[*market_id_active]]/page4" title="[[+pagetitle]]">[[+pagetitle]]</a>
    <ul>[[$dropdown_single]]</ul>
</li>` 
&tpl_5=`@INLINE <li class="has-dropdown"><a href="[[*market_id_active]]/page5" title="[[+pagetitle]]">[[+pagetitle]]</a>
    <ul>[[$dropdown_double_login]]</ul>
</li>`
]]
</ul>

Answered Using multiple styles in Wayfinder