Sub-categories in the All Products category nav bar drop down

[lesliekirk]

I'd like to dynamically include the sub-categories in the All Products drop down in the nav bar. I'm wanting to have it dynamically use a dropdown-submenu class, the nested <ul><li> and the javascript:void(0); for the parent category.

Is the Toolkit (or Toolbelt) the only way to accomplish this?


On a side note - what's the status on the proposed developers code repository?

Leslie

[Bruce - PhosphorMedia]

Re: Sub-categories in the All Products category nav bar drop down

I'd say outside of a custom module, yes...you'd have to use ToolKelts. Just fine your favorite fly-out menu and wrap the cat listing foreaches with the <li></li>

I could probably get you a simple custom module with that generates the raw HTML, but you'd need to make sure your favorite fly-out uses the same unordered list indenting. (Most seem too--and interestingly enough--those are not technically correct mark up--oh well.

[Bruce - PhosphorMedia]

Re: Sub-categories in the All Products category nav bar drop down

Oh, as for code repository, you could start a forum thread...not ideal, but it might get stuff started. Perhaps make the first post a "here's the format"

For example,

Title: <-- What the code DOES [Add key words into title for easy searching]
--------------------
Setup: What is needed (modules, javascript, other type resources)
Link to Sample:
Here's the Code:

[lesliekirk]

Re: Sub-categories in the All Products category nav bar drop down

Oh, as for code repository, you could start a forum thread...not ideal, but it might get stuff started. Perhaps make the first post a "here's the format"

For example,

Title: <-- What the code DOES [Add key words into title for easy searching]
--------------------
Setup: What is needed (modules, javascript, other type resources)
Link to Sample:
Here's the Code:

It was something that was discussed at the conference, but I suspect trying to get MM9 out the door has pushed it back a bit.

[Rick Wilson]

Re: Sub-categories in the All Products category nav bar drop down

On a side note - what's the status on the proposed developers code repository?

I'm not sure 9 itself has pushed that back as this is a Brennan project. But the new App store and Ready Themes (which are 9 Adjacent) have definitely impacted this project. I'll ask Brennan to chime in.

[Brennan]

Re: Sub-categories in the All Products category nav bar drop down

When version 9 ships, we have all new developer training which is covers all the new aspects of the template language in detail (mvt:assign, mvt:eval, custom fields, among many others topics). There are 53 new videos in all. Most videos have code samples and a link to technical documentation where applicable. This is by far the best and most robust documentation and training material we have ever had for Miva's template language.

Phase 2 of this will be a Stack Overflow type Q/A site as well as a repository of code samples. Expect these shortly after launch.

[lesliekirk]

Re: Sub-categories in the All Products category nav bar drop down

Thanks Brennan for the update. Now back to my original question - I've got the HTML/CSS/javascript needed for the menu, I'm just trying to figure out how to get the correct parent/subcat combination. Guess I'll keep dinking around with the Toolkit. I seem to recall hearing something about a Mega Menu coming out with MM9 or is that just going to be part of these Ready Themes?

On a side note for the current Bootstrap dropdown - would you believe that I just noticed that it displays the sub-cats in the drop down when you are on the parent category? Not sure I like it that way, but I know "I" wouldn't want it to display all the categories at once.

[Brennan]

Re: Sub-categories in the All Products category nav bar drop down

Not sure if this is what you are looking for, but here is some tookit code which will print the parent categories along with 2 levels of sub-categories in a nested ul /li list.

<!-- Begin Flyout Cattree -->
<nav id="category-tree">
    <mvt:item name="toolkit" param="parentcat|pccount" />
    <ul class="dropdown flyout">


    <mvt:foreach iterator="parent_category" array="parent_categories">
        <mvt:if expr="pos1 EQ 1">
            <li class="first">
        <mvt:else>
            <li>
        </mvt:if>
        <a href="/category/&mvte:parent_category:code;.html" title="&mvte:parent_category:name;">&mvte:parent_category:name;</a>
    
        <mvt:item name="toolkit" param="subcat|ccount|l.all_settings:parent_category:code" />
        <mvt:if expr="ccount GT 0">
            <ul class="sub-menu">


            <mvt:foreach iterator="sub_category" array="sub_categories">
                <li><a href="/category/&mvte:sub_category:code;.html" title="&mvte:sub_category:name;">&mvte:sub_category:name;</a>
                    <mvt:item name="toolkit" param="subcat2|ccount2|l.all_settings:sub_category:code" />
                    <mvt:if expr="ccount2 GT 0">
                        <ul class="sub-menu">


                        <mvt:foreach iterator="sub_category2" array="sub_categories2">
                            <li><a href="/category/&mvte:sub_category2:code;.html" title="&mvte:sub_category2:name;">&mvte:sub_category2:name;</a></li>
                        </mvt:foreach>


                        </ul>
                    </mvt:if>
                </li>
            </mvt:foreach>


            </ul>
        </mvt:if>
        </li>
    </mvt:foreach>
    
    </ul>
</nav>
<!-- End Flyout Cattree -->

Ready themes does come with 4 built in menu types. Its navigation set feature will output up to 3 levels of parent/sub categories as a ul/li list, very similar to above. We then provide 4 built in CSS styles which style the menu to be a drop down menu, flyout menu, single column menu, or a mega menu. The styles are very basic and will need to be customized to the look and feel of your store, but you should be able to get any of these menu types working fairly quickly using ReadyThemes with a little css customization.

[lesliekirk]

Re: Sub-categories in the All Products category nav bar drop down

Oh ta-freaking-da!

For the fly-out that I'm using I had to get the sub-cats just in the right "place":

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">All Products <b class="caret"></b></a>          <mvt:item name="toolkit" param="parentcat|pccount" />
          <ul class="dropdown-menu">
            <mvt:foreach iterator="parent_category" array="parent_categories">
              <mvt:if expr="pos1 EQ 1">
                <li><a href="/category/&mvte:parent_category:code;.html" title="&mvte:parent_category:name;">&mvte:parent_category:name;</a>
                  <mvt:else>
                <li class="dropdown-submenu"><a href="javascript:void(0);" title="&mvte:parent_category:name;">&mvte:parent_category:name;</a>
                  <mvt:item name="toolkit" param="subcat|ccount|l.all_settings:parent_category:code" />
                  <mvt:if expr="ccount GT 0">
                    <ul class="dropdown-menu">
                      <mvt:foreach iterator="sub_category" array="sub_categories">
                        <li><a href="/category/&mvte:sub_category:code;.html" title="&mvte:sub_category:name;">&mvte:sub_category:name;</a> </li>
                      </mvt:foreach>
                    </ul>
                  </mvt:if>
              </mvt:if>
            </mvt:foreach>
          </ul>
        </li>

Thanks Brennan for pushing me in the right direction.

Leslie