Category Tabs Control

This forum is where we'll mirror posts that are of value to the community so they may be more easily found.
Post Reply
User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Category Tabs Control

Post by mazhar » Thu Dec 04, 2008 10:57 am

You can use this control to show the categories as tabs. In order to install the control extract the attachment and place the images folder contents into the images folder of current store theme. Place the CategoryTab.css file into the current store theme as well. Place the ASCX and ASCX.CS files in the ConLib folder and user it like any other ConLib control on store pages.

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

Re: Category Tabs Control

Post by jmestep » Fri Dec 05, 2008 6:58 am

Do you happen to have tab images that match the other Glass themes?
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
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Category Tabs Control

Post by mazhar » Sat Dec 06, 2008 5:47 am

No I haven't. Perhaps you can do some trick by using the Photoshop. You can try the Hue/Saturation option for a quick fix. Something like below

dappy2
Commander (CMDR)
Commander (CMDR)
Posts: 114
Joined: Wed Jan 18, 2006 5:53 pm
Contact:

Re: Category Tabs Control

Post by dappy2 » Thu Dec 11, 2008 10:38 am

Is there a way to add the showing of subcategories to this?

I don't actually want a horizontal tab navigation - but this outputs pretty much the exact code I'm looking for to make a custom left navigation. I just don't know how to pull the subcategories into this.

I don't like the treeview (way - way too much code generated) and I'm completely comfortable with the CSS etc to get what I'm looking for.

(basically I'm trying to recreate this: http://www.devonsuperstore.com)

Thanks,
Dappy

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Category Tabs Control

Post by mazhar » Fri Dec 12, 2008 4:29 am

Is there a way to add the showing of subcategories to this?
The control lists the sub categories as well. Try by putting control on category display page.
I don't actually want a horizontal tab navigation - but this outputs pretty much the exact code I'm looking for to make a custom left navigation. I just don't know how to pull the subcategories into this.

I don't like the treeview (way - way too much code generated) and I'm completely comfortable with the CSS etc to get what I'm looking for.

(basically I'm trying to recreate this: http://www.devonsuperstore.com)
Please have a look at this post. It may help you.
viewtopic.php?f=42&t=7829

dappy2
Commander (CMDR)
Commander (CMDR)
Posts: 114
Joined: Wed Jan 18, 2006 5:53 pm
Contact:

Re: Category Tabs Control

Post by dappy2 » Fri Dec 12, 2008 8:05 am

It doesn't seem to display the subcategories all the time. Based on everything I have been reading for the past few days on these forums, the only way to get all the categories & subcategories to display at all times is to use the treeview control or the componant art UI.

Unfortunately for me that just won't do - those controls generate entirely too much excess code and I'd rather just hard code a navigation.

It would be nice to just have the menu render:

Code: Select all

<h2>Heading</h2>
<ul>
    <li><a href="top-category-one.aspx" title="Something for SEO" class="topCategory">Top Category One</a>
       <!--if there are sub-categories for Top Category One Then -->
       <ul>
            <li><a href="sub-category-one.aspx" title="Somethign for SEO" class="subCategory">Sub Category One</a></li>
            <li><a href="sub-category-Two.aspx" title="Somethign for SEO" class="subCategory">Sub Category Two</a></li>
            <li><a href="sub-category-Three.aspx" title="Somethign for SEO" class="subCategory">Sub Category Three</a></li>
       </ul>
    </li>
   <li><a href="top-category-two.aspx" title="Something for SEO" class="topCategory">Top Category Two</a></li>
</ul>
Etc etc. That would make it so incredibly easy to create any look of navigation that a designer would want - Horizontal, Vertical, Tabs etc. Maybe with a class="topCategory activeTop" added when in the specific category (it would be needed for the tabbed nav).

Just my wish - I figured out how to do it in able 5.5 many years ago but now I know squat about C# - I'm a designer by trade not really a developer. :)

Thanks,
Dappy

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Category Tabs Control

Post by mazhar » Fri Dec 12, 2008 9:11 am

In order to show all categories you need to use the LoadForStore method and also some adjustments in code. Here is the updated code file, place replace the control's cs file with this one.

dappy2
Commander (CMDR)
Commander (CMDR)
Posts: 114
Joined: Wed Jan 18, 2006 5:53 pm
Contact:

Re: Category Tabs Control

Post by dappy2 » Fri Dec 12, 2008 9:40 am

Thanks! Thats awesome - is there anyway to differentiate between categories and subcategories? Even if it was as simple as class="CategoryTab" & class="SubCategoryTab" ?

That would let me style the whole menu fantastically.

Thanks,
Dappy

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Category Tabs Control

Post by mazhar » Fri Dec 12, 2008 10:30 am

I don't think so that simply by loading through LoadForStore provides a way to set the css classes appropriately.

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Category Tabs Control

Post by mazhar » Fri Dec 12, 2008 10:34 am

It would be better to load the categories recursivly and keep its css class information with each category. Try following control. You can adjust the classes in the code. Each category other then the root will contain its level information appended with its css class. For example

RootCategoryTab
CategoryTab-1
CategoryTab-2
CategoryTab-1

dappy2
Commander (CMDR)
Commander (CMDR)
Posts: 114
Joined: Wed Jan 18, 2006 5:53 pm
Contact:

Re: Category Tabs Control

Post by dappy2 » Fri Dec 12, 2008 10:47 am

Thanks! That is absolutely perfect. This code should allow anyone to make any kind of full left navigation they want by editing the CSS (maybe not flyouts). And the rendered HTML is wonderfully lightweight.

- Sorry I get excited about .Net rendering nice HTML.

Thanks so much!

Dappy

sdlong02
Lieutenant Commander (LCDR)
Lieutenant Commander (LCDR)
Posts: 95
Joined: Mon Jan 19, 2009 2:33 pm

Re: Category Tabs Control

Post by sdlong02 » Thu Aug 13, 2009 12:37 pm

mazhar wrote:It would be better to load the categories recursivly and keep its css class information with each category. Try following control. You can adjust the classes in the code. Each category other then the root will contain its level information appended with its css class. For example

RootCategoryTab
CategoryTab-1
CategoryTab-2
CategoryTab-1
Is it possible to do something similar, but for the Admin side? I'm looking for a function to be able to display all of my categories in a text list that hyperlinks to the edit page, or has the same controls as the Catalog -> Browse function

Even an edit to the Browse file itself to display all parent and child categories in a sortable list instead of the tree browsing navigation style.

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Category Tabs Control

Post by mazhar » Mon Aug 17, 2009 8:06 am

For admin side all you need is to adjust its navigate URL. For example replace the control's following code

Code: Select all

<asp:HyperLink ID="CategoryLink" runat="server" NavigateUrl='<%#Eval("Category.NavigateUrl") %>'><%#Eval("Category.Name") %></asp:HyperLink>
with

Code: Select all

<asp:HyperLink ID="CategoryLink" runat="server" NavigateUrl='<%# string.Format(Eval("CategoryId", "~Admin/Catalog/EditCategory.aspx?CategoryId={0}")) %>'><%#Eval("Category.Name") %></asp:HyperLink>

mambaza
Ensign (ENS)
Ensign (ENS)
Posts: 4
Joined: Thu Jan 14, 2010 1:15 pm

Re: Category Tabs Control

Post by mambaza » Fri Jan 22, 2010 10:02 am

This is great.

Just FYI, probably because I pasted the [[conlib]] line in the wrong place, I got the conlib line entry on the page as text, rather than the program calling it. Not important, I pasted the relevant code into my category grid page and it runs fine.

Currently, we have the tabstrip laid out just above the sort bar, with each tab item aligned left to right, and wrapping to the page width. See screenshot. (Hopefully the adult subject matter isn't a problem here....)

Is there a way to manipulate this so that the last line is closer to full page width, and the first line contains less items? Just htough it would look a little better that way.

so this:
Image

could look more like this:
Image

dejoux
Ensign (ENS)
Ensign (ENS)
Posts: 3
Joined: Fri Oct 09, 2009 10:01 am

Re: Category Tabs Control

Post by dejoux » Sat Oct 09, 2010 2:36 pm

Is there a way to modify the SimpleCategoryList Scriplet show the top level Categories only on all SubCategories and/or Product pages? It is nice to show SubCategories within Categories, but, customers need direct access to other Categoies regardless of which Category they happen to be looking at. And, they do not see the Path line.

We have been using the CategoryDropDownList, which does exactly as described above. But it is ugly.

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

Re: Category Tabs Control

Post by jmestep » Sun Oct 10, 2010 11:51 am

You can call it like this:
[[ConLib:SimpleCategoryList CategoryId="0"]]
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

Post Reply