Navigation treeview or flyout menus?

This forum is where we'll mirror posts that are of value to the community so they may be more easily found.
Post Reply
Haak
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 43
Joined: Thu Sep 20, 2007 10:10 am

Navigation treeview or flyout menus?

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

User avatar
Shopping Cart Admin
AbleCommerce Admin
AbleCommerce Admin
Posts: 3054
Joined: Mon Dec 01, 2003 8:41 pm
Location: Vancouver, WA
Contact:

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?
Thanks for your support

Shopping Cart Guru
AbleCommerce.com
Follow us on Facebook

Haak
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 43
Joined: Thu Sep 20, 2007 10:10 am

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

User avatar
Shopping Cart Admin
AbleCommerce Admin
AbleCommerce Admin
Posts: 3054
Joined: Mon Dec 01, 2003 8:41 pm
Location: Vancouver, WA
Contact:

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.
Thanks for your support

Shopping Cart Guru
AbleCommerce.com
Follow us on Facebook

Haak
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 43
Joined: Thu Sep 20, 2007 10:10 am

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

Awsome!

User avatar
freedom1029
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 35
Joined: Thu Nov 01, 2007 1:40 pm
Location: Montreal

Treeview

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
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 43
Joined: Thu Sep 20, 2007 10:10 am

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

User avatar
Shopping Cart Admin
AbleCommerce Admin
AbleCommerce Admin
Posts: 3054
Joined: Mon Dec 01, 2003 8:41 pm
Location: Vancouver, WA
Contact:

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.
Thanks for your support

Shopping Cart Guru
AbleCommerce.com
Follow us on Facebook

User avatar
compunerdy
Admiral (ADM)
Admiral (ADM)
Posts: 1275
Joined: Sun Nov 18, 2007 3:55 pm

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?

User avatar
compunerdy
Admiral (ADM)
Admiral (ADM)
Posts: 1275
Joined: Sun Nov 18, 2007 3:55 pm

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

removed
Last edited by compunerdy on Thu Feb 21, 2008 9:37 am, edited 1 time in total.

User avatar
freedom1029
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 35
Joined: Thu Nov 01, 2007 1:40 pm
Location: Montreal

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

User avatar
calvis
Rear Admiral (RADM)
Rear Admiral (RADM)
Posts: 708
Joined: Tue Jan 27, 2004 3:57 pm
Location: Redmond, WA

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

I like it as well. Very simple and eloquent.

User avatar
jmestep
AbleCommerce Angel
Posts: 8164
Joined: Sun Feb 29, 2004 8:04 pm
Location: Dayton, OH
Contact:

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.
Judy Estep
Web Developer
jestep@web2market.com
http://www.web2market.com
708-653-3100 x209
New search report plugin for business intelligence:
http://www.web2market.com/Search-Report ... -P154.aspx

User avatar
calvis
Rear Admiral (RADM)
Rear Admiral (RADM)
Posts: 708
Joined: Tue Jan 27, 2004 3:57 pm
Location: Redmond, WA

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. :twisted:

User avatar
compunerdy
Admiral (ADM)
Admiral (ADM)
Posts: 1275
Joined: Sun Nov 18, 2007 3:55 pm

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

Removed..use the code posted below.
Last edited by compunerdy on Thu Feb 21, 2008 9:37 am, edited 1 time in total.

User avatar
freedom1029
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 35
Joined: Thu Nov 01, 2007 1:40 pm
Location: Montreal

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.
Last edited by freedom1029 on Thu Dec 06, 2007 2:35 pm, edited 1 time in total.

User avatar
jmestep
AbleCommerce Angel
Posts: 8164
Joined: Sun Feb 29, 2004 8:04 pm
Location: Dayton, OH
Contact:

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

Thank you, thank you, thank you.
Judy Estep
Web Developer
jestep@web2market.com
http://www.web2market.com
708-653-3100 x209
New search report plugin for business intelligence:
http://www.web2market.com/Search-Report ... -P154.aspx

User avatar
calvis
Rear Admiral (RADM)
Rear Admiral (RADM)
Posts: 708
Joined: Tue Jan 27, 2004 3:57 pm
Location: Redmond, WA

Thanks!

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.

User avatar
compunerdy
Admiral (ADM)
Admiral (ADM)
Posts: 1275
Joined: Sun Nov 18, 2007 3:55 pm

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

I will take all the Karma I can get :D

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

Bumbles
Ensign (ENS)
Ensign (ENS)
Posts: 14
Joined: Mon Dec 10, 2007 1:43 am

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 Image folder.gif Image col.gif Image exp.gif Image

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.
Last edited by Bumbles on Fri Feb 22, 2008 12:19 pm, edited 1 time in total.

User avatar
compunerdy
Admiral (ADM)
Admiral (ADM)
Posts: 1275
Joined: Sun Nov 18, 2007 3:55 pm

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
Ensign (ENS)
Ensign (ENS)
Posts: 14
Joined: Mon Dec 10, 2007 1:43 am

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.

User avatar
laramp
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 36
Joined: Tue Jul 25, 2006 1:01 pm

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

Post Reply