Miva Merchant Quick Tip: Styling Your Category Tree

Styling the Miva Merchant Category Tree

There have been several posts on the forums lately from people looking to style their category trees. Many of them need the tree to be in an unordered list format in order to implement a flyout or dropdown menu of some sort.

There are numerous methods available for creating accessible, cross-browser compatible flyout or dropdown menus, so I’ll leave it to you to search out the one that works best for your needs. What I will do here, however, is to provide you with the code you need for your category tree to create those unordered lists from your categories and subcategories.

The tree code below does not contain the conditional that removes the link from the current category — I’ve always thought that was a bit nonsensical. It does, however, include a css class that will allow you to highlight the current category in the list, making your Miva Merchant site more user friendly.

Some of the lines in the code below are pretty long — that’s just because I hate seeing “orphaned” <li> tags on their own line in the source code. If you need to break it out to make it more readable for yourself, by all means do so.

<mvt:if expr="l.settings:cattree:stack EQ 0">
  <mvt:item name="category_tree" param="cattree_header" />
</mvt:if>

<mvt:if expr="l.settings:nextcount GT 0">
  <ul id="catlevel&mvt:cattree:stack;">
    <mvt:item name="category_tree" param="nextlevel">
      <mvt:foreach iterator="cattree_category" array="categories">
          <mvt:if expr="l.settings:cattree_category:image">
            <li><a href="&mvt:global:sessionurl;Screen=CTGY&Store_Code=&mvta:store:code;&Category_Code=&mvta:cattree_category:code;"><img src="&mvte:cattree_category:image;" alt="&mvte:cattree_category:name;"></a><mvt:if expr="l.settings:cattree_category:id NE l.settings:cattreenext"></li></mvt:if>
          <mvt:else>
            <mvt:if expr="l.settings:cattree_category:code EQ g.Category_code">
		<li class="thiscat"><a href="&mvt:global:sessionurl;Screen=CTGY&Store_Code=&mvta:store:code;&Category_Code=&mvta:cattree_category:code;">&mvt:cattree_category:name;</a><mvt:if expr="l.settings:cattree_category:id NE l.settings:cattreenext"></li></mvt:if>
	    <mvt:else>
		<li><a href="&mvt:global:sessionurl;Screen=CTGY&Store_Code=&mvta:store:code;&Category_Code=&mvta:cattree_category:code;">&mvt:cattree_category:name;</a><mvt:if expr="l.settings:cattree_category:id NE l.settings:cattreenext"></li></mvt:if>
	    </mvt:if>
          </mvt:if>
          <mvt:if expr="l.settings:cattree_category:id EQ l.settings:cattreenext">
		<mvt:item name="category_tree"/>
		</li>
          </mvt:if>
      </mvt:foreach>
    </mvt:item>
  </ul>
</mvt:if>

<mvt:if expr="l.settings:cattree:stack EQ 0">
  <mvt:item name="category_tree" param="cattree_footer" />
</mvt:if>

This code will give you a tidy set of nested unordered lists that you can style in your css file using the id of the list item. When the tree is generated, each list will have an id of catlevel, with a number appended to it indicating which level of the category tree is being displayed (i.e. catlevel, catlevel1, catlevel2, etc).

As an example, the code below will get you a category tree that resembles the picture at the top of this post.

ul#catlevel {
list-style-type:none;
margin-left:0;
padding-left:0;
font-weight:bold;
}

ul#catlevel li a {
display:block;
border-bottom:1px dotted #ccc;
padding:5px 3px;
margin-right:5px;
font-size:1.1em;
color:#18316b;
}

ul#catlevel1, ul#catlevel2, ul#catlevel3, ul#catlevel4 {
list-style:none;
margin:5px 0;
padding:5px 0;
}

ul#catlevel li ul li, ul#catlevel li ul ul li, ul#catlevel li ul ul ul li{
padding:2px 0 2px 5px;
}

ul#catlevel li ul a, ul#catlevel li ul ul a, ul#catlevel li ul ul ul a {
border:none;
padding:3px 5px;
}

ul#catlevel1 {
border-bottom:1px dotted #ccc
}

li.thiscat a {
color: #cc0000;
}

For those users using the new CSSUI version of Miva Merchant 5.5, you’ll need to use a different set of code for your creating your list. I’ll be honest, this code below hasn’t been tested (the part I’m not positive on is the creation of the nested list if you’re in a subcategory) so don’t be afraid to let me know if it doesn’t work, and we can tweak it.

<ul id="category-tree">
<mvt:foreach array="cattree_categories" iterator="cattree_category">

	<mvt:if expr="((l.settings:cattree_category:level NE 1) AND (pos1 EQ 1))">
		<ul class="ul-level-&mvte:cattree_category:level;">
		<mvt:if expr="l.settings:cattree_category:code EQ g.Category_Code">
		<li class="level-&mvte:cattree_category:level; active">
		<mvt:else>
		<li class="level-&mvte:cattree_category:level;">
		</mvt:if>
	<mvt:else>
		<mvt:if expr="l.settings:cattree_category:code EQ g.Category_Code">
		<li class="level-&mvte:cattree_category:level; active">
		<mvt:else>
		<li class="level-&mvte:cattree_category:level;">
		</mvt:if>
	</mvt:if>
			<a href="&mvte:cattree_category:link;">
			<mvt:if expr="l.settings:cattree_category:image">
			<img src="&mvte:cattree_category:image;" alt="&mvte:cattree_category:name;" />
			<mvt:else>
			&mvte:cattree_category:name;
			</mvt:if>
			</a>
		</li>
	<mvt:if expr="((l.settings:cattree_category:level NE 1) AND (pos1 EQ 1))">
		</ul>
	</mvt:if>
</mvt:foreach>
</ul>
Be Sociable, Share!

Tags: , , ,

3 Responses to “Miva Merchant Quick Tip: Styling Your Category Tree”

  1. Karen Grupe says:

    I would like to use this code but what file(s) or pages in Miva do I alter? I only find an “Item” for the Cattree and I can’t find where to edit it. Your help would be very appreciated!

  2. Tiny Queen says:

    Hi Karen,

    You will find the category tree template if you click on your store name, and then on your Category Tree Template tab on the right hand side of the screen. You will need to be certain that you are in Template mode to add the code. A little tip: there is a bug in Miva that causes problems if you have any errors in your template code when you first set it up. To avoid this bug, click to switch to Template mode, and then hit Update without making any changes. Once you’ve got the Template mode successfully added, you can edit as you please.

  3. tom says:

    great post. can we see it in action?

Leave a Reply

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>