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.