AbleCommerce Shopping Cart Software

Posted: **Fri Jan 04, 2008 2:19 pm**

Hi,
Thanks for showing how to implement the ComponentArt tree view for category navigation. I also tried it and it works really nice. Great post! I have a question though. I want this menu on all other pages. How can I do this? I would appreciate your answer.
Thanks a lot,
Ayilmaz

Posted: **Fri Jan 04, 2008 2:24 pm**

Look at the previous post from Bumbles. I think it is well explain in there.

Posted: **Tue Jan 08, 2008 3:12 pm**

Is there any way to control the indenting of the child links as well as the main category links? Is there a way to apply a separate CSS style just to the child links? When the child links are too long a horizontal scroll bar appears. Is there a way they could wrap instead of initiating a scrolling window?

Just trying to tweak it. If anyone has any ideas I would greatly appreciate it.

Thanks,
Chris

Posted: **Wed Jan 09, 2008 8:30 am**

I have the indents figured out... Node Indent in the parameters on the categorytreeview.aspx file. But I would still like to style the component to not have scroll bars and wrap instead as well as applying styling only to the sub categories and not all the categories.. Let me know if anyone comes up with anything.

Thanks.

Posted: **Wed Jan 09, 2008 8:41 am**

What would be really cool is if someone would know how to make the expansion happen by clicking on the category link to open up to the sub categories instead of clicking on an expansion icon to do the same. So the logic would be that if there is sub categories by clicking on the main category link it would activate the ajax sub category expansion instead of going to a page. If a category would not have any sub categories by clicking on the link you would go to the page just like you do now.

Just an idea.

Posted: **Wed Jan 09, 2008 9:15 am**

This component beeing from ComponetArt I am sure this should be possible because if you look at their web site http://www.componentart.com/webui/demos ... form1.aspx
you will find examples with available code that are doing what you mentionned.

Posted: **Wed Jan 09, 2008 9:55 am**

Those examples are close but do not demonstrate any going to urls...

This is the code that I can pinpoint where the url is getting written for ALL categories regardless if they are subcategory or main category..

private void GetCategoryNodesRecursive(int categoryId, TreeViewNodeCollection nodes)
{
TreeViewNode node;

CategoryCollection subcategories = CategoryDataSource.LoadForParent(categoryId, true);
foreach (Category subcat in subcategories)
{
node = new TreeViewNode();
node.ID = subcat.CategoryId.ToString();
node.Text = subcat.Name;
node.NavigateUrl = subcat.NavigateUrl;
node.ImageUrl = subcat.ThumbnailUrl;
nodes.Add(node);

GetCategoryNodesRecursive(subcat.CategoryId, node.Nodes);
}
}

If I comment out the part about node.NavigateURL the ajax works but the sub cats of course then loose their ability to navigate to the appropriate sub category link. Anyone have an idea on how to adjust this code so it only writes the node.NavigateURL for subcategories with product or main categories with product and no sub cats?

Posted: **Wed Jan 09, 2008 10:02 am**

Does Able 7.0 support component arts "NAVBAR" element? Maybe it would be easier to use this component instead of the "TreeView" Element in order to achieve what I am looking for.

Posted: **Wed Jan 09, 2008 11:38 pm**

Jinx wrote:If I comment out the part about node.NavigateURL the ajax works but the sub cats of course then loose their ability to navigate to the appropriate sub category link. Anyone have an idea on how to adjust this code so it only writes the node.NavigateURL for subcategories with product or main categories with product and no sub cats?

If you replace GetCategoryNodesRecursive method with the one below, it should do what you need. I've also made it list the number of items in each category which you can easily remove it you want.

Code: Select all

private void GetCategoryNodesRecursive(int categoryId, TreeViewNodeCollection nodes)
{
    TreeViewNode node;

    CategoryCollection subcategories = CategoryDataSource.LoadForParent(categoryId, true);
    foreach (Category subcat in subcategories)
    {
        node = new TreeViewNode();
        node.ID = subcat.CategoryId.ToString();
	    
        int nonCatalogNodeCount = 0;
        foreach (CatalogNode subcatNode in subcat.CatalogNodes)
        {
            if (subcatNode.CatalogNodeType != CatalogNodeType.Category)
            {
                nonCatalogNodeCount++;
            }
        }

        if (nonCatalogNodeCount > 0)
        {
            // Show the number of items in the category in brackets after the category name
            // if you don't want this then replace with:
            // node.Text = subcat.Name;
            node.Text = string.Format("{0} ({1})", subcat.Name, nonCatalogNodeCount);
            node.NavigateUrl = subcat.NavigateUrl;
        }
        else
        {
            node.Text = subcat.Name;
        }

        node.ImageUrl = subcat.ThumbnailUrl;
        nodes.Add(node);

        GetCategoryNodesRecursive(subcat.CategoryId, node.Nodes);
    }
}

Posted: **Thu Jan 10, 2008 11:33 am**

FYI,
I've played with a variation of this with the componentart menu control. I created a Horizontal Menu bar which has my main categories and "flyout" menus for the subs.
You can see it on our site...

http://www.diamondandgoldoverstocks.com

If it is something you'd like, I can send it to you.

Posted: **Thu Jan 10, 2008 12:29 pm**

Jim your menu looks nice. I would take out the text resize when hovering on the top bar though. It looks a little wigged out and is not really needed since you change the background anyways.

Posted: **Fri Jan 11, 2008 11:17 am**

Thanks for the input.
I was trying to figure out why that was happening and you pointed me in the right direction.
Here's the deal for anyone who cares: The person adding product was bolding the category title in the maint screen.
When I was loading the category, I was stripping out the <b> before putting that in the text of the menu, BUT it still remained bold...not sure why or how. My CSS did not specify bold so when it was transitioning from tag to tag you could see for just an instant that the cat name was going back to regular, then back to bold...geezz...anyhoo, I just changed the CSS to make the font bold all the time and viola! it appears much better.
Very odd...

Posted: **Fri Jan 11, 2008 12:39 pm**

This next week I am going to start writing a category navigation component for Able using the Component Art NAVBAR if it is supported. I will post it after I have completed it if anyone is interested.

Posted: **Mon Jan 14, 2008 1:52 pm**

The code you listed above for the tree works perfectly... A note for everyone is that it allows the category link to initiate the drop-down instead of the icon and it only works if there is a subcategory and no product in the category, otherwise it works just like a link to the category page. PERFECT and thanks a bunch... I am going to use this code now as I am having trouble integrating the "Component Art" "NavBar" component that I wanted to try.

Anyone want to try their hand at the NAVBAR and I wouldn't argue...

Again thanks a bunch, the code rocks and I will post a link to it when the site goes live.

Posted: **Mon Jan 14, 2008 3:04 pm**

Glad you found it useful.

Might have a look at the NAVBAR component at some point if I get time.

Posted: **Wed Feb 06, 2008 6:18 pm**

OH NO!!!! I believe I found what I am in search of and the link for all of compunerdy stuff no workie..

HELP

Posted: **Wed Feb 06, 2008 6:46 pm**

Use the code Bumbles posted..its a better setup.

Posted: **Wed Feb 06, 2008 7:14 pm**

Thanks, I did and it works. I am having one problem though. None of the 4 .gif files are being displayed next to the category tree. I have checked and double checked file names and locations (I mostly copy/paste everything) and it appears to be correct. Any thoughts?

Posted: **Wed Feb 06, 2008 8:52 pm**

A bit more info:

It is trying to display them. When the page loads you can see a "place holder" for the .gif images but once the page loads.... zip, ziltch, nadda!

Posted: **Wed Feb 06, 2008 11:43 pm**

Hmm.. got a linky?

Posted: **Wed Feb 06, 2008 11:59 pm**

Sure do. Thank for lookie.

http://64.78.24.30/ablecomm/Default.aspx

Posted: **Thu Feb 07, 2008 12:23 am**

Code: Select all

http://64.78.24.30/App_Themes/BikeAuthority/images/CategoryTreeView/folders.gif

That is the correct location where you have the images?

Posted: **Thu Feb 07, 2008 7:19 am**

Yep it is.

And if you right click the place holder area where the .gif should be, and get the properties for it.... it is where it should be?

Posted: **Thu Feb 07, 2008 7:31 am**

Here is where you said you have the images pointing to...
http://64.78.24.30/App_Themes/BikeAutho ... olders.gif

but you say this is the link to your site...
http://64.78.24.30/ablecomm/Default.aspx

If this is true then the link to your images needs to be
http://64.78.24.30/ablecomm/
App_Themes/BikeAuthority/images/CategoryTreeView/folders.gif

Now don't forget that when you go live you should change the ip numbers to your url and adjust accordingly.

Posted: **Thu Feb 07, 2008 7:43 am**

Duh... Thanks Jinx, works great.

AbleCommerce Shopping Cart Software

Navigation treeview or flyout menus?

How to keep the left side menu

Indenting Child Links and tweaking Bumbles code

Well getting there...

Possible Enhancement

Close...

Component Art NAVBAR

Re: Close...

Component Art "NAVBAR"

Thanks Bumbles

Looks like you are missing one folder