[Request] Fantastic Category Navigation

[Guest]

Hey guys,

 

Who ever wants to jump on this project would be a life saver. I don't mind the current navigation system that OSC provides by default, but I recently came across an online store that has a killer navigation that I would like to mimic.

 

Their site is here:

http://www.bettymills.com/shop/

 

I am referring to the category navigation on the left side of their site.

 

I would like my OSC store to be able to mimic the exact (or close) navigation system as this website.

 

 

What their navigation does in a nutshell is:

 

No matter what category you click, it moves it up to the top of all the categories.

 

It bolds the current category and all the subcategories you are currently in, while everything else remains it's normal location and non-bolded font.

 

It lets the user know that HEY! youre in the category, now choose another category within this category.

 

Once you select a category from the parent, its like OK. hey! now choose a sub category!

 

Every time you go into a new category, it hides the rest of the options and only displays what the user clicked.

 

Please go to their site to get a better understanding. I think it functions perfectly and would be a very useful Addon to the entire OSC2 community.

 

 

thanks in advance

 

-mike

[germ]

BACKUP THE FILES INVOLVED BEFORE MAKING EDITS.

 

Add the classes for the categories in the stylesheet:

 

/* main category */
A.cat {
 color: #000000;
 text-decoration: none;
}

/* first level subcategory */
A.subcat1 {
 color: #FF0000;
 text-decoration: none;
}

/* second level subcategory */
A.subcat2 {
 color: #5b0d0d;
 text-decoration: none;
}

/* third level subcategory */
A.subcat3 {
 color: #019901;
 text-decoration: none;
}

(alter to suit your preferences)

 

Then in /catalog/includes/boxes/categories.php replace this code:

 

    $categories_string .= '<a href="';

With this code:

 

    switch ($tree[$counter]['level']) {
     case 0:
                 $class = 'cat';
                 break;

     case 1:
                 $class = 'subcat1';
                  break;

     case 2:
                 $class = 'subcat2';
                 break;

     case 3:
                 $class = 'subcat3';
                 break;

     default:
                 $class = '';
                 break;
   }
   $categories_string .= '<a class="' . $class . '" href="';

Then in the same file replace:

 

  tep_show_category($first_element); 

 $info_box_contents = array();

With:

 

  tep_show_category($first_element); 

 if ( strpos( $categories_string , '<b>' ) ) {

   $links = explode("<br>", $categories_string);

   for ( $i = 0 ; $i < count($links); $i++ ) {
    if ( strpos ( $links[$i] , '<b>' ) )
      break;
   }
   $j = $i - 1;
   if ( $j < 0 ) $j = 0;

   for ( $i = count($links)-1 ; $i >=0 ; $i-- ) {
    if ( strpos ( $links[$i] , 'class="subcat' ) )
      break;
    if ( strpos ( $links[$i] , '<b>' ) )
      break;
   }
   $k = $i + 1;
   if ( $k > count($links)-1 ) $k = count($links)-1;

   $categories_string = '';
//current = $j+1 to $k-1
   for ( $i = $j+1 ; $i < $k ; $i++ ) {
     $categories_string .= $links[$i] . '<br>';
   }

// top = 0 to $j
   for ( $i = 0 ; $i <= $j ; $i++ ) {
     $categories_string .= $links[$i] . '<br>';
   }

// bot = $k to count($links)-1
   for ( $i = $k ; $i < count($links) ; $i++ ) {
     $categories_string .= $links[$i] . '<br>';
   }
 }

 $info_box_contents = array();

This seems to work on a vanilla install.

 

I don't have categories nested more than one level, so I can't say for sure the code is "bullet-proof", but it does work in the code test area I have setup to test things like this.