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: http://www.carolinescatalog.com.
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 (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<script type="text/javascript">
ddaccordion.init({
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
}
})
</script>
Code: Select all
<div class="box">
<div class="heading"><?php echo $heading_title; ?></div>
<?php
$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 category_description.name ASC;");
while($foo=mysql_fetch_array($catget)){
$tid=$foo['category_id'];
$tname=$foo['name'];
$getsubcat=mysql_query("SELECT * FROM category_description , category WHERE category_description.category_id = category.category_id AND category.parent_id = '$tid' ORDER BY category_description.name 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\">";
$cats=$cats."\n\t<ul>";
while($moo=mysql_fetch_array($getsubcat)){
$ttid=$moo['category_id'];
$ttname=$moo['name'];
// 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 category_description.name ASC;");
$numnum_results = mysql_num_rows($getsubsubcat);
if($numnum_results > 0){ // sub sub category found... ugh...
$ntarget=$tid."_".$ttid;
$cats=$cats."\n\t<li><a class=\"menuitem\" href=\"./index.php?controller=category&path=$ntarget\">$ttname</a></li>";
while($koo=mysql_fetch_array($getsubsubcat)){
$tttid=$koo['category_id'];
$tttname=$koo['name'];
$nntarget=$tid."_".$ttid."_".$tttid;
$cats=$cats."\n\t<li><a href=\"./index.php?controller=category&path=$nntarget\"> $tttname</a></li>";
}
} else {
$nnntarget=$tid."_".$ttid;
$cats=$cats."\n\t<li><a href=\"./index.php?controller=category&path=$nnntarget\">$ttname</a></li>";
}
}
$cats=$cats."\n\t</ul>";
$cats=$cats."\n</div>";
} else {
$cats=$cats."\n<a class=\"menuitem\" href=\"./index.php?controller=category&path=$tid\">$tname</a>";
}
}
$cats=$cats."\n</div>";
echo("$cats");
?>
</div>
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;
}
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/
Enjoy.