Hi all,
I'm almost done installing my third oscommerce based webshop. But this time I want to make something special with my category_left.php
I tried to implement diffrent kinds of dynamic menus like dynamenu, coolmenu and categories_css
In the template that I use I have the following structure
With dynamics menu you get following structure:
What I want to create is:
I think it will be easier to implement categories_css.php. Because the dynamic menu is only css based and not java.
This is categories_css
<?php
/*
$Id: categories.php,v 1.25 2003/07/09 01:13:58 hpdl Exp $
osCommerce, Open Source E-Commerce Solutions
http://www.oscommerce.com
Copyright (c) 2003 osCommerce
Released under the GNU General Public License
*/
?>
<?
// cssMenu - Begin of configuration //
$cssMenuConfig = array();
$cssMenuConfig['ShowEmptyCategories'] = true;
$cssMenuConfig['includeProducts'] = false; // Should CSSMenu show products
$cssMenuConfig['maxProductsInMenu'] = 8; // Maximum number of products to show in a menu ( stops massive menus being created )
$cssMenuConfig['moreText'] = "More...."; // Maximum number of products to show in a menu ( stops massive menus being created )
$cssMenuConfig['showSubMenu'] = true; // Show category dependent menu
// $cssMenuConfig['idSubMenu'] = array('619', '620'); // Category id for the dependent menu
// cssMenu - End of configuration //
$categories_subs = array();
$categories_start = array();
$categories_subs_query = tep_db_query("select count(*) as count, parent_id from " . TABLE_CATEGORIES . " GROUP BY parent_id");
while($row = tep_db_fetch_array($categories_subs_query)) {
$categories_subs[$row['parent_id']] = $row['count'];
}
$categories_query = tep_db_query("select c.categories_id, cd.categories_name, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.categories_id = cd.categories_id and cd.language_id = '" . $languages_id . "' order by sort_order, cd.categories_name");
while($row = tep_db_fetch_array($categories_query)) {
$categories_start['S_' . $row['categories_id'] . '_' . $row['parent_id'] . '_E'] = $row;
}
?>
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 200px; /* Width of Menu Items */
border-bottom: 1px solid #555555;
font-family: arial;
font-size: 12px;
}
.suckerdiv ul li{
position: relative;
background-color: #222222;
}
/*1st level sub menu style */
.suckerdiv ul li ul{
left: 199px; /* Parent menu width - 1*/
position: absolute;
width: 200px; /*sub menu width*/
top: 0;
display: none;
}
/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul{
left: 199px; /* Parent menu width - 1*/
}
/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li a{
left: 199px; /* Parent menu width - 1*/
background-color: #222222;
}
/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul li a{
background-color: #222222;
}
/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul li ul li a{
background-color: #222222;
}
/* menu links style */
.suckerdiv ul li a{
display: block;
color: yellow;
text-decoration: none;
background-color: #222222;
padding: 1px 5px;
border: 1px solid #555555;
border-bottom: 0;
line-height: 1.75em;
}
.suckerdiv ul li a:hover{
background-color: yellow;
color: black;
text-decoration: none;
}
.suckerdiv ul li ul li a:hover{
background-color: yellow;
color: black;
text-decoration: none;
}
.suckerdiv ul li ul li ul li a:hover{
background-color: yellow;
color: black;
text-decoration: none;
}
/* The main categories with sub-categories */
.suckerdiv .subfolderstyle{
background: url(images/arrow-list.gif) no-repeat center right;
}
/* This one colors the sub-folder with other sub-folders */
.suckerdiv ul li ul .subfolderstyle {
background-color: #222222;
}
/* This one colors the sub-folder with other sub-folders */
.suckerdiv ul li ul li ul .subfolderstyle {
background-color: #222222;
}
/* This one colors the sub-folder with other sub-folders */
.suckerdiv ul li ul li ul li ul .subfolderstyle {
background-color: #222222;
}
/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */
</style>
<script type="text/javascript">
//SuckerTree Vertical Menu (Aug 4th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/
var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas
function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
}
}
if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)
</script>
<?
function PrintProducts( $category_id, $categories_string , $includeul, $languageID)
{
global $cssMenuConfig;
$product_path="product_info.php?cPath=".$category_id."&products_id=";
$products_query = tep_db_query("select pc.products_id, pc.categories_id from products_to_categories pc, products p where pc.categories_id = " . $category_id . " and p.products_id = pc.products_id and products_status=1 order by products_price");
$productsDisplay=mysql_num_rows( $products_query );
$addMore= false;
if ( $includeul && $productsDisplay > 0 ) {
$returnval .= "<ul>";
}
if ( $productsDisplay > $cssMenuConfig['maxProductsInMenu'] ) {
$productsDisplay=$cssMenuConfig['maxProductsInMenu'];
$addMore= true;
}
$count_string = '';
if (SHOW_COUNTS == 'true') {
if ($totalitemsincategory > 0) {
$count_string = ' (' . $totalitemsincategory . ')';
}
}
$i=0;
while ($i < $productsDisplay) {
$products = tep_db_fetch_array($products_query);
$product_query = tep_db_query("select products_name from products_description where products_id = " . $products['products_id'] . " AND language_id = ".$languageID );
$product = tep_db_fetch_array($product_query);
$returnval .= "<li><a href='".$product_path.$products['products_id']."'>".$product['products_name']."</a></li>\n";
$i++;
}
if ( $addMore ) {
$returnval .= "<li><a href='".$categories_string."'>".$cssMenuConfig['moreText']."</a></li>\n";
}
if ( $productsDisplay > 0 || !$includeul ) {
$returnval .= "</ul>";
}
return $returnval;
}
function PrintSubMenus( $parentID, $languageID, $start_path ){
global $cssMenuConfig, $categories_subs, $categories_start;
$returnval = '';
if (($start_path == '') && ($parentID > 0)) {
$start_path = $parentID;
} else {
if ($parentID > 0) $start_path .= "_" . $parentID;
}
if ($parentID != 0) {
$returnval .= "<ul>";
} else {
$returnval .= "<div class='suckerdiv'>";
$returnval .= "<ul id='suckertree1'>";
}
// $categories_query = tep_db_query("select c.categories_id, cd.categories_name, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.parent_id = '".$parentID."' and c.categories_id = cd.categories_id and cd.language_id='" . (int)$languageID ."' order by sort_order, cd.categories_name");
$cat_subs = array();
foreach($categories_start as $key => $value) {
if(strstr($key, '_' . $parentID . '_E')) {
$cat_subs[$parentID][] = substr($key, 2, strpos($key, "_", 2) - 2);
}
}
// if (!isset($_GET['cPath'])) {
foreach ($cat_subs[$parentID] as $v) { //$categories = tep_db_fetch_array($categories_query)
$categories = $categories_start['S_' . $v . '_' . $parentID . '_E'];
if ($start_path == "") {
$grouppath = $categories['categories_id'];
} else {
$grouppath = $start_path . "_" . $categories['categories_id'];
}
$cPath_new = 'cPath=' . $grouppath;
$categories_string = tep_href_link(FILENAME_DEFAULT, $cPath_new);
$totalitemsincategory = tep_count_products_in_category($categories['categories_id']);
$count_string = '';
if ((SHOW_COUNTS == 'true') && ($totalitemsincategory > 0) ){
$count_string = ' (' . $totalitemsincategory . ')';
}
if (cssMenu_ShowCategory($cssMenuConfig['ShowEmptyCategories'], $totalitemsincategory)) {
$returnval .= "<li><a href='".$categories_string."'>".$categories['categories_name'].$count_string."</a>\n";
}
if (array_key_exists($categories['categories_id'], $categories_subs)) { //tep_has_category_subcategories($categories['categories_id'])
$returnval .= PrintSubMenus( $categories['categories_id'], $languageID, $start_path );
if ( $cssMenuConfig['includeProducts'] ) {
$returnval .= PrintProducts($categories['categories_id'],$categories_string, false, $languageID);
}
} else {
if ( $cssMenuConfig['includeProducts'] ) {
$returnval .= PrintProducts($categories['categories_id'],$categories_string, true, $languageID);
}
}
if (cssMenu_ShowCategory($cssMenuConfig['ShowEmptyCategories'], $totalitemsincategory)) {
$returnval .= "</li>";
}
}
// }
if ( !$cssMenuConfig['includeProducts'] ) {
$returnval .= "</ul>";
}
if ($parentID == 0) $returnval .= "</div>";
return $returnval;
}
function cssMenu_ShowCategory( $switch, $products) {
if ( $switch == 1 ) {
return true;
} else {
if ($products > 0) {
return true;
} else {
return false;
}
}
}
?>
<!-- categories //-->
<tr>
<td>
<?php
$info_box_contents = array();
$info_box_contents[] = array('text' => BOX_HEADING_CATEGORIES);
new infoBoxHeading($info_box_contents, true, false);
$info_box_contents = array();
$info_box_contents[] = array('text' => PrintSubMenus( 0, $languages_id, '' ));
$info_box_contents[] = array('align' => 'center',
'text' => '<a href="' . tep_href_link(FILENAME_ALLPRODS, '', 'NONSSL') . '">' . BOX_INFORMATION_ALLPRODS . '</a>');
$info_box_contents[] = array('align' => 'center',
'text' => '<a href="' . tep_href_link(FILENAME_SPECIALS, '', 'NONSSL') . '">' . BOX_SPECIALS_ALLPRODS . '</a>');
$info_box_contents[] = array('align' => 'center',
'text' => '<a href="' . tep_href_link(FILENAME_PRODUCTS_NEW) . '">' . BOX_WHATSNEW_ALLPRODS .'</a>');
new infoBox($info_box_contents);
?>
</td>
</tr>
<!-- MenuConfigategories_eof //-->
This is my template version of categories. I want to keep the main design of this one.
<?php
/*
$Id: categories.php,v 1.25 2003/07/09 01:13:58 hpdl Exp $
E-Commerce Solutions
Copyright (c) 2005 www.flash-template-design.com
Released under the GNU General Public License
*/
function tep_show_category($counter) {
global $tree, $categories_string, $cPath_array, $cat_str;
$cat_str = "";
for ($i=0; $i<$tree[$counter]['level']; $i++) {
$cat_string = " ";
}
if ($tree[$counter]['parent']==0) {
$categories_string .= '<table border="0" cellpadding="0" cellspacing="0" height="24" style="background:url(images/categories_main_bg.gif) repeat-x;"><tr><TD width="200" valign="top" height="19" align="left" style="padding-left:10px; padding-top:5px;"><a class="h11" href="';
}
else
$categories_string .= '<table border="0" cellpadding="0" cellspacing="0"><tr><TD width="200" valign="middle" height="17" align="left" style="padding-left:10px;">'.$cat_string.'<img src="images/categories_marker.gif" width="3" height="6" alt="" border="0" /> <a class="m11" href="';
if ($tree[$counter]['parent'] == 0) {
$cPath_new = 'cPath=' . $counter;
} else {
$cPath_new = 'cPath=' . $tree[$counter]['path'];
}
$categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '">';
if (isset($cPath_array) && in_array($counter, $cPath_array)) {
$categories_string .= '<b>';
}
// display category name
$categories_string .= $tree[$counter]['name'];
if (isset($cPath_array) && in_array($counter, $cPath_array)) {
$categories_string .= '</b>';
}
//if (tep_has_category_subcategories($counter)) {
//$categories_string .= '->';
//}
$categories_string .= '</a>';
if (SHOW_COUNTS == 'true') {
$products_in_category = tep_count_products_in_category($counter);
if ($products_in_category > 0) {
$categories_string .= ' <span style="color:#6d7066;FONT-SIZE: 11px;">(' . $products_in_category . ')</span>';
}
}
$categories_string .= '</td></tr></table>';
if ($tree[$counter]['next_id'] != false) {
tep_show_category($tree[$counter]['next_id']);
}
}
?>
<!-- categories <div style="padding-top:1px; "></div> //-->
<tr>
<td valign="top">
<?php
$info_box_contents = array();
$info_box_contents[] = array('text' => BOX_HEADING_CATEGORIES);
?>
<?php new infoBoxHeading($info_box_contents, true, true);?>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" style="border:1px solid #a0a596; margin-top:1px; background-color:#e7e9e3; ">
<tr>
<td>
<?php
$categories_string = '';
$tree = array();
$i=0;
$cPath_array=array();
$categories_query = tep_db_query("select c.categories_id, cd.categories_name, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.parent_id = '0' and c.categories_id = cd.categories_id and cd.language_id='" . (int)$languages_id ."' order by sort_order, cd.categories_name");
while ($categories = tep_db_fetch_array($categories_query)) {
$tree[$categories['categories_id']] = array('name' => $categories['categories_name'],
'parent' => $categories['parent_id'],
'level' => 1,
'path' => $categories['categories_id'],
'next_id' => false);
if (isset($parent_id)) {
$tree[$parent_id]['next_id'] = $categories['categories_id'];
}
$parent_id = $categories['categories_id'];
if (!isset($first_element)) {
$first_element = $categories['categories_id'];
}
$cPath_array[$i]=$categories['categories_id'];
$i++;
}
//------------------------
// if (tep_not_null($cPath)) {
$new_path = '';
reset($cPath_array);
while (list($key, $value) = each($cPath_array)) {
unset($parent_id);
unset($first_id);
$categories_query = tep_db_query("select c.categories_id, cd.categories_name, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.parent_id = '" . (int)$value . "' and c.categories_id = cd.categories_id and cd.language_id='" . (int)$languages_id ."' order by sort_order, cd.categories_name");
if (tep_db_num_rows($categories_query)) {
$new_path .= $value;
while ($row = tep_db_fetch_array($categories_query)) {
$tree[$row['categories_id']] = array('name' => $row['categories_name'],
'parent' => $row['parent_id'],
'level' => $key+1,
'path' => $new_path . '_' . $row['categories_id'],
'next_id' => false);
if (isset($parent_id)) {
$tree[$parent_id]['next_id'] = $row['categories_id'];
}
$parent_id = $row['categories_id'];
if (!isset($first_id)) {
$first_id = $row['categories_id'];
}
$last_id = $row['categories_id'];
}
$tree[$last_id]['next_id'] = $tree[$value]['next_id'];
$tree[$value]['next_id'] = $first_id;
$new_path .= '_';
} //else {
//break;
//}
}
// }
tep_show_category($first_element);
$info_box_contents = array();
$info_box_contents[] = array('text' => $categories_string);
?>
<?php
new infoBox($info_box_contents);
?>
</td>
</tr>
</table>
</td>
</tr>
<!-- categories_eof //-->
Thank you for your replies