X-Cart forums - Need help customizing category listing

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - Need help customizing category listing (https://forum.x-cart.com/showthread.php?t=672)

CAN ANYBODY DO THIS

Does anybody know how to do this for the most current version of X-Cart?

Also need this.... TTT

Consider me interested in a 3.4.x version of this as well...

Using: http://www.dynamicdrive.com/dynamicindex1/switchmenu.htm
(slighty modified of course :))

x-cart version: 3.4.9

edit skin1/customer/categories.tpl:

Code:

{literal}

<style type="text/css">

.menutitle{

        font-weight:bold;

        background-color:#EEEEEE;

        color:#000000;

        border:1px solid #000000;

        width:160px;

        cursor:pointer;

        margin-bottom: 0px;

        padding:3px;

        margin-left: 5px;

        border-bottom:0px;

}



.bottom{

        margin-left: 5px;

        border-top:1px solid #000000;

        height:1px;

        width:168px;

        padding:0px;

        margin-bottom: 0px;

}



.sub{

        margin-bottom: 0px;

        margin-left: 5px;

        border:1px solid #000000;

        background-color:#FFFFFF;

        color:#000000;

        width:160px;

        padding:3px;

        border-bottom:0px;        

}



.menutitle:hover {

        background-color: #FFFFFF;

        color:#009F67;

        display: block;

        width: 150px;

        padding: 4px 0px;

        margin: 1px;

        TEXT-DECORATION: none;

}

</style>



<script type="text/javascript">





if (document.getElementById){ 

document.write('<style type="text/css">\n')

document.write('.sub{display: none;}\n')

document.write('</style>\n')

}



function SwitchMenu(obj){

        if(document.getElementById){

        var el = document.getElementById(obj);

        var ar = document.getElementById("masterdiv").getElementsByTagName("span"); 

                if(el.style.display != "block"){ 

                        for (var i=0; i<ar.length; i++){

                                if (ar[i].className=="sub")

                                ar[i].style.display = "none";

                        }

                        el.style.display = "block";

                }else{

                        el.style.display = "none";

                }

        }

}



</script>

{/literal}



{* Keep all menus within masterdiv *}

<div id="masterdiv">



{* loop over root category, nested loop of entire category data to match all root cats *}

{section name=cat_num loop=$categories}

<div class="menutitle" onclick="SwitchMenu('{$categories[cat_num].categoryid}')">{$categories[cat_num].category_name}</div>

<span class="sub" id="{$categories[cat_num].categoryid}">

{section name=subcat_num loop=$categories_data}

{if $categories_data[subcat_num].root_category_name == $categories[cat_num].category && $categories_data[subcat_num].category_name != $categories[cat_num].category_name}        

<li type="square">{$categories_data[subcat_num].category_name}




{/if}

{/section}

</span>

{/section}



{* bottom line *}

<div class="bottom"></div>



</div>

edit include/categories.php:

Comment out the line (just add a # in front of it):

Code:

$categories_data = func_query("select $sql_tbl[categories].*, SUBSTRING_INDEX($sql_tbl[categories].category, '\/', -1) as category_name from $sql_tbl[categories] ".($current_area=="C"?"where $sql_tbl[categories].avail='Y' $membership_condition ":"")." group by $sql_tbl[categories].categoryid order by ".($current_area=="C" ? "order_by" : "category"));

and add the following underneath it:

Code:

$categories_data = func_query("select $sql_tbl[categories].*, SUBSTRING_INDEX($sql_tbl[categories].category, '\/', -1) as category_name, SUBSTRING_INDEX($sql_tbl[categories].category, '\/', 1) as root_category_name from $sql_tbl[categories] ".($current_area=="C"?"where $sql_tbl[categories].avail='Y' $membership_condition ":"")." group by $sql_tbl[categories].categoryid order by ".($current_area=="C" ? "order_by" : "category"));

Then go down to the bottom of the file where the "Assign Smarty variables" comment is, underneath it add:

Code:

$smarty->assign("categories_data",$categories_data);

Should do the trick, Just keep in mind if you your using a root cat to list products in its not going to be shown or clickable in this menu, all your roots cats MUST have sub cats for it to work properly.

The style sheet and javascript code could be moved elsewhere to the proper places like skin1/skin.css and skin1/customer/home.tpl But I'm leaving it in categories.tpl for ease of implementing.

Also for usuability this should really be keeping up with the root cat id, and somehow triggering it once a link is clicked. So when your under a certain sub category the root category is already expanded upon page refresh. So suggestions welcome. ;)

Will this work with version 3.4.6?

The 3.4.x branch should be good, not sure about 3.3.x or the new 3.5.x :?:

Gift Certificates weirdness after Boomer's mod...

I installed Boomer's category menu mod (which works great and looks great, thanks again boomer!) a couple weeks ago. I just noticed, though, that when I go the gift certificate page (giftcert.php) the category menu writes the list of category names twice. For example if I have the categories:
Model Kits
Beads
Art Supplies

It will write:

Model Kits
Beads
Art Supplies
Model Kits
Beads
Art Supplies

The menu still works, but this is a strange annoyance. Feel free to have a look at this: https://www.kit-kraft.com/customer/giftcert.php

Anyone else have the same problem?
Thanks
- Jordan

A new problem...

I love the way Boomer's DHTML menu solution looks and functions Б─⌠ letting the customer check out the subcats without having to load a new page is cool.
However, I have been trying to find a way to modify it so that it doesn't dump all of my nested subcategories under the main category. For example, If i've got

Code:

Model Kits/Cars/Ford

               /Honda

               /Toyota

               /etc...

And you click "Model Kits" in the category menu, I want it to just show "Cars". Right now, every category that has the root_category_name of "Model Kits" is lumped into the same list of subcategories.
How do I make it so that only the first level of subcats is displayed? Is this information stored in the $subcategories array already?

Here is the relevant code from my categories.tpl:

Code:

{section name=cat_num loop=$categories}

<div class="menutitle" onclick="SwitchMenu('{$categories[cat_num].categoryid}')">{$categories[cat_num].category_name}</div>

<span class="sub" id="{$categories[cat_num].categoryid}">

{section name=subcat_num loop=$categories_data}

{if $categories_data[subcat_num].root_category_name == $categories[cat_num].category && $categories_data[subcat_num].category_name != $categories[cat_num].category_name}        

<li type="square">{$categories_data[subcat_num].category_name}




{/if}

{/section}

</span>

{/section}

thanks for your help so far!
-Jordan

After a very long search on forum i found the mod i was looking for but i am not sure can I use this mod for 4.0.11? will be grateful for reply.

Thanks

I have been trying to get this to work on the new carts with no luck. Does any one here have this working on 4.016?

THanks in advance!