Adjust Mega Menu to link towards Products

Dear Nop-Templates community,

I have been struggling the past few weeks with a problem that I need solved asap. We installed a 3.40 nopcommerce website (on a localhost machine for test and trial) with the Tiffany theme. 

The client for whom the website is destined has a little amount of products to display. Little enough to make subcategories unnecessary. 

Currently in our Megamenu there are Categories (good) and subcategories (needs direct link). We would love if there was a possibility to replace these subcategories with specific products (let's say about 4-5 per main category as the client only has 12 products), and would love them to be displayed in the top menu so that his customers can easily switch back and forth.

I understand that there might be an out-of-the box solution where I have to adjust some .cshtml files (Topmenu.cshtml?), but so far, everything I have tried didn't work for me.

Is there any documentation available for this sort of issue? Thanks!

-Jef

Hi Jeff,

As far as I understand, you want to show products in the Mega Menu.
Please note that the Mega Menu does not have support for showing products. It supports showing only categories. You can suggest this idea in our UserVoice portal.
The only way to achieve this now having in mind that you have only 12 products is to hard-code the products in place of the categories directly in the Mega Menu Razor files, which is not a good option but it should work.

Hello, 

Thank you for your reply. It is good to have that cleared out.

Now for the difficult part: I have little to no knowledge of programming in the C# language. So far I've been doing great on my own website adjusting CSS files and I got that covered.

Perhaps I would be able to figure something out in these razor files. In which file should I be doing my tests and could you please steer me in the right direction? I am a swift learner :)

Thank you

Hi, 

The correct file which is displaying the Mega Menu is the \Plugins\SevenSpikes.Nop.Plugins.MegaMenu\Views\MegaMenu\MegaMenu.cshtml. 

Inside it you will find this code, which is showing the categories dropdown. As you said, you do not need it, so you can remove it:

if (Model.Settings.EnableCategories)
    {
        if (isMegaMenuResponsive)
        {
            @Html.Action("GetCategoriesResponsive", "MegaMenu", Model.Categories)
        }
        else
        {
            @Html.Action("GetCategories", "MegaMenu", Model.Categories)
        }
    }

On its place you can write your own mark-up, which should follow our menu structure, showing the products you want by hard-coding them. I believe this will also require additional styling, because the menu does not styling for products.

I hope this helped you. Please write if you need any further help!

Hello there, this is exactly how I did it. I was able to code it to link towards the specific product pages, good stuff.

Now what I would like to achieve is the same lay-out as I'd have in my Mega Menu, because what I see now is a basic layout of Nopcommerce, not divided in columns. What is a plausible method to achieve this?

Hi, 

This is a sample mark-up of what should be a top menu item:

<li>
    <a href="#" class="products-item-menu">Products</a>
    <div class="dropdown categories fullWidth boxes-4">
        <div class="row-wrapper">
            <div class="row">
                <div class="box">
                    <div class="picture">
                        <a href="/electronics" title="Show products in category Electronics">
                            <img class="lazy" alt="Picture for category Electronics" src="http://store1.com:15566/content/images/thumbs/default-image_210.png" data-original="http://store1.com:15566/content/images/thumbs/default-image_210.png" style="display: inline;">
                        </a>
                        <div class="title">
                            <a href="/electronics" title="electronics">Electronics</a>
                        </div>
                    </div>
                </div>
                <div class="box">
                    <div class="picture">
                        <a href="/books" title="Show products in category Books">
                            <img class="lazy" alt="Picture for category Books" src="http://store1.com:15566/content/images/thumbs/0000001_book_210.jpeg" data-original="http://store1.com:15566/content/images/thumbs/0000001_book_210.jpeg" style="display: inline;">
                        </a>
                        <div class="title">
                            <a href="/books" title="Books">Books</a>
                        </div>
                    </div>
                </div>
                <div class="box">
                    <div class="picture">
                        <a href="/computers" title="Show products in category Computers">
                            <img class="lazy" alt="Picture for category Computers" src="http://store1.com:15566/content/images/thumbs/0000002_computers_210.jpeg" data-original="http://store1.com:15566/content/images/thumbs/0000002_computers_210.jpeg" style="display: inline;">
                        </a>
                        <div class="title">
                            <a href="/computers" title="Computers">Computers</a>
                        </div>
                    </div>
                </div>
                <div class="box">
                    <div class="picture">
                        <a href="/electronics" title="Show products in category Electronics">
                            <img class="lazy" alt="Picture for category Electronics" src="http://store1.com:15566/content/images/thumbs/0000007_electronics_210.jpeg" data-original="http://store1.com:15566/content/images/thumbs/0000007_electronics_210.jpeg" style="display: inline;">
                        </a>
                        <div class="title">
                            <a href="/electronics" title="Electronics">Electronics</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</li>

I hope this gives you the whole idea of the mark-up. You can always inspect it in the browser - this will be very helpful to you.