Easy Add "Shop All Categories" to Primary Navigation in Miva Merchant

Do you really want to manually create a navigation item with all of your Miva Merchant categories?

Learn how to automatically add the category tree to your primary navigation menu in Miva Merchant. Includes all required code and an optional method to skip categories via a category custom field.

by Scot Ranney

This tutorial is for stock Shadows CSS framework developed by Miva for Miva Merchant. This will work for customized frameworks although some item names in the store admin might be different.

Miva Merchant Category Tree

The category tree in Miva Merchant is a tree style breakdown of your categories that follows the parent-child relationship set up in the category management section of your Miva Merchant administration. You see this in the sidebar of some pages of your store, but it's not present in the primary navigation bar.

The standard method of adding "all categories" to your navigation bar is tedious, and if you have a lot of categories and complicated category tree incredibly time consuming. Instead of building the "All Categories" menu item by hand, do it the easy way: automatically. The following method also automatically mirrors any changes you make to your category tree.

Take a look: Esentia Security Products asked me to put something like this in their primary nav bar. The "Shop All Categories" item is automatically created based on the category tree settings, not navigation item settings. The rest of the primary nav bar is basic navigation items, easily modified like any other navigation set in Miva Merchant.

Step 1

Optional Custom Field - Skip a Category

There may be times you want a particular category skipped in the "Shop All Categories" navigation item. The code below supports a custom category field checkbox that can be used for this. Create a custom field by going to UTILITIES > CUSTOM FIELDS

CODE: all_categories_filter
NAME: All Categories: Filter the all categories primary nav dropdown
GROUP: default
FIELDTYPE: Checkbox
TYPE: Category

Step 2

Open the primary navigation bar template for editing by clicking on User Interface > Theme Components > Navigation Sets >Primary Site Navigation Bar

Step 3

Update the Primary Navigation Template. The code we are adding basically mimics the code already in the template, except instead of getting the category tree from a navigation set, we load it from the store's category structure.

Find the following two lines of code. In a stock primary nav bar template they will be around line 11.

<div class="x-transfigure-navigation__content">
<ul class="c-navigation__row x-transfigure-navigation__row">

Insert the following code after the <ul class="c-navigation__row x-transfigure-navigation__row"> line. This will load and display all categories based on how categories have been set up in the stock category tree that shows up on some pages.

<mvt:comment>
#
# ALL CATEGORIES - auto create based on category heirarchy in store. Use the "filter primary nav" category custom field to keep a category out of this list
#
</mvt:comment>

<mvt:do file="g.Module_Library_DB" name="l.success" value="CategoryList_Load_Parent(l.nulll, l.settings:pcats)" />
<mvt:assign name="l.settings:has:children" value="'has-child-menu' $ asciichar(34) $ ' data-hook=' $ asciichar(34) $ 'has-drop-down has-child-menu'"/>
<mvt:assign name="l.settings:show:child" value="'<span class=' $ asciichar(34) $ 'c-navigation__link-carat' $ asciichar(34) $ '><span class=' $ asciichar(34) $ 'u-icon-chevron-right' $ asciichar(34) $ ' aria-hidden=' $ asciichar(34) $ 'true' $ asciichar(34) $ ' style=' $ asciichar(34) $ 'font-weight: bold; position: relative; top: -1px;' $ asciichar(34) $ '></span></span>'"/>

<li class="c-navigation__list &mvt:has:children;">
<a class="c-navigation__link" href="/our-catalog.html"><b>Shop By Category&mvt:show:child;</b></a>

<ul class="c-navigation__row is-hidden" >
    <li class="c-navigation__list u-hidden--l" data-hook="show-previous-menu">
        <span class="c-navigation__link"><span class="u-icon-chevron-left" aria-hidden="true"> </span><span class="o-layout--grow">Main Menu</span></span>
    </li>

    <mvt:foreach iterator="cat" array="pcats">
        <mvt:comment> ### skip category if set in the custom field ### </mvt:comment>
        <mvt:do file="g.Module_Root $ '/modules/util/customfld.mvc'" name="l.success" value="Read_Category_Code(l.settings:module, l.nulll, l.settings:cat:code, 'all_categories_filter', l.settings:all_categories_filter)" />
        <mvt:if expr="l.settings:all_categories_filter EQ 1 OR l.settings:cat:active NE 1">
            <mvt:foreachcontinue />
        </mvt:if>
        <mvt:do file="g.Module_Feature_URI_DB" name="l.success" value="URI_Load_Category_Canonical(l.settings:cat:id, l.settings:cat:uridata)" />
        <mvt:assign name="l.settings:children" value="''" />
        <mvt:do file="g.Module_Root $ '/modules/component/cmp-cssui-cattree.mvc'" name="l.success" value="CategoryList_Load_Tree(l.settings:cat:id, l.settings:children, 2, l.settings:urisettings)" />
        <mvt:if expr="NOT ISNULL l.settings:children">
            <mvt:assign name="l.settings:has:children" value="'has-child-menu' $ asciichar(34) $ ' data-hook=' $ asciichar(34) $ 'has-drop-down has-child-menu'"/>
            <mvt:assign name="l.settings:show:child" value="'<span class=' $ asciichar(34) $ 'c-navigation__link-carat' $ asciichar(34) $ '><span class=' $ asciichar(34) $ 'u-icon-chevron-right' $ asciichar(34) $ ' aria-hidden=' $ asciichar(34) $ 'true' $ asciichar(34) $ ' style=' $ asciichar(34) $ 'font-weight: bold; position: relative; top: -1px;' $ asciichar(34) $ '></span></span>'"/>
        <mvt:else>
            <mvt:assign name="l.settings:has:children" value="''"/>
            <mvt:assign name="l.settings:show:child" value="''"/>
        </mvt:if>
        <li class="c-navigation__list &mvt:has:children;">
            <a class="c-navigation__link" href="&mvte:cat:uridata:uri;" target="&mvt:cat:link_targ;">&mvt:cat:name;&mvt:show:child;</a>
            <mvt:if expr="NOT ISNULL l.settings:children">
                <ul class="c-navigation__row is-hidden">
                    <mvt:assign name="l.settings:has:children" value="''"/>
                    <li class="c-navigation__list u-hidden--l" data-hook="show-previous-menu">
                        <span class="c-navigation__link"><span class="u-icon-chevron-left" aria-hidden="true"> </span><span class="o-layout--grow">Main Menu</span></span>
                    </li>

                    <mvt:foreach iterator="child" array="children">
                        <mvt:assign name="l.settings:grandchildren" value="''" />
                        <mvt:do file="g.Module_Root $ '/modules/component/cmp-cssui-cattree.mvc'" name="l.success" value="CategoryList_Load_Tree(l.settings:child:id, l.settings:grandchildren, 2, l.settings:urisettings)" />
                        <mvt:if expr="NOT ISNULL l.settings:grandchildren">
                            <mvt:assign name="l.settings:has:children" value="'has-child-menu' $ asciichar(34) $ ' data-hook=' $ asciichar(34) $ 'has-child-menu'"/>
                            <mvt:assign name="l.settings:show:child" value="'<span class=' $ asciichar(34) $ 'c-navigation__link-carat' $ asciichar(34) $ '><span class=' $ asciichar(34) $ 'u-icon-chevron-right' $ asciichar(34) $ '></span></span>'"/>
                        <mvt:else>
                            <mvt:assign name="l.settings:has:children" value="''"/>
                            <mvt:assign name="l.settings:show:child" value="''"/>
                        </mvt:if>
                        <li class="c-navigation__list &mvt:has:children;">
                            <mvt:do file="g.Module_Feature_URI_DB" name="l.success" value="URI_Load_Category_Canonical(l.settings:child:id, l.settings:child:uridata)" />
                            <a class="c-navigation__link" href="&mvte:child:uridata:uri;">&mvt:child:name;&mvt:show:child;</a>
                            <mvt:if expr="NOT ISNULL l.settings:grandchildren">
                                <ul class="c-navigation__row is-hidden">
                                    <li class="c-navigation__list u-hidden--l" data-hook="show-previous-menu">
                                        <span class="c-navigation__link"><span class="u-icon-chevron-left" aria-hidden="true"> </span><span class="o-layout--grow">Main Menu</span></span>
                                    </li>
                                    <mvt:foreach iterator="grandchild" array="grandchildren">
                                        <mvt:do file="g.Module_Feature_URI_DB" name="l.success" value="URI_Load_Category_Canonical(l.settings:grandchild:id, l.settings:grandchild:uridata)" />
                                        <li class="c-navigation__list">
                                            <a class="c-navigation__link" href="&mvte:grandchild:uridata:uri;">&mvt:grandchild:name;</a>
                                        </li>
                                    </mvt:foreach>
                                    <li class="c-navigation__list u-hidden--l">
                                        <a class="c-navigation__link" href="&mvte:navigationitem_level2:url;" target="&mvt:navigationitem_level2:link_targ;">View All &mvt:navigationitem_level2:name;</a>
                                    </li>
                                </ul>
                            </mvt:if>
                        </li>
                    </mvt:foreach>

                    <li class="c-navigation__list u-hidden--l">
                        <a class="c-navigation__link" href="&mvte:navigationitem:url;" target="&mvt:navigationitem:link_targ;">View All &mvt:navigationitem:name;</a>
                    </li>
                </ul>
            </mvt:if>
        </li>
    </mvt:foreach>

    <li class="c-navigation__list u-hidden--l">
        <a class="c-navigation__link" href="&mvte:navigationitem:link;">View All &mvt:navigationitem:name;</a>
    </li>
</ul>
</li>

<mvt:comment>
#
# END ALL CATEGORIES
#
</mvt:comment>

That's all there is to it.