New Header Menu with Category & Subcategory Nav

nopCommercers

I would like to ascertain interest in a Category Header Menu that includes subcategories *and allow dropdown menus for topic pages* (currently 3 levels)

It would fit the gap between the free nop Categories Header Menu and the nop Mega Menu.

Demo Store Here:http://nopmods.jonhopley.co.uk/

How much would you be prepared to pay for this menu?
Should it be free as a contribution to the nopCommunity?
Should it be included in the downloadable package as the default menu to replace the current header menu?

Any thoughts appreciated.

I like the menu quite a bit.  I beleive the ability to make your own menu and tie it to Topics pages is key to customizing the nopcommerce store.

Currently one can play with edit HTML in the menu.cshtml file.  The real need though would be the use of content names that can be dynamically translated and configured from within the admin section.

How to distribute is questionable.  If it is sold as a part of a theme that would be good with the exception of how to integrate the menu names with the translation features of nopcommerce.  If that could be built in somehow then that would be a great option.

JonNopper wrote:

Hi JonNopper,

I don't understand how this menu differs from the Nop Categories Header Menu.
Please note that the Nop Mega Menu comes with 2 different templates - Categories in List and Categories in Grid(with pictures of the categories). When you use the Categories in List templates this is actually how the Nop Categories Header Menu default styling looks like.

About the ability to modify the Menu from the Administration. It is partly possible in the Mega Menu plugin.
Please note that the views are open to modifications and can be edited i.e the MegaMenu.cshtml file as well as all the different templates. The Mega Menu also have Administration that allows you to add additional links and also to show a Topic(Menu). Everything is fully localized and can support multiple languages.

Thanks

7Spikes wrote:
Are you able to setup your plugin as on http://nopmods.jonhopley.co.uk/ example? I think not, your product is different, doesn't it?

alexus wrote:

Sure it can be setup like this and that's why I am asking what the difference is.
Is it just the styling of the plugin or the additional links that are shown(which can be added easily in the view file Plugins\SevenSpikes.Nop.Plugins.CategoriesHeaderMenu\Views\CategoriesHeaderMenu\CategoriesHeaderMenu.cshtml).

Probably I am missing something but I just can't see the gap that is mentioned above.

Thanks

7Spikes wrote:

This header menu is distinguished from the nop Categories Header by the ability to add sub menus to the topic based pages although it is not yet integrated in the admin area, that would require some of the Mega-Menu integration.

As such it is basically an extension of the nop Categories Header Menu.

      
@* You can add additional links if you like i.e link to About Us topic page
    <li><a href="@Url.RouteUrl("Topic", new { SystemName = "aboutus" })">@T("AboutUs")</a></li>*@

Now you can turn these additional links into menu items with dropdowns.

I have used the 'Information' drop down as an example, as far as I know this is not possible with the current Categories Header Menu, although I may be mistaken!

Of course you could just create a category template that looks like a topic page and then create categories with that template.

This has the advantage that you can attach products to your 'topics'.

So for example you can then create a 'category topic' called Easter Deals and attach a number of products on discount for Easter. You could even use a category discount.

The template system is really powerful and can be leverage in a number of ways.

JonNopper wrote:

Hi JonNopper,

As I said the CategoriesHeaderMenu.cshtml is open to modification, so you are free to add additional links and and group them in dropdown menus as you wish.
So everything that you have described is possible with the Header Menu.
Here is the code of the header menu view file:

<div class="categoriesHeaderMenu">
    <ul id="SuperFishMenuId" class="sf-menu">
        @* This will render all main categories in a separate li element and all child categories will be nested in these li elements *@
        @Html.Raw(Model.CategoriesHtml)
        @if (Model.ShowManufacturers)
        {
            <li><a href="@Url.RouteUrl("ManufacturerList")">@T("Manufacturers")</a>
                <ul>
                    @Html.Raw(Model.ManufacturersHtml)
                </ul>
            </li>
        }
@* You can add additional links if you like i.e link to About Us topic page
    <li><a href="@Url.RouteUrl("Topic", new { SystemName = "aboutus" })">@T("AboutUs")</a></li>
    *@
    </ul>
</div>

What you have done is great but I just want to make sure the other guys don't get the wrong impression that the same is not possible with the free header menu plugin.

Thanks

poyker wrote:

Yes - this is only possible because nop-templates developed the nopCategories Header Menu in the first place.

In order to achieve the dropdown for non category or manufacturer items I had to add in some jquery and modify some css, I should state it no longer uses the superfish js or css.

You can add in the jquery and css to the exisiting free nop Categories Header Menu without affecting it's current function of displaying categories and manufacturer menus.

It still functions the same way as the free nop Categories Header Menu if you don't use the modified css, however should someone require the extra drop down menu items they are now an easy modification - just a case of adding a <ul> tag here or there.



Within CategoriesHeaderMenu.cshtml

Simply :
@model CategoriesHeaderMenuModel
@using SevenSpikes.Nop.Plugins.CategoriesHeaderMenu.Models
@using Nop.Web.Models.Common;

@{
    Html.AppendCssFileParts("~/Plugins/SevenSpikes.Nop.Plugins.CategoriesHeaderMenu/Themes/" + Model.Theme + "/Content/style.css");

    Html.AppendScriptParts("~/Plugins/SevenSpikes.Nop.Plugins.CategoriesHeaderMenu/Scripts/jquery.dropdownPlain.js");
    Html.AppendScriptParts("~/Plugins/SevenSpikes.Nop.Plugins.CategoriesHeaderMenu/Scripts/jquery-1.3.1.min");
}

    
        <div id="page-wrap">         
        <ul class="dropdown">
@Html.Raw(Model.CategoriesHtml)

to function as the standard nopCategories Header Menu


In order to create the dropdowns the code now is:

<li><a href="#">@T("Categories")</a>
                <ul class="sub_menu">
                    @Html.Raw(Model.CategoriesHtml)
                
                    </ul>



And for menu items made from topics:


<li><a href="#">Information</a>
        <ul class="sub_menu">
            
<li><a href="#">Our Company</a>
        <ul>
                    
            
         <li><a href="@Url.RouteUrl("Topic", new { SystemName = "aboutus" })">@T("AboutUs")</a></li>
          
            <li><a href="@Url.RouteUrl("NewsArchive")">@T("News")</a></li>
          
                 <li><a href="@Url.RouteUrl("Boards")">@T("Forum.Forums")</a>
              
         </ul>
                    
           </li>
                <li><a href="@Url.RouteUrl("Sitemap")">@T("Sitemap")</a></li>
          
            <li><a href="@Url.RouteUrl("Topic", new { SystemName = "shippinginfo" })">@T("ShippingReturns")</a></li>
            <li><a href="@Url.RouteUrl("Topic", new { SystemName = "privacyinfo" })">@T("PrivacyNotice")</a></li>
            <li><a href="@Url.RouteUrl("Topic", new { SystemName = "conditionsofUse" })">@T("ConditionsOfUse")</a></li>
          
                </ul>
            </li>

Hope that clarifies - slight modification to the nopCategories Header Menu (the js and css) that now gives the option to show topics as drop downs without affecting the original function of displaying categories as a header menu.
(many thanks to nop-templates.com for making it free and allowing its modification)

Updated demo store to show category navigation with pictures in the sidebar.  Small performance increase over the standard navigation. Further development and maybe a theme to follow!