Converting CSSUI cattree level- to ul li ul li

[lesliekirk]

I'm wanting to convert the default CSSUI cattree code which uses a dynamic level-&mvte:cattree_category:level; to determine the sub-cat style for the cattree to something that uses <ul><li> and <ul><li><ul><li> for subcats. Does anyone have the conversion for this?

<mvt:foreach array="cattree_categories" iterator="cattree_category">
	<mvt:if expr="l.settings:cattree_category:code EQ g.Category_Code">
	<div class="level-&mvte:cattree_category:level; active">
	<mvt:else>
	<div class="level-&mvte:cattree_category:level;">
	</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>
	</div>
</mvt:foreach>

Please, please, please...

Leslie

[Mark Hood]

Re: Converting CSSUI cattree level- to ul li ul li

<h2>Categories</h2>
<nav id="category-tree">
    <ul>
        <mvt:foreach array="cattree_categories" iterator="cattree_category">
            <mvt:if expr="l.settings:cattree_category:code EQ g.Category_Code">
                <li class="level-&mvte:cattree_category:level; active">
                    <a href="&mvte:cattree_category:link;" title="&mvte:cattree_category:name;">
                        <mvt:if expr="l.settings:cattree_category:image">
      <img src="&mvte:cattree_category:image;" alt="&mvte:cattree_category:name;" title="&mvte:cattree_category:name;" />
                        <mvt:else>
                            &mvte:cattree_category:name;
                        </mvt:if>
                    </a>
                </li>
            <mvt:else>
                <li class="level-&mvte:cattree_category:level;">
                    <a href="&mvte:cattree_category:link;" title="&mvte:cattree_category:name;">
                        <mvt:if expr="l.settings:cattree_category:image">
     <img src="&mvte:cattree_category:image;" alt="&mvte:cattree_category:name;" title="&mvte:cattree_category:name;" />
                        <mvt:else>
                            &mvte:cattree_category:name;
                        </mvt:if>
                    </a>
                </li>
            </mvt:if>
        </mvt:foreach>
    </ul>
</nav>

[Mark Hood]

Re: Converting CSSUI cattree level- to ul li ul li

<h2>Categories</h2><nav id="category-tree">
	<ul>
		<mvt:foreach array="cattree_categories" iterator="cattree_category">
			<mvt:if expr="l.settings:cattree_category:code EQ g.Category_Code">
				<li class="level-&mvte:cattree_category:level; active">
<a href="&mvte:cattree_category:link;" title="&mvte:cattree_category:name;">&mvte:cattree_category:name;</a>
				</li>
			<mvt:else>
				<li class="level-&mvte:cattree_category:level;">
<a href="&mvte:cattree_category:link;" title="&mvte:cattree_category:name;">&mvte:cattree_category:name;</a>
				</li>
			</mvt:if>
		</mvt:foreach>
	</ul>
</nav>

[lesliekirk]

Re: Converting CSSUI cattree level- to ul li ul li

You example still uses the "level" - I've tried that and it doesn't do what I'm look for. I need the sub-cat to use the <ul>

<nav class="four columns interior"> 	
<ul class="heirarchy">
 	<li><a href="link-1.html">cat 1</a></li> 
	<li class="current"><a href="link-2.html">cat 2</a> 
				<ul><li class="current"><a href="link-a.html">subcat of 2</a></li>
                                        <li><a href="link-b.html">subcat of 2</a></li>
                 			<li><a href="link-c.html">subcat of 2</a></li>
 		</ul> 			 	</li> 	
<li><a href="link-3.html">cat 3</a></li> </ul>

Thanks though - Leslie

[Bruce - PhosphorMedia]

Re: Converting CSSUI cattree level- to ul li ul li

You have to track cattree_category:level. Assign that variable to another variable called Last_level, and then before that assign do IF Level GT Last_level, you need to nest the next group of catogories, (i.e., write out </ul><ul>).

(Caution: still on first cup of coffee).

[lesliekirk]

Re: Converting CSSUI cattree level- to ul li ul li

Wish I could just use the code from an MMUI store - but CSSUI doesn't like it...

[lesliekirk]

Re: Converting CSSUI cattree level- to ul li ul li

What in this code doesn't CSSUI like?

<mvt:if expr="l.settings:nextcount GT 0">
<table border=0 cellpadding="0" cellspacing="0">
<tr>
<mvt:if expr="l.settings:cattree:stack GT 0">
<td width="1%"><img src="graphics/en-US/admin/blank.gif" height="1" width="8" border=0></td>
</mvt:if>
<td nowrap>
<mvt:item name="category_tree" param="nextlevel">

<mvt:foreach iterator="cattree_category" array="categories">
<font face="Arial, Helvetica" size="-2">
<mvt:if expr="l.settings:cattree_category:code EQ g.Category_code">
<mvt:if expr="NOT l.settings:cattree_category:image">
<b>&mvt:cattree_category:name;</b>
<mvt:else>
<img src="&mvte:cattree_category:image;" alt="&mvte:cattree_category:name;" border=0>
</mvt:if>
<mvt:else>
<mvt:if expr="l.settings:cattree_category:image">
<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;" border=0></a>
<mvt:else>
<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>
</mvt:if>
</font>
<br>
<mvt:if expr="l.settings:cattree_category:id EQ l.settings:cattreenext">
<mvt:item name="category_tree"/>
</mvt:if>
</mvt:foreach>
</mvt:item>
</td></tr>
</table>
</mvt:if>

it's the code I was hoping to use as part of the <ul><li><ul><li> but there's something it doesn't like.

[Brennan]

Re: Converting CSSUI cattree level- to ul li ul li

The bottom of this post has a ul/li version of the CSSUI cat tree using toolkit. The default CSSUI cat tree does not give us exactly what we need to do this so we usually end up going a toolkit version. This one goes three levels deep but you could add more if needed.

http://www.mivamerchant.com/blog/how-to-style-the-miva-merchant-category-tree-in-cssui

[lesliekirk]

Re: Converting CSSUI cattree level- to ul li ul li

Thanks Brennan, but it seems that one keeps the tree open all the time. I'm trying to only have the sub-cat open when the parent is clicked. Or am I missing something?

[lesliekirk]

Re: Converting CSSUI cattree level- to ul li ul li

Also, I need to be able to have an "active" link using the class "current". The default CSSUI cattree lets me set it:

<mvt:foreach array="cattree_categories" iterator="cattree_category">
    <mvt:if expr="l.settings:cattree_category:code EQ g.Category_Code">
<li class="current">
    <mvt:else>
    <li>
    </mvt:if>
        <a href="&mvte:cattree_category:link;">&mvte:cattree_category:name;</a>
    </li>
</mvt:foreach>

but there isn't any way to add the subcat <ul><li>