The category menu module is something of a companion module to the category viewer module - but it's not required to be used together. This module will list out all of the available categories in a navigational format. When used on the same page as an actual category, the menu items you see will be in context to the category currently being viewed. However, you can also set it to other modes of behavior as well. Regardless to the way you choose to list categories, they'll be listed in an unordered list (UL) unless your design team changes that.
When a customer clicks on any of the category menu items, they'll be redirected to the respective category's landing page. If you create unique landing pages for a specific category, this module will be unaware of this in most cases.
The following prerequisites will be necessary to accomplish the goals of this article:
- Have access to your Hotcakes store administration
- Configure your store using the getting started wizard or do it manually
- Have one or more categories added to the store
The information provided here is based upon the default configuration of Hotcakes and the default viewset. Your views may have more or less functionality, depending on how it was implemented by your technical team.
Category Menu Module
If you've used the wizard to set-up your store pages, you'll already have a category menu module placed on the same page as your category viewer module. In a default configuration, that page will be found under the "Hotcakes Store" menu, on the Category Viewer page. In most instances, those pages will have been moved and/or renamed on your site though.
You'll see the category menu module on the right side of the page, which looks similar to the image below on an unaltered site. On your own site, this module will hopefully have been updated to better reflect the branding of your company.
This module has settings that are unique to how it works on your site for you and your customer. If you're not already familiar with how module settings work, you should see the module settings documentation to learn more.
What you see above is the default setting configuration. The settings are described in more detail below.
|View||This read-only setting will simply show you the view that was selected before viewing the current settings.|
|Select a View||If you wish to change the view that's being used to display the featured products, select the alternative view. By default, you'll only see "Index" as an option, unless your design team has created and added alternatives for you.|
|Menu Title||If you enter a title, it will be displayed above your category menu items, as an H4 header object.|
|Display Mode||Display modes are discussed in more detail below.|
|Include "Home" Link?||This is checked by default. When checked, a link labeled "Home" will be displayed at the top of the category listing. When clicked, the customer will be returned the primary category view, without any category selected.|
|Show Product Count?||This is unchecked by default, but when you check it, each top-level category will include the number of products it has at the end of the title, such as "Sample Products (12)".|
|Show Sub-Category Count?||Sorry... this setting is not currently implemented. When it becomes implemented, it is intended to let the customer know how many child categories the current category has.|
|Maximum Tree Depth for All Categories Mode||You'll find that the default for this setting is 10, but any whole number is allowed. If you enter a non-integer value, it will default to zero. This setting will define the number of child levels of subcategories will be shown. Limiting this number in a large store is a good idea, as you could end up with a very large and slowly loading page otherwise. If you set this to three as an example, each time you select a category, the menu items will stop generating once you get to the third child. If this was a family tree, and you're the grandparent, a setting of 3 will make it will stop after listing your grandchildren.|
There's going to be a lot of references to "levels" of categories. We don't intend for this to be confusing, but it's the most common way to discuss this kind of information and how it's displayed.
You can think of category levels like a staircase. Imagine you have 3 staircases in a two story home, side by side. We'll start from the top step, and move towards the bottom. Each step has a label. As you move down to the next step, you have gone down another level, but the top-most step is the "root" level.
In the table example below, each staircase (column) is a category. Each row/level consists of peers across categories, but you can even have peers in the same category. For example, you might have "Tablets" in the same level as "Laptops," albeit in it's own category.
|Level||Category 1||Category 2||Category 2|
|Root (Top Level)||Electronics||Clothing||Jewelry|
|Child Level 1||Computers||Men's||Women's|
|Child Level 2||Laptops||Casual||Sets|
|Child Level 3||Touchscreen||T-Shirts||Bridal|
You have a selection of 6 different display modes to choose from, with "Show All Categories for Current Parent" being selected as the default.
|Show Root Categories Only||When selected, only the top-most categories will ever be listed in the category menu. All other children will not be shown as part of the navigation.|
|Show All Categories||If you choose this option, you'll see that all of the categories in your catalog are listed, no matter which one is currently being viewed. This may be a a convenient setting for some stores, but it could burden your customers in stores that have a large number of categories. You should use this option selectively.|
|Show Children, Peers and Parents||This mode will show everything in context to the current selection, without filter. All of the parent categories will be shown, as well as all of the children and peer levels for the current category selection. All other peer levels in other parent categories will not be shown.|
|Show All Categories for Current Parent||This is the default mode. It is very much like the previous mode, only that this one will not show peer categories from the same level.|
|Show Selected Categories||If you'd like to specify which categories are displayed manually, you can use this mode. When you select it, a category picker will appear. Select all of the categories you wish to have loaded, and they'll all be displayed as top-level categories to your customers. Any unselected categories will be ignored completely.|
|Show Children of Selected Category||When you select this mode, a category drop down list will appear. This will allow you to choose any category. Once you do, the children of that category you selected will be loaded.|
Creative Use of Display Modes
You may be asking yourself why some of these modes even exist. Sometimes, you might want to fulfill a complicated navigational use case in a larger store. In these scenarios, you might find yourself adding two or more category menu modules to the page, each with a different configuration to achieve your goals.
Viewset View Location
You'll find the views for this module in the following location in your viewset: