Jump to content
Sign in to follow this  
RyGoTypE

[Request] Fantastic Category Navigation

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.


If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you.

 

"Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice."

- Me -

 

"Headers already sent" - The definitive help

 

"Cannot redeclare ..." - How to find/fix it

 

SSL Implementation Help

 

Like this post? "Like" it again over there >

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×