X-Cart multiple level category menu

In order to create X-Cart multiple level category menu similar to the one you can find here (try a few levels deeper and you will see how good it is), you just need to follow the simple instructions below.

First, you should modify X-Cart default category menu template (skin1/customer/categories.tpl) and include our new tree instead of the default flat category system, here is the code:

{capture name=menu}
{select_categories}
<div id="nav">
{include file='customer/categories_tree.tpl'}
</div>
{/capture}
{include file="customer/menu_dialog.tpl" title=$lng.lbl_categories content=$smarty.capture.menu}

Then you should create a skin1/customer/categories_tree.tpl template with the following content:

{if $categories}
<dl>
{foreach from=$categories item=c}
{if $c.level eq 0}<dt>{else}<dd>{/if}
    <a href="home.php?cat={$c.categoryid}"{if $c.is_selected} class="current"{/if}>{$c.category}</a>
{if $c.is_selected}
{include file='customer/categories_tree.tpl' categories=$c.subcats}
{/if}
{if $c.parentid eq 0}</dt>{else}</dd>{/if}
{/foreach}
</dl>
{/if}

And a new php file that would prepare categories for this new menu, the file name would be include/templater/plugins/function.select_categories.php, and it contains the following lines:

<?php
function func_build_category_tree($tree, $parentid, $current_cat, $dpl = 0) {
    $level = array();
    $is_selected = false;
    if (is_array($tree[$parentid]))
    foreach($tree[$parentid] as $cat) {
        list($subcats, $__is_selected) = func_build_category_tree($tree, $cat['categoryid'], $current_cat, $dpl+1);
        if ($cat['categoryid'] == $current_cat) {
            $cat['is_selected'] = true;
            $is_selected = true;
        }
        else {
            $cat['is_selected'] = $__is_selected;
            $is_selected |= $__is_selected;
        }
        $cat['subcats'] = $subcats;
        $cat['level'] = $dpl;
        $level[] = $cat;
    }
    return array($level, $is_selected);
}

function smarty_function_select_categories($params, &$smarty) {
    global $sql_tbl;

    $cats_tree = func_query_hash("select * from $sql_tbl[categories] WHERE avail='Y' order by order_by", 'parentid');  
    list($categories, $__tmp) = func_build_category_tree($cats_tree, 0, $smarty->_tpl_vars['cat']);
    $smarty->assign("categories", $categories);
}
?>

Now as a result we have a loaded working menu, however we need to specify some css styles also. Here is the required minimal css, which can be inserted into the skin1/skin1.css file (or skin1/main.css in the latest versions):

#nav a {
	display: block;
	margin: 0;
	text-align: left;
	text-decoration: none;
}

#nav dl, #nav dt {
	margin: 0;
	padding: 0;
	position: relative; 
}

#nav dl dd {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
#nav dl dl {
    margin-left: 15px;
}
#nav dl a.current,
#nav dl a.current:hover {
	font-weight: bold;
	text-decoration:underline;
}

That's all what is required to achieve our goal.

If it's required to design/style each category level separately, css constructions will be pretty simple too. For the first level that would be:

#nav dl dt {
 // Here is your code for the first level tag
}
#nav dl dt a {
 // Here is your code for the first level link
}

The code for the second level is the following:

#nav dl dd {
 // Here is your code for the second level tag
}
#nav dl dd a {
 // Here is your code for the second level link
}

For each next level you should add one more “dl” tag, so there will be 2 dl tags for the third level, e.g.:

#nav dl dl dd {
 // Here is your code for the third level tag
}
#nav dl dl dd a {
 // Here is your code for the third level link
}

Should you have any questions feel free to contact us for assistance. We will be glad to help you.

http://www.gemaffair.com/

http://petsuniverse.co.uk/