AbleCommerce Shopping Cart Software


http://forums.ablecommerce.com/

Horizontal Category Menu

http://forums.ablecommerce.com/viewtopic.php?f=47&t=8566

Page 1 of 2

Horizontal Category Menu

Posted: Thu Oct 16, 2008 6:51 am
by mazhar
This control will display horizontal categories menu when placed in the store pages. The control makes use of the ASP.NET menu control. You can extend the menu styles to meet your own needs. In order to use the control extract the attachment and place CategoryMenuEx.ascx file into you ConLib folder and then use it in scriptlets as below.

Code: Select all

[[ConLib:CategoryMenuEx]]
Edit Made:- I have uploaded the modified version of the control to include the fix for IE8 and Safari discussed in later posts.

Re: Horizontal Category Menu

Posted: Fri Oct 17, 2008 12:47 pm
by mazhar
If you do not want the extra HTML, i mean you do not want to the caption etc. Edit the CategoryMenuEx.ascx file and change the following contents

Code: Select all

<div class="pageHeader">
    <div class="caption">
        <h1>
            <asp:Localize ID="Caption" runat="server" Text="Categories"></asp:Localize>
        </h1>
    </div>
</div>
<div style="clear: both; margin-top: 6px;">
    <asp:Menu ID="CategoryMenu" runat="server" Orientation="Horizontal" BackColor="#E3EAEB" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="Small" ForeColor="#666666" StaticSubMenuIndent="10px">
        <StaticSelectedStyle BackColor="#1C5E55" />
        <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
        <DynamicHoverStyle BackColor="#666666" ForeColor="White" />
        <DynamicMenuStyle BackColor="#E3EAEB" />
        <DynamicSelectedStyle BackColor="#1C5E55" />
        <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
        <StaticHoverStyle BackColor="#666666" ForeColor="White" />
    </asp:Menu>
</div>
and make them look like

Code: Select all

<asp:Menu ID="CategoryMenu" runat="server" Orientation="Horizontal" BackColor="#E3EAEB" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="Small" ForeColor="#666666" StaticSubMenuIndent="10px">
        <StaticSelectedStyle BackColor="#1C5E55" />
        <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
        <DynamicHoverStyle BackColor="#666666" ForeColor="White" />
        <DynamicMenuStyle BackColor="#E3EAEB" />
        <DynamicSelectedStyle BackColor="#1C5E55" />
        <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
        <StaticHoverStyle BackColor="#666666" ForeColor="White" />
    </asp:Menu>

Re: Horizontal Category Menu

Posted: Mon Feb 02, 2009 11:12 am
by mfreeze
Mazhar,

Where can I find all possible settings for this menu. For example, if I wanted a background image instead of a color or if I wanted to change the arrow to another character?

Re: Horizontal Category Menu

Posted: Mon Feb 02, 2009 4:03 pm
by mfreeze
Never mind. I found it. Changed the code to this:

<asp:Menu ID="CategoryMenu" runat="server" Orientation="Vertical" BackColor="#E3EAEB" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="Small" ForeColor="#666666" StaticSubMenuIndent="10px" width="194px">
<StaticSelectedStyle CssClass="menu_item" />
<StaticMenuItemStyle CssClass="menu_item" />
<StaticHoverStyle CssClass="menu_hover" />
<DynamicHoverStyle CssClass="menu_hover" />
<DynamicMenuStyle CssClass="menu_item" />
<DynamicSelectedStyle CssClass="menu_item" />
<DynamicMenuItemStyle CssClass="menu_item" />

Worked like a charm.

Re: Horizontal Category Menu

Posted: Tue Feb 03, 2009 6:26 am
by mazhar
A good tutorial about ASP.NET menu control
http://quickstarts.asp.net/QuickStartv2 ... /menu.aspx

Re: Horizontal Category Menu

Posted: Tue Mar 24, 2009 3:52 am
by mazhar
In order to include all catalog nodes to menu you need to update PopulateMenuItem method as below

Code: Select all

private void PopulateMenuItem(MenuItem parentMenu,int categoryId)
    {
        CategoryCollection children = new CategoryCollection();
        CatalogNodeCollection otherNodes = new CatalogNodeCollection();

        CatalogNodeCollection nodes = CatalogNodeDataSource.LoadForCategory(categoryId);
        foreach (CatalogNode node in nodes)
        {
            if (node.CatalogNodeType == CatalogNodeType.Category)
                children.Add((Category)node.ChildObject);
            else
                otherNodes.Add(node);
        }
        
        foreach (Category child in children)
        {
            MenuItem menuItem = new MenuItem();
            menuItem.Text = child.Name;
            menuItem.Value = child.CategoryId.ToString();
            if (CategoryDataSource.CountForParent(child.CategoryId) > 1)
                PopulateMenuItem(menuItem, child.CategoryId);
            menuItem.NavigateUrl = child.NavigateUrl;
            parentMenu.ChildItems.Add(menuItem);

            foreach (CatalogNode node in otherNodes)
            {
                menuItem = new MenuItem();
                menuItem.Text = node.Name;
                menuItem.Value = node.CatalogNodeId.ToString();
                menuItem.NavigateUrl = node.NavigateUrl;
                parentMenu.ChildItems.Add(menuItem);
            }
        }

Re: Horizontal Category Menu

Posted: Fri May 29, 2009 1:32 pm
by sdlong02
I integrated the horizontal style menu at the bottom of my header as a new row, but for whatever reason when I try to expand one of the category selections the first row shifts to the right.

Code: Select all

<table id="storeHeader" cellpadding="0" cellspacing="0">
	
<tr>
		<td class="logo">
		        <a href="~/Default.aspx">[[ConLib:StoreLogo]]</a>
		</td>
		<td class="headerContent" align="right" valign="top">
			<div class="shortcuts">
				#if($customer.IsAnonymous)
					<a href="~/Login.aspx" class="login">Login</a>
				#else
					<a href="~/Logout.aspx" class="login">Logout</a>
				#end
				<a href="~/Members/MyAccount.aspx" class="acct">Account</a>
				<a href="~/Members/MyWishlist.aspx" class="wishlist">Wishlist</a>
				<a href="~/Basket.aspx" class="basket">Basket</a>
				#if($customer.IsAdmin)
					<a href="~/Admin/Default.aspx" class="admin">Admin</a>
				#end
			</div>
			<div class="search">
				[[ConLib:SimpleSearch]]
			</div>
		</td>
	</tr>
	<tr>
		<td class="navigation" colspan="2">
			<div class="content" style="float:left;">
				<a href="~/Default.aspx" class="tab">Home</a>
				<a href="~/Search.aspx" class="tab">Product Finder</a>	
				<a href="~/AdvancedSearch.aspx" class="tab">Advanced Search</a>	
				#if ($store.Currencies.Count > 1 ) 
					<a href="~/Currencies.aspx" class="tab">Currencies</a>
				#end
				<a href="~/ContactUs.aspx" class="tab">Contact Us</a>
			</div>
		</td>
	</tr>

<tr>
<td style="background-color: #1C5E55">
<div style="float: left;"> 
[[Conlib:Custom\CategoryMenuEx]]
    </td>
    </tr>
</div>
</table>
That's what my scriptlet looks like -- so when I try to expand a menu, the top row of shortcuts shifts completely to the right, usually off the page. When I refresh the page it sets back to it's dynamic position at the right side of the window.

Re: Horizontal Category Menu

Posted: Sat May 30, 2009 2:29 am
by mazhar
Change your following part

Code: Select all

<tr>
<td style="background-color: #1C5E55">
<div style="float: left;">
[[Conlib:Custom\CategoryMenuEx]]
    </td>
    </tr>
</div>
</table>
to

Code: Select all

<tr>
<td style="background-color: #1C5E55" colspan="2">
<div style="float: left;">
[[Conlib:Custom\CategoryMenuEx]]
</div>
    </td>
    </tr>

</table>

Re: Horizontal Category Menu

Posted: Wed Jun 03, 2009 10:18 am
by sdlong02
Thanks Mazhar,

worked nicely - wish I could figure the simple stuff out :cry:

Re: Horizontal Category Menu

Posted: Wed Jun 24, 2009 4:18 pm
by efficiondave
I prefer using the Component Art menu for this. It's trivial to adapt it from the code posted for the Vertical/Left Flyout Menu from this thread.
viewtopic.php?f=47&t=7986

Re: Horizontal Category Menu

Posted: Wed Jul 08, 2009 4:51 pm
by deadlybuda
Hi! What would I edit so that only certain categories are displayed?

Re: Horizontal Category Menu

Posted: Thu Jul 09, 2009 3:25 am
by mazhar
you can put some code to make sure that control doesn't add categories with specific CategoryId to menu.

Re: Horizontal Category Menu

Posted: Thu Jul 09, 2009 10:19 am
by deadlybuda
Hi there Master Yoda!
I was playing with the code, but I can't seem to figure out where the script is pulling the Category ids from. I'm new to ASP, so I've been fumbling around. If it makes any difference, I am using the MSSQL 2005 express database.

Re: Horizontal Category Menu

Posted: Thu Jul 09, 2009 10:40 am
by mazhar
Edit the control file and replace

Code: Select all

<script runat="server"> 
................
.................
</script>
part with following control

Code: Select all

<script runat="server">
    
    int _CategoryId;
    int[] _BannedCategories = new int[] { 5,8,9 };
    System.Collections.ArrayList _BannedCategoriesList = new ArrayList();
    protected void Page_Load(object sender, EventArgs e)
    {
        _CategoryId = PageHelper.GetCategoryId();
        if (!Page.IsPostBack)
        {
            _BannedCategoriesList.AddRange(_BannedCategories);
            PopulateMenu();
        }
    }
    
    private void PopulateMenu() 
    {
        CategoryMenu.Items.Clear();
        CategoryCollection children = CategoryDataSource.LoadForParent(0, true);
        foreach (Category child in children)
        {
            if (_BannedCategoriesList.Contains(child.CategoryId))
                continue;
            MenuItem menuItem = new MenuItem();
            menuItem.Text = child.Name;
            menuItem.Value = child.CategoryId.ToString();
            menuItem.NavigateUrl = child.NavigateUrl;
            if (CategoryDataSource.CountForParent(child.CategoryId) > 0)
                PopulateMenuItem(menuItem, child.CategoryId);
            CategoryMenu.Items.Add(menuItem);
        }
        CategoryMenu.DataBind();
    }
    private void PopulateMenuItem(MenuItem parentMenu,int categoryId)
    {
        CategoryCollection children = CategoryDataSource.LoadForParent(categoryId, true);
        foreach (Category child in children)
        {
            if (_BannedCategoriesList.Contains(child.CategoryId))
                continue;
            MenuItem menuItem = new MenuItem();
            menuItem.Text = child.Name;
            menuItem.Value = child.CategoryId.ToString();
            if (CategoryDataSource.CountForParent(child.CategoryId) > 1)
                PopulateMenuItem(menuItem, child.CategoryId);
            menuItem.NavigateUrl = child.NavigateUrl;
            parentMenu.ChildItems.Add(menuItem);
        }
    }
</script>
Now Go to merchant module and have a look at the categories. For every category which you want to hide first click the edit option it will take you to the EditCategory.aspx page. In this page check its URL it will have CategoryId={some number} for example CategoryId=1 so this is your category id. Note this id and go back to the control file and enter it in following statement

Code: Select all

int[] _BannedCategories = new int[] { 5,8,9 };
For example 5,8,9 are the category ids of all those categories I don't want the control to render.

Re: Horizontal Category Menu

Posted: Thu Jul 09, 2009 10:57 am
by deadlybuda
THANK YOU!!!!! :D :D :D :D :D :D :D
Worked perfectly!
For future reference, where is the list of banned categories coming from?

Re: Horizontal Category Menu

Posted: Thu Jul 09, 2009 11:20 am
by mazhar
You are deciding which category to banned by making an entry of it. See following code part

Code: Select all

int[] _BannedCategories = new int[] { 5,8,9 };
    System.Collections.ArrayList _BannedCategoriesList = new ArrayList();
    protected void Page_Load(object sender, EventArgs e)
    {
        _CategoryId = PageHelper.GetCategoryId();
        if (!Page.IsPostBack)
        {
            _BannedCategoriesList.AddRange(_BannedCategories);
            PopulateMenu();
        }
    }
Where in new int[] { 5,8,9 }; where you are telling code not to show these categories
and _BannedCategoriesList.AddRange(_BannedCategories); is converting array to list for easy search operation against categories. So all you need is to create an entry about any category you don't want to be listed by control in following code part
{ 5,8,9 }. For example if there is a category with id 10 then update code would be

Code: Select all

int[] _BannedCategories = new int[] { 5,8,9,10 };

Re: Horizontal Category Menu

Posted: Thu Jul 09, 2009 11:41 am
by deadlybuda
I understand that. Does the CategoryMenuEx script connect directly with the database, or does it call a different file that queries the database?

Re: Horizontal Category Menu renedering problems

Posted: Thu Jul 09, 2009 11:56 am
by Willisski
I have been playing around with this menu and it works great in firefox. but in IE8 turns all of the sub menus white. Has anyone else had these issues?

Greg

Re: Horizontal Category Menu

Posted: Sun Jul 12, 2009 5:27 am
by windsurfer
Hi Mazhar
I installed your menu utility and wanted to edit the file so it would expand. I replaced from line 13 to 42 with your modification and got this error message " [[ConLib:CategoryMenuEx]] c:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\Temporary ASP.NET Files\root\884df278\f14e597f\App_Web_categorymenuex.ascx.61f0840.cvfkvxpa.0.cs(286): error CS1513: } expected " so i added another closing bracket at line 46
after i did that i get an error message saying " [[ConLib:CategoryMenuEx]] c:\able\ConLib\CategoryMenuEx.ascx(10): error CS0103: The name 'PopulateMenu' does not exist in the current context "

Am i missing something ?
Or do you perhaps have the full [[ConLib:CategoryMenuEx]] file available that allows for all categories and subcategories to expand?

Re: Horizontal Category Menu

Posted: Mon Jul 13, 2009 5:04 am
by mazhar
Here are the complete modified contents with hiding specific categories support

Code: Select all

<%@ Control Language="C#" ClassName="CategoryMenuEx" %>

<script runat="server">
    
    int _CategoryId;
    int[] _BannedCategories = new int[] { 5,8,9 };
    System.Collections.ArrayList _BannedCategoriesList = new ArrayList();
    protected void Page_Load(object sender, EventArgs e)
    {
        _CategoryId = PageHelper.GetCategoryId();
        if (!Page.IsPostBack)
        {
            _BannedCategoriesList.AddRange(_BannedCategories);
            PopulateMenu();
        }
    }
    
    private void PopulateMenu() 
    {
        CategoryMenu.Items.Clear();
        CategoryCollection children = CategoryDataSource.LoadForParent(0, true);
        foreach (Category child in children)
        {
            if (_BannedCategoriesList.Contains(child.CategoryId))
                continue;
            MenuItem menuItem = new MenuItem();
            menuItem.Text = child.Name;
            menuItem.Value = child.CategoryId.ToString();
            menuItem.NavigateUrl = child.NavigateUrl;
            if (CategoryDataSource.CountForParent(child.CategoryId) > 0)
                PopulateMenuItem(menuItem, child.CategoryId);
            CategoryMenu.Items.Add(menuItem);
        }
        CategoryMenu.DataBind();
    }
    private void PopulateMenuItem(MenuItem parentMenu,int categoryId)
    {
        CategoryCollection children = CategoryDataSource.LoadForParent(categoryId, true);
        foreach (Category child in children)
        {
            if (_BannedCategoriesList.Contains(child.CategoryId))
                continue;
            MenuItem menuItem = new MenuItem();
            menuItem.Text = child.Name;
            menuItem.Value = child.CategoryId.ToString();
            if (CategoryDataSource.CountForParent(child.CategoryId) > 1)
                PopulateMenuItem(menuItem, child.CategoryId);
            menuItem.NavigateUrl = child.NavigateUrl;
            parentMenu.ChildItems.Add(menuItem);
        }
    }
</script>
<div class="pageHeader">
    <div class="caption">
        <h1>
            <asp:Localize ID="Caption" runat="server" Text="Categories"></asp:Localize>
        </h1>
    </div>
</div>
<div style="clear: both; margin-top: 6px;">
    <asp:Menu ID="CategoryMenu" runat="server" Orientation="Horizontal" BackColor="#E3EAEB" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="Small" ForeColor="#666666" StaticSubMenuIndent="10px">
        <StaticSelectedStyle BackColor="#1C5E55" />
        <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
        <DynamicHoverStyle BackColor="#666666" ForeColor="White" />
        <DynamicMenuStyle BackColor="#E3EAEB" />
        <DynamicSelectedStyle BackColor="#1C5E55" />
        <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" 
            BackColor="#FF9933" />
        <StaticHoverStyle BackColor="#666666" ForeColor="White" />
    </asp:Menu>
</div>

Re: Horizontal Category Menu

Posted: Mon Jul 13, 2009 5:16 am
by windsurfer
Hi Mazhar
Modified the file and get an error "[[ConLib:CategoryMenuEx]] C:\able\ConLib\CategoryMenuEx.ascx(3): error BC30188: Declaration expected."
Am I missing something?
Wil

Re: Horizontal Category Menu

Posted: Mon Jul 13, 2009 5:34 am
by mazhar
Sorry that was due to missing definition line in above code. I just updated the code so try it again from above post.

Re: Horizontal Category Menu

Posted: Mon Jul 13, 2009 5:43 am
by windsurfer
Hi Mazhar
Works like a clean diaper on a freshly washed baby but still not showing more than 1 category when dropped down. Subs don't show.

Re: Horizontal Category Menu

Posted: Mon Jul 13, 2009 5:57 am
by mazhar
Its because of following line

Code: Select all

int[] _BannedCategories = new int[] { 5,8,9 };
just make it look like

Code: Select all

int[] _BannedCategories = new int[] {  };
and it won't stop any category from listing. In fact the last mod you merged back in to actual control file is related to stop specific categories to be shown. So if you don't need this functionality you can just use the control available in actual attachment.

Re: Horizontal Category Menu

Posted: Mon Jul 13, 2009 6:08 am
by windsurfer
Yes that stops the banning but i still don't get any subcategories showing in the drop down.
All times are UTC-05:00
Page 1 of 2
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/