Home Communication board WiKi Contact us

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}
<div id="nav">
{include file='customer/categories_tree.tpl'}
{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}
{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 $c.parentid eq 0}</dt>{else}</dd>{/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:

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;

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

Additional css styling

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.


Home About us Privacy statement Terms & Conditions Refund policy © 2007–2019 ArsCommunity