When I click on a product that is assigned to a category, I lose the <li class="current"> for that category link in the navigation menu.


Am I the only one losing this class?

I lose it as well. I'm sure it feels a bit disorienting for users.

We really need an effective rebuild of the category navigation module in SP3, at least.

Hey Matt,
Could you expand on this a little? Are you specifically referring to the breadcrumb menu, or one of the menu content blocks? When you are on the product page, the product page is your "current" page. Do you want the last breadcrumb menu link to also have the "current" class?

Thanks,

Everett, not talking about the breadcrumbs. It's the Category Menu Content Block; the existing options aren't very usable and the whole module really needs to be re-imagined from a UI perspective.

Martell's point is that the top-level category should also have a 'current' or 'parent' class when a sub-category is selected, or when visiting a product assigned to that category.

Hey Matt,

That explains it perfectly. I'll see what I can do.

Thanks,

Hey Matt,

This may work for a temporary fix. It really does not properly address the issue, so use it sparingly. It will keep the "current" class on the category link, but it will also affect any subcategories that may reside beneath the category you are in. Edit your "SiteRoot\BVModules\ContentBlocks\Category Menu\view.ascx.vb" file and make the following change:

Private Sub AddSingleLink(ByVal c As Catalog.Category)
If c.Bvin = currentId Then
If TypeOf Me.Page Is BaseStoreCategoryPage Then
Me.MenuControl.Controls.Add(New LiteralControl("<li class=""current"">"))
Else
Me.MenuControl.Controls.Add(New LiteralControl("<li>")) --------------------------------------> Change this to <li class=""current"">
End If
Else
Me.MenuControl.Controls.Add(New LiteralControl("<li>"))
End If

I would like to hear any and all suggestions that you guys may have in regard to this control. I'll add them to the system and see if we can make some changes in time for SP3.

Thanks,

Hi Matt,


I have attached some code that is not 100% fully tested so you would be somewhat of a beta tester, but my initial test appear to indicate that everything works as it should. To use replace your current view.ascx.vb file in the Category Menu directory (make a backup of the original first).



Basically it will add "currentparent" as a class to any category in the tree that is parent category of the current category. It will add a "current" as a class to the current category.



It also adds an algorithm that finds the "best" category to show as the current category if someone navigates directly to a product page. My "best" is considered to be the first, deepest category found in the list of categories a product belongs too. Unlike the standard menu from bv, this menu will also cause the category menu to expand down to the "best" category chosen by the logic.



Please report any issues you see...

Good call Cliff.

Thanks!

Hey Matt,

Just curious, did you implement the code Caplink hooked up for everyone?
If so, how did it pan out for you with your products assigned?

-Dave

Hi Matt,

I hear ya :>
I implemented the code in my (never-ending) site build, and it works great.
I had to set a lot of styles to handle multiple scenarios, such as first level category when it's current, then again when it's current parent.. and 2nd level categories had a few multiple scenarios to account for.

Here's the css I used. I have the top levels using a right facing, and down facing arrow background image. Gives it a cool open/closed category marker.
Hopefully this css will be helpful for others, it covers up to the 2nd level of categories.

I commented the behaviors that each of the styles control:

/* Category Sidebar Menu */
.categorymenu ul {padding:0; margin:5px 0;}

/*First Level Category menu */
.categorymenu ul li {padding: 0px; list-style:none;} /*First Level Category */
.categorymenu ul li a {
text-decoration:none;
Display:block;
width: auto;
Background-Color: #1f5f17;
background-repeat: no-repeat;
background-image: url(/Objects/CategoryNav_Arrow-Closed.gif);
background-position: 6px 50%;
color: #FFFFFF;
Padding: 3px 5px 3px 20px;
border-bottom: 2px Solid #ffffff;
} /*First Level Category Link*/
.categorymenu ul li a:hover {}
.categorymenu ul li.current a, .categorymenu ul li.currentparent a {
text-decoration:none;
Display:block;
width: auto;
Background-Color: #1f5f17;
background-repeat: no-repeat;
background-image: url(/Objects/CategoryNav_Arrow-Open.gif);
background-position: 6px 50%;
color: #FFFFFF;
Padding-Left: 20px;
border: none;
} /*First Level Category Link - Current*/


/*Second Level Category menu */
.categorymenu ul li ul li {} /*Second Level Category */
.categorymenu ul li.current ul li a, .categorymenu ul li.currentparent ul li a {
Background-Color: #FFFFFF;
background-image:none;
border: none;
padding: 0px;
color: #1a4415;
} /*Second Level Category Link, when First has current selected - meaning no secondary is selected*/
.categorymenu ul li ul li a {
Background-Color: #FFFFFF;
background-image:none;
padding: 0px;
color: #1a4415;
border: none;
} /*Second Level Category Link*/
.categorymenu ul li ul li.current a {
Background-Color: #FFFFFF;
border: none;
background-repeat: no-repeat;
background-image: url(/Objects/CategoryNav_Bullet.gif);
background-position: 0px 50%;
Padding-Left: 10px;
font-weight: bold;
color: #1a4415;
} /*Second Level Category Link*/