Category List - hierarchal styles for elements?

[quiz]

Hi,

How can the category list box be redesigned to allow each link to be a separate and unique DIV like so:

 

<div class="main-withsubcatagories">Software</div>
<div class="main-selected">Hardware</div>
   <div class="submain-without">Keyboards</div>
   <div class="submain-selected">DVD Burners</div>
       <div class="subsubmain">HP</div>
       <div class="subsubmain">Panasonic</div>
   <div class="submain-with">Monitors</div>
<div class="main-withoutsubcatagories">Books</div>

 

I am replacing the <a> tags with Javascript enabled DIVs (onclick="document.location = '...) to allow them to have a button like appearance. But I have had no luck sorting them out into the tree structure described above. There don't seem to be definite endings and closings for the different tree elements in the categories.php file.

 

I would be curious if anyone has been able to do this.

[Guest]

This seemed to work for me, although have to admit it's only had minimal testing.

 

The following should be saved as includes/boxes/categories.php

 

<?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
*/

 function tep_show_category($counter) {
   global $tree, $categories_string, $cPath_array;

 $prefix = '<div class="';

 switch($tree[$counter]['level']) {
	 case 0:
   $prefix .= 'main-';
   break;
	 case 1:
   $prefix .= 'submain-';
   break;
	 default:
   $prefix .= 'subsubmain';
 }
 if ($tree[$counter]['level'] < 2) {
    if (isset($cPath_array) && in_array($counter, $cPath_array) && tep_has_category_subcategories($counter)) {
   $prefix .= 'selected';
	 } else {
   if (tep_has_category_subcategories($counter)) {
  	 $prefix .= 'withsubcategories';
   } else {
  	 $prefix .= 'withoutsubcategories';
   }
	 }
 }

 $prefix .= '">';
 $postfix = '</div>';

   $categories_string .= $prefix . '<a 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 .= ' (' . $products_in_category . ')';
     }
   }

   $categories_string .= $postfix;

   if ($tree[$counter]['next_id'] != false) {
     tep_show_category($tree[$counter]['next_id']);
   }
 }
?>
<!-- categories //-->
         <tr>
           <td>
<?php
 $info_box_contents = array();
 $info_box_contents[] = array('text' => BOX_HEADING_CATEGORIES);

 new infoBoxHeading($info_box_contents, true, false);

 $categories_string = '';
 $tree = 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' => 0,
                                               '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'];
   }
 }

 //------------------------
 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);

 new infoBox($info_box_contents);
?>
           </td>
         </tr>
<!-- categories_eof //-->

 

Give it a go, let me know :)

[quiz]

Thanks for posting the code. It works wonderfully. I made an addition to the $prefix generator simply to let me have mouse events for the class names as well. It seems that a DIV inside a link tag has only the text linked and not the entire area, although maybe I am not setting it up correctly. Although I am not sure it is wise to rely on Javascript for links.

 

Here is the code I changed:

 

$class = '';
switch($tree[$counter]['level']) {
 case 0:
  $class .= 'main-';
  break;
 case 1:
  $class .= 'submain-';
  break;
 default:
  $class .= 'subsubmain';
}
if ($tree[$counter]['level'] < 2) {
   if (isset($cPath_array) && in_array($counter, $cPath_array) && tep_has_category_subcategories($counter)) {
  $class .= 'selected';
 } else {
  if (tep_has_category_subcategories($counter)) {
   $class .= 'withsubcategories';
  } else {
   $class .= 'withoutsubcategories';
  }
 }
}

$prefix = '<div class="'.$class.'" onmouseover="this.className=\''.$class.'Hover\';" onmouseout="this.className=\''.$class.'\';" ';
$postfix = '</div>';