OK, I accept

This site uses cookies. By using this site, you acknowledge and accept this.

Your basket is empty
Login not logged in

Full Knowledgebase Listing

Shop by Brand - Shop by Category - multiple menus

[#37] Last update 31 May 2012

Many sites want to have multiple navigation routes to products. Typically this will include a 'shop-by-brand' and 'shop-by-category', for example. It is simple to achieve this with Kartris

The first step is to organize your data so you have two top level categories - 'shop by brand' and 'shop by category'. Next, create subcategories representing the various brands and product categories within these.

You can then link products to multiple categories from the back end. Edit or create a product and in the category selection text box, enter a few characters from a brand name, and a list of matching categories appears - select the brand and click to add it to the list. Next do the same for the product type. Your product now has two parent categories (one 'brand' and one 'category). It will appear in both.

At this point, your site will have a category menu with two entries at the top level. For aesthetic reasons, you would probably prefer to have two separate menus. This way, you can have a title for each and choose the position of each, as well as applying different CSS to each (for example, to have each a different colour). This is simple to achieve by making a small modification to your Template.master page (in your site's skin).

First we need to hide the existing category menu. You can remove it (you will need to tidy up the .vb file too or it will give an error), but it is simpler just to hide it. Open up the Template.master and find this:

<asp:PlaceHolder ID="phdCategoryMenu" runat="server">

Change it to:

<asp:PlaceHolder ID="phdCategoryMenu" runat="server" Visible="false">

Now you need to add your new menu controls. In this case, we are adding two accordion controls:

<user:CategoryMenuAccordion ID="UC_Categorymenu" RootCategoryID="1"  runat="server" />
<user:CategoryMenuAccordion ID="UC_Categorymenu2" RootCategoryID="2"  runat="server" />

The RootCategoryID for each control should be set to the ID of that category (in our case, the shop-by-brand and shop-by-category categories). To find the ID of a category, just hover over the link to it in the treeview in the back end.

The new user controls you added must each have a unique name. So for example, we have added UC_Categorymenu and UC_Categorymenu2. You can add further ones if you want a third or fourth navigation route.

Doing multiple navigation menus in this way also takes care of the breadcrumbtrail - 'shop-by-brand' or 'shop-by-manufacturer' will automatically show up as the first level category.

Powered by kartris