Orchard Menus and Navigation for Online Store

Orchard Menus and Navigation for Online Store

I've talked about the ability to dynamically add menu items to the Orchard main menu and navigation before, but this is such a great feature that I just had to mention it again as a feature I added to my Orchard CMS online store and e-commerce website example! This feature is perfect for dynamically adding product categories to your main menu for ease of navigation.

Orchard CMS E-Commerce Website

As I mentioned earlier, I created an example of using Orchard CMS to sell products and services in an e-commerce website. The Online Store comes with an e-commerce module that provides functionality for products, categories, product reviews, shopping cart, Google Checkout, etc. as well as other custom modules that handle portfolios, FAQs, and other basic website features.

One of the features I desired was the ability to display a list of product categories as a dropdown menu on the Orchard Main Menu. These product categories need to be displayed dynamically, of course, as product categories are added and removed from the store.

Product Categories for Orchard CMS Online Store

I just have 4 product categories in this e-commerce website, but if you had more you could certainly use mega-menus, etc. to display more categories. In this case a simple dropdown menu is all I wanted when a visitor hovers over the Products MenuItem.

Product Category Menu Items

Just like I did by creating a Tag Menu Items that displays Orchard Tags in the Orchard Main Menu, I created a custom Category Menu Items that displays a list of product categories in the Orchard Main Menu. Here is a brief snapshot of what it looks like in the Orchard Dashboard ( adjusted for better visbility ).

Dynamically Adding Product Categories to Orchard Main Menu in E-Commerce Website

I just find this new feature brilliant! This allow the Orchard Web Developer to dynamically inject menu items into the Orchard Main Menu and Navigation, making menu management in Orchard very simple in these cases where menu items are dynamic.

Note that you could pull this off using the Query Link Option if you wanted to avoid a little programming. Query Link will allow you to inject menu items based on a query you create in Orchard. I could have created a query in Orchard that grabs the title of all Product Categories in my Orchard Store and then display them as links in the menu items. The result would be the same. The Query Link option would also give you a bit more control of the actual predicates and sort orders of the query if you wanted a bit more control of the underlying query.

Conclusion

I realize I have talked about this feature before in Orchard CMS, but it really is a good one and deserves a fair bit of attention. We will see Orchard 1.6 in the near future with ASP.NET MVC 4 and Web API, so I figure it best to mention these new features in Orchard 1.5 until 1.6 steals the show!