Navigation treeview or flyout menus?
Navigation treeview or flyout menus?
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
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
- Shopping Cart Admin
- AbleCommerce Admin
- Posts: 3055
- Joined: Mon Dec 01, 2003 8:41 pm
- Location: Vancouver, WA
- Contact:
- Shopping Cart Admin
- AbleCommerce Admin
- Posts: 3055
- Joined: Mon Dec 01, 2003 8:41 pm
- Location: Vancouver, WA
- Contact:
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.
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.
- freedom1029
- Lieutenant, Jr. Grade (LT JG)
- Posts: 35
- Joined: Thu Nov 01, 2007 1:40 pm
- Location: Montreal
Treeview
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.
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
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
- Shopping Cart Admin
- AbleCommerce Admin
- Posts: 3055
- Joined: Mon Dec 01, 2003 8:41 pm
- Location: Vancouver, WA
- Contact:
- compunerdy
- Admiral (ADM)
- Posts: 1283
- Joined: Sun Nov 18, 2007 3:55 pm
- compunerdy
- Admiral (ADM)
- Posts: 1283
- Joined: Sun Nov 18, 2007 3:55 pm
- freedom1029
- Lieutenant, Jr. Grade (LT JG)
- Posts: 35
- Joined: Thu Nov 01, 2007 1:40 pm
- Location: Montreal
- jmestep
- AbleCommerce Angel
- Posts: 8164
- Joined: Sun Feb 29, 2004 8:04 pm
- Location: Dayton, OH
- Contact:
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
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
- compunerdy
- Admiral (ADM)
- Posts: 1283
- Joined: Sun Nov 18, 2007 3:55 pm
Removed..use the code posted below.
Last edited by compunerdy on Thu Feb 21, 2008 9:37 am, edited 1 time in total.
- freedom1029
- Lieutenant, Jr. Grade (LT JG)
- Posts: 35
- Joined: Thu Nov 01, 2007 1:40 pm
- Location: Montreal
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.
- jmestep
- AbleCommerce Angel
- Posts: 8164
- Joined: Sun Feb 29, 2004 8:04 pm
- Location: Dayton, OH
- Contact:
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
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
- compunerdy
- Admiral (ADM)
- Posts: 1283
- Joined: Sun Nov 18, 2007 3:55 pm
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:
Add the following to /App_Themes/[YOUR CURRENT THEME]/style.css
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 ![Image](http://www.componentart.com/webui/demos/demos_control-specific/treeview/design/outlook_2003/images/exp.gif)
Once all of that is done the following can be put in Standard Sidebar 1
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.
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>
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) */
/******************************************************************************************/
folders.gif
![Image](http://www.componentart.com/webui/demos/demos_control-specific/treeview/design/outlook_2003/images/folders.gif)
![Image](http://www.componentart.com/webui/demos/demos_control-specific/treeview/design/outlook_2003/images/folder.gif)
![Image](http://www.componentart.com/webui/demos/demos_control-specific/treeview/design/outlook_2003/images/col.gif)
![Image](http://www.componentart.com/webui/demos/demos_control-specific/treeview/design/outlook_2003/images/exp.gif)
Once all of that is done the following can be put in Standard Sidebar 1
Code: Select all
[[ConLib:Custom\CategoryTreeView]]
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.
- compunerdy
- Admiral (ADM)
- Posts: 1283
- Joined: Sun Nov 18, 2007 3:55 pm
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
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.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
I'd say the caching was the cause of your problem, as I had the same issues
![Smile :)](./images/smilies/icon_smile.gif)
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>