Page 1 of 1

Animated Category List w/ nesting

Posted: Tue Dec 30, 2008 7:14 am
by PeterM

This is my first mod of Open Cart. I thought that I would share it since it seems to work very nicely. Im sure that there are better ways that it could be coded, but this method works perfectly for shops that have up to, but no more than 3 layers of category nesting. A bit of recursive improvement would fix that, but it wont work with this specific design layout.

Goal: to improve the existing categories list on the shop front using an accordion menu script found on Dynamic Drive. Purely asthetic.

Restrictions / Problems: this mod will restrict your categories to a maximum of three layers deep. Also, this mod doesn't stop the categories being created the traditional way and then interpreted, the categories are grabbed from the database in the template.

Working Demonstration: this categories section can be seen in use here:

Notes: when you see *YOUR_TEMPLATE* replace this with the template that you are using. Also, please back up everything before you make any changes.

open: root/catalog/template/*YOUR_TEMPLATE*/layout.tpl ADD TO THE HEADER

Code: Select all

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="ddaccordion.js">
* Accordion Content script- (c) Dynamic Drive DHTML code library (
* Visit for hundreds of DHTML scripts
* This notice must stay intact for legal use
<script type="text/javascript">
	headerclass: "submenuheader", //Shared CSS class name of headers group
	contentclass: "submenu", //Shared CSS class name of contents group
	revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
	mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
	defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
	onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
	animatedefault: false, //Should contents open by default be animated into view?
	persiststate: true, //persist state of opened contents within browser session?
	toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
	togglehtml: ["suffix", "<img src='plus.gif' class='statusicon' />", "<img src='minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
	animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
	oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
		//do nothing
	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
		//do nothing
open: root/catalog/template/*YOUR_TEMPLATE*/module/category.tpl REPLACE EVERYTHING WITH THIS

Code: Select all

<div class="box">
  <div class="heading"><?php echo $heading_title; ?></div>
  	$cats="\n<div class=\"glossymenu\">";
  	$catget=mysql_query("SELECT * FROM category_description , category WHERE category_description.category_id = category.category_id AND category.parent_id = '0' ORDER BY ASC;");
        $getsubcat=mysql_query("SELECT * FROM category_description , category WHERE category_description.category_id = category.category_id AND category.parent_id = '$tid' ORDER BY ASC;");
        $num_results = mysql_num_rows($getsubcat);
        if($num_results > 0 ){ // success - found sub categories, so make a div baby!
        	$cats=$cats."\n<a class=\"menuitem submenuheader\" href=\"./index.php?controller=category&path=$tid\">$tname</a>";
        	$cats=$cats."\n<div class=\"submenu\">";
                // Check for sub-sub cats...
                $getsubsubcat=mysql_query("SELECT * FROM category_description , category WHERE category_description.category_id = category.category_id AND category.parent_id = '$ttid' ORDER BY ASC;");
                $numnum_results = mysql_num_rows($getsubsubcat);
                if($numnum_results > 0){ // sub sub category found... ugh...
                	$cats=$cats."\n\t<li><a class=\"menuitem\" href=\"./index.php?controller=category&path=$ntarget\">$ttname</a></li>";
                        $cats=$cats."\n\t<li><a href=\"./index.php?controller=category&path=$nntarget\">    $tttname</a></li>";
                } else {
                	$cats=$cats."\n\t<li><a href=\"./index.php?controller=category&path=$nnntarget\">$ttname</a></li>";
        } else {
        	$cats=$cats."\n<a class=\"menuitem\" href=\"./index.php?controller=category&path=$tid\">$tname</a>";
open: root/catalog/template/*YOUR_TEMPLATE*/css/default.css ADD THIS TO THE END

Code: Select all

.box .glossymenu{
margin: 5px 0;
padding: 0;
width: 170px; /*width of menu*/
border: 1px solid #9A9A9A;
border-bottom-width: 0;

.box .glossymenu a.menuitem{
background: black url(glossyback.gif) repeat-x bottom left;
font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 4px 0;
padding-left: 10px;
text-decoration: none;

.box .glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
color: white;

.box .glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
position: absolute;
top: 5px;
right: 5px;
border: none;

.box .glossymenu a.menuitem:hover{
background-image: url(glossyback2.gif);

.box .glossymenu div.submenu{ /*DIV that contains each sub menu*/
background: white;

.box .glossymenu div.submenu ul{ /*UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;

.box .glossymenu div.submenu ul li{
border-bottom: 1px solid blue;

.box .glossymenu div.submenu ul li a{
display: block;
font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: black;
text-decoration: none;
padding: 2px 0;
padding-left: 10px;

.box .glossymenu div.submenu ul li a:hover{
background: #DFDCCB;
colorz: white;
You will need to take a look at the Dynamic Drive Accordion here: ... glossy.htm

File Uploads:
  • upload all the images to root/catalog/template/*YOUR_TEMPLATE*/css
  • upload ddaccordion.js to root/
  • upload jquery-1.2.6.pack.js to root/
And thats it! There are better ways to implement the queries, recursion should always be used where possible because it is good programming practice. This particular design was just easier to code and grab only three levels deep as this is all the project I'm working on requires. Any comments are welcome! I apologize in advance for my lack of decent variable names... what can I say, they work for me ;) One last thing: please do leave the copyright notice in from Dynamic Drive. They do lots of great stuff for free. You dont need to credit me for this though, that can be yours to take wherever you can get :D


Re: Animated Category List w/ nesting

Posted: Tue Dec 30, 2008 7:22 am
by Qphoria
OMG! Cool mod, but even cooler is that your signature is my life slogan! I say that all the time! Stop reading my thoughts!

Re: Animated Category List w/ nesting

Posted: Tue Dec 30, 2008 8:00 am
by PeterM
I take that as a sincere compliment - thank you! It is one of my lifes philosophies, my second is "no, I will not fix your computer". The mantra of the sysadmin.... ommm....

Re: Animated Category List w/ nesting

Posted: Tue Dec 30, 2008 6:48 pm
by JNeuhoff
This looks cool, I'll bookmark it. Maybe you can wrap it all up in a ZIP file and upload it to the contributions section.