Navigation treeview or flyout menus?

Haak · Post by **Haak** » Tue Nov 06, 2007 4:32 pm

Is there a way to have a tree view for navigation or some kind of fly out menu system that can be used to navigate through categories and sub catergories? It seems that currently in the layouts available there is no menu system for keeping track of hierarchal product categories on every page.

I would like to have a menu system for product categories including sub categories that is on every page so the user can navigate around easily. I have looked into the conlib folder and was thinking of creating one myself but I am not sure what methods to call to get the data (categories and sub categories "if one exists") out of the database or if I should just create my own data component for this?

Haak

Post by **Shopping Cart Admin** » Tue Nov 06, 2007 5:01 pm

Hello Haak,

Do you mean something like the control used on the administration side in the catalog section?

Haak · Post by **Haak** » Tue Nov 06, 2007 5:30 pm

Yes that would be just like it. It does not have to be fly out a tree menu would be fine as well but yes I would like to have a topic of products and have the fly out or tree menu show all the available categories and sub categories to choose from.

Haak

Post by **Shopping Cart Admin** » Tue Nov 06, 2007 5:35 pm

Hello Haak,

We've tried a number of commercially available fly out menus and they produced horribly bloated code that noticeably slowed page load. The one on the admin side is our custom control, which on our demo store reduced page size by almost 100k.

We're short staffed this week, but we'll get something out for the retail side for this next week. This is already on the custom control todo list.

Haak · Post by **Haak** » Tue Nov 06, 2007 6:00 pm

Awsome!

freedom1029 · Post by **freedom1029** » Wed Nov 07, 2007 11:55 am

I would be interested in such control as well. In my opinion the asp.net 2.0 treeview would be a nice option and would allow to navigate througt the different categories.

Haak · Post by **Haak** » Wed Nov 07, 2007 3:58 pm

Mike, you got me thinking so I checked out were the menu system came from in the admin section. This led me to the componentart.dll in the bin file. Yes it is what it says it is UI art! With lots of options for menu systems! I did not know this but you guys included the web version of Component Art from the company Component Art.com. This is great. No .. This is Awsome! It has a value of $800 and it seems to be included with you shopping cart.
So what I did was include the .dll in my Visual Studio 2005 tool bar so I could easily use the controls. I have tested out the menu system by adding the links from the SimpleCatergoryList.ascx html output and it works. I need to do more testing but so far I believe this will solve my issue.

Haak

Post by **Shopping Cart Admin** » Wed Nov 07, 2007 4:03 pm

Hello Haak,

Yes component art for use within AbleCommerce is included! The CA tree is fine for smaller tree's and quite feature rich.

compunerdy · Post by **compunerdy** » Fri Nov 30, 2007 9:53 am

I would like the menu to stay active like on the admin page. Did someone figure out a way to easily do this?

compunerdy · Post by **compunerdy** » Thu Dec 06, 2007 11:16 am

removed

freedom1029 · Post by **freedom1029** » Thu Dec 06, 2007 11:54 am

Compunerdy I went on your site and this is exactly what I would like. Is this with AC 7 ? If so can you explain how you did it?
Thanks,
Eric

calvis · Post by **calvis** » Thu Dec 06, 2007 11:56 am

I like it as well. Very simple and eloquent.

jmestep · Post by **jmestep** » Thu Dec 06, 2007 12:35 pm

Yes, please tell us. I copied the admin nav control over, and it would display OK, but the links didn't work.

calvis · Post by **calvis** » Thu Dec 06, 2007 1:58 pm

Compunerdy should be back with us in a bit. I presume that he is consulting with his agent on how much to charge for it.

compunerdy · Post by **compunerdy** » Thu Dec 06, 2007 2:06 pm

Removed..use the code posted below.

freedom1029 · Post by **freedom1029** » Thu Dec 06, 2007 2:21 pm

Thanks for the files, this is perfect for a simple store of mine. The next step would be to have it connected to the db instead of a js file and have the control respect the hidded, private or public attribute.

jmestep · Post by **jmestep** » Thu Dec 06, 2007 2:23 pm

Thank you, thank you, thank you.

calvis · Post by **calvis** » Thu Dec 06, 2007 2:36 pm

Thanks for the files and you will get some well deserved Karma in your direction for such a gesture.

compunerdy · Post by **compunerdy** » Thu Dec 06, 2007 3:03 pm

I will take all the Karma I can get

I also switched my secondary pages to 3 column and used the same sidebar so the menu would always show...forgot that part.

Bumbles · Post by **Bumbles** » Tue Dec 11, 2007 3:42 am

In case somebody finds this useful, I spent some time playing with the ComponentArt treeview that comes packaged with AC. Below is a treeview that I'm using to list product categories in the left hand column of my site on all pages. It functions the same was as the one compunerdy kindly supplied, but reads the category information from AC.

To install, follow these instructions...

Create /ConLib/Custom/CategoryTreeView.ascx with the following:

Code: Select all

<%@ Control Language="C#" ClassName="CategoryTreeView" EnableViewState="false" %>
<%@ Register TagPrefix="ComponentArt" Namespace="ComponentArt.Web.UI" Assembly="ComponentArt.Web.UI" %>
<%--
<conlib>
<summary>Displays the categories in your store in a treeview.</summary>
<param name="CacheDuration" default="60">Number of minutes the category tree will remain cached in memory.  Set to 0 to disable caching.</param>
</conlib>
--%>
<script runat="server">
    int _CacheDuration = 60;
    public int CacheDuration
    {
        get { return _CacheDuration; }
        set { _CacheDuration = value; }
    }

    protected void Page_Init(object sender, EventArgs e)
    {
        InitializeCategoryTree();
    }

    private void InitializeCategoryTree()
    {
        TreeView1.ShowLines = false;
        TreeView1.ImagesBaseUrl = "/App_Themes/" + Page.Theme + "/images/CategoryTreeView/";

        TreeView1.CssClass = "CatTreeView"; 
        TreeView1.NodeCssClass = "CatTreeNode"; 
        TreeView1.SelectedNodeCssClass = "CatSelectedTreeNode"; 
        TreeView1.HoverNodeCssClass = "CatHoverTreeNode";

        GetCategoryTreeNodes();

        // Specify the current category
        int categoryId = PageHelper.GetCategoryId();
        TreeViewNode node = TreeView1.FindNodeById(categoryId.ToString());
        if (node != null)
        {
            node.TemplateId = "SelectedCategoryTemplate";
            node.Expanded = true;
            EnsureTreeNodeVisible(node);
        }
    }

    private void GetCategoryTreeNodes()
    {
        string cacheKey = "53741CA849784C8DA262F53638A2A38F";
        string categoryNodes = null;

        if (_CacheDuration > 0)
        {
            // Check to see if category treeview is in the cache
            categoryNodes = Cache.Get(cacheKey) as string;
        }

        if (categoryNodes == null)
        {
            GetCategoryNodesRecursive(0, TreeView1.Nodes);
            Cache.Insert(cacheKey, TreeView1.GetXml(), null, DateTime.Now.AddMinutes(_CacheDuration), System.Web.Caching.Cache.NoSlidingExpiration, System.Web.Caching.CacheItemPriority.High, null);
        }
        else
        {
            // Load Nodes from the cached xml string
            TreeView1.LoadXml(categoryNodes);
        }
    }

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

    private void EnsureTreeNodeVisible(TreeViewNode node)
    {
        TreeViewNode currentNode = node.ParentNode;

        while (currentNode != null)
        {
            currentNode.Expanded = true;
            currentNode = currentNode.ParentNode;
        }
    }
</script>
<asp:Panel ID="MainPanel" runat="server" CssClass="section">
    <asp:Panel ID="HeaderPanel" runat="server" CssClass="header">
	    <h2 class="header"><asp:Localize ID="HeaderTextLabel" runat="server" Text="Categories"></asp:Localize></h2>
    </asp:Panel>
	<asp:Panel ID="TreePanel" runat="server" CssClass="content">
        <ComponentArt:TreeView id="TreeView1"
            DragAndDropEnabled="false" 
            NodeEditingEnabled="false"
            KeyboardEnabled="true"
            CssClass="CatTreeView" 
            NodeCssClass="CatTreeNode" 
            SelectedNodeCssClass="CatSelectedTreeNode" 
            HoverNodeCssClass="CatHoverTreeNode"
            DefaultImageWidth="16" 
            DefaultImageHeight="16"
            ExpandCollapseImageWidth="15"
            ExpandCollapseImageHeight="15"
            NodeIndent="16"
            ItemSpacing="3" 
            NodeLabelPadding="3"
            CollapseImageUrl="exp.gif"
            ExpandImageUrl="col.gif"
            ParentNodeImageUrl="folders.gif" 
            LeafNodeImageUrl="folder.gif" 
            ShowLines="false" 
            EnableViewState="false"
            runat="server">
            <Templates>
                <ComponentArt:NavigationCustomTemplate id="SelectedCategoryTemplate">
                    <Template>
                        <b><%# DataBinder.Eval(Container.DataItem, "Text") %></b>
                    </Template>
                </ComponentArt:NavigationCustomTemplate>
            </Templates>
        </ComponentArt:TreeView> 
    </asp:Panel>
</asp:Panel>

Add the following to /App_Themes/[YOUR CURRENT THEME]/style.css

Code: Select all

/******************************************************************************************/
/* styles for the category treeview (such as might show on the home page)                 */
/******************************************************************************************/

.CatTreeView 
{ 
	background-color:white;
	padding-top:4px; 
	padding-left:1px; 
	border: #7C7C94 1px solid; 
	cursor:default; 
}

.CatTreeNode 
{ 
	font-family: tahoma; 
	font-size: 11px; 
	padding-top:2px;
	padding-bottom:1px;
	padding-left: 3px; 
	padding-right: 3px; 
}

.CatGrayedTreeNode 
{ 
	font-family: tahoma; 
	font-size: 11px; 
	padding-top:2px;
	padding-bottom:1px;
	padding-left: 3px; 
	padding-right: 3px; 
	color:gray; 
	cursor:default;
}

.CatHoverTreeNode 
{ 
	font-family: tahoma; 
	font-size: 11px; 
	text-decoration:underline; 
	padding-top:2px;
	padding-bottom:1px;
	padding-left: 3px; 
	padding-right: 3px; 
	cursor: default; 
}

.CatSelectedTreeNode 
{ 
	font-family: tahoma; 
	font-size: 11px; 
	background-color: gray; 
	color:white; 
	padding-top:2px;
	padding-bottom:1px;
	padding-left: 3px; 
	padding-right: 3px; 
	cursor: default; 
}

/******************************************************************************************/
/* end styles for the category treeview (such as might show on the home page)             */
/******************************************************************************************/

Create a /App_Themes/[YOUR CURRENT THEME]/Images/CategoryTreeView folder and place the following images in the folder:
folders.gif

folder.gif

col.gif

exp.gif

Once all of that is done the following can be put in Standard Sidebar 1

Code: Select all

[[ConLib:Custom\CategoryTreeView]]

There is an optional parameter CacheDuration which will control how many minutes the treeview is cached in memory on the server default is 60 minutes.

If anybody has any feedback (good or bad) I'd be interested to hear.

compunerdy · Post by **compunerdy** » Tue Dec 11, 2007 8:33 am

I tested it and it seems to work great!! I like how it keeps the current category expanded. Much better design..thanks for sharing!!

The only issue I see is that I cant get it to change the menu after I changed the sort order. This is probably due to the chache and will fix itself in 60 minutes???

I changed the CSS around but people can try it out on my site
http://66.232.122.231/Default.aspx

Bumbles · Post by **Bumbles** » Tue Dec 11, 2007 4:11 pm

compunerdy wrote: The only issue I see is that I cant get it to change the menu after I changed the sort order. This is probably due to the chache and will fix itself in 60 minutes???

I changed the CSS around but people can try it out on my site
http://66.232.122.231/Default.aspx

Thanks for putting it in a public place for people to look at. My dev site isn't accessible from the internet.

I'd say the caching was the cause of your problem, as I had the same issues

I created a small .aspx that I can use to manually clear the cache. Create /ClearCategoryTreeCache.aspx and put the following into it:

Code: Select all

<%@ Page Language="C#" MasterPageFile="~/Layouts/Scriptlet.master" Inherits="CommerceBuilder.Web.UI.AbleCommercePage" Title="Clear Category TreeView Cache" %>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        string cacheKey = "53741CA849784C8DA262F53638A2A38F";
        Cache.Remove(cacheKey);
        Response.Redirect(NavigationHelper.GetHomeUrl());
    }
</script>

Whenever you want the cache cleared, just manually navigate to the above URL.

laramp · Post by **laramp** » Fri Dec 14, 2007 11:02 am

Great navigation....
This should be included in the final release.

Thanks for sharing it!!!!!

The cache clearing should also be included in the final release when updates are done to the category structure.

LR

AbleCommerce Shopping Cart Software

Navigation treeview or flyout menus?

Navigation treeview or flyout menus?

Treeview

Thanks!