Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • MB 273 posts 936 karma points
    Aug 27, 2016 @ 22:19
    MB
    0

    Dropdown navigation

    Mjellow,

    I've been searching the entire internet for guides how to make a proper dropdown menu in Razor/Umbraco 7 with parent and child classes and more but, without much success.

    I can render a menu fine as a "navigation" or "site map" macro but it doesn't cover my need. My experience with Umbraco doesn't allow me to make what I wish so, I hope you guru's can help me out :o)

    • My content has a page entitled "produkter/products"
    • I'd like to render out the subpages (the blue lines) in the menu
    • I'd like to display the purple lines (categories) underneath
    • And inside the categories I'd like to show the brand names (red lines)
    • All the steps should have each their classes like "category, brand" which I can't get to work using the prebuild macros in Umbraco.

    I know this is a huge task but I hope you guys can help me out :) If you have any tips, tricks about this navigation OR how I arrange my product menu, please tell me :o)

    enter image description here Full size image

  • Marc Goodson 2155 posts 14408 karma points MVP 9x c-trib
    Aug 28, 2016 @ 15:17
    Marc Goodson
    100

    Hi Mike

    It's really hard to kind of say how to write this out without the target html I think... but I'm wondering if this gist helps you on your way ?

    Basically you get your product page, and then you can iterate it's children, then each of those children have children, so on and so forth:

    @inherits UmbracoTemplatePage
    @{
        //top Blue menu
        // need to find producter page
    
        var productSectionPage = Umbraco.TypedContentAtXPath("//productSectionPageDocTypeAlias").FirstOrDefault();
    
        // get the children of the product section page, eg the product types
    
        var productTypes = productSectionPage.Children(f => f.IsVisible() && f.DocumentTypeAlias == "productTypeDocTypeAlias");
    
        // so now we can build our blue to menu by looping through the productTypes and see if they have any products listing, eg whether to shwo the dropdown or not
    }
    
    <ul class="nav navbar-nav">
        @foreach (var productType in productTypes)
        {
            // get the products
            var products = productType.Children(f => f.IsVisible() && f.DocumentTypeAlias == "productPageDocTypeAlias");
    
            if (products.Any())
            {
                <li class="dropdown">
                    <a class="btn btn-default dropdown-toggle" id="[email protected]" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">@productType.Name <span class="caret"></span></a>
                    <ul class="dropdown-menu" aria-labelledby="[email protected]">
                        // list products
                        @foreach (var product in products)
                        {
                            // get the categories
                            var categories = product.Children(f => f.IsVisible() && f.DocumentTypeAlias == "categoryDocTypeAlias");
                            if (categories.Any())
                            {
                                // write out categories
                                <li>
                                    <h2>@product.Name</h2>
                                    <h3>Categories</h3>
                                    @foreach (var category in categories)
                                    {
                                        // get the brands
                                        var brands = category.Children(f => f.IsVisible() && f.DocumentTypeAlias == "brandDocTypeAlias");
                                        if (brands.Any())
                                        {
                                            <h2><a href="@category.Url">@category.Name</a></h2>
                                            <h3>Brands</h3>
                                            foreach (var brand in brands)
                                            {
                                                <a class="@[email protected]" href="@brand.Url">@brand.Name</a>
                                            }
                                        }
                                    }
                                </li>
                            }
                            else
                            {
                                <li>@product.Name</li>
                            }
    
    
                        }
                    </ul>
                </li>
            }
            else
            {
                <li><a href="@productType.Url">@productType.Name</a></li>
            }
        }
    </ul>
    

    but obviously you tweak the html to be how your dropdown megamenu should be written out...

  • MB 273 posts 936 karma points
    Aug 28, 2016 @ 19:31
    MB
    0

    Hey Marc,

    Thank you very much for taking you're time to read my question and help out :o)

    I have changed the DocumentTypeAlias in the code above but I'm wondering about the two first variables entitled productSectionPage and productTypes.

    Exactly what are they refering to? My document types looks like this: enter image description here

    I'm not looking for a complete CSS/html setup for the menu, I can handle that myself :o) I'm just trying to write everything out correct. So far, the code you provided seem to make a lot of sense and it definitely is a step towards my goal.

  • Marc Goodson 2155 posts 14408 karma points MVP 9x c-trib
    Aug 29, 2016 @ 10:19
    Marc Goodson
    1

    Hi Mike

    yes sorry should have said, basically on each call to .Children I am filtering the list of Children by their underlying document type (assuming that each different product thing in your hierachy has a different document type...)

    so if in the code above you see:

    productSectionPageDocTypeAlias - that needs to be replaced with the document type alias of your producter page.

    productTypeDocTypeAlias - the document type alias of your Product Types eg Cykler

    productPageDocTypeAlias - the document type alias of what I'm thinking are products eg Racer Cykler

    categoryDocTypeAlias - the alias of the categories eg. Trek

    and

    brandDocTypeAlias - the alias of the brands underneath the categories...

    With the two variables you mention, productSectionPage - is hopefully the Produckter node in the tree and the productTypes are first children of the productSectionPage eg Cykler (I think of these as types of products, but you can call the variables what you lke to reflect how you think of these levels)

  • MB 273 posts 936 karma points
    Aug 29, 2016 @ 19:47
    MB
    0

    Cheers for the explanation Marc (you truedly deserve a beer).

    I have tried my best to change the doc. types to the description you've shared but I can't seem to escape the error:

    Cannot bind source type Umbraco.Web.Models.PartialViewMacroModel to model type Umbraco.Web.Models.RenderModel.
    

    It's not the first time it has haunted me, let me tell you that! I write my Macro like so: @Umbraco.RenderMacro("productMenu")

    I don't know if I'm stepping over what's considered "I need help", but if you feel like it you can see my setup here:

    Login Removed

    Don't worrie if you delete everything, I have a local backup and no password or username is being used other places :o) I hope you'll take the time to help and I'll make sure to bring a beer on your table haha.

  • Dennis Adolfi 1082 posts 6449 karma points MVP 6x c-trib
    Aug 30, 2016 @ 06:38
    Dennis Adolfi
    1

    Hi Mike.

    I tried to uncomment this line @Umbraco.RenderMacro("productMenu") on your frontpage but the frontpage does not work anyway, so something is else must be broke.

    Could you maybe turn off Custom errors?

  • MB 273 posts 936 karma points
    Aug 30, 2016 @ 07:15
    MB
    1

    Hey Dennis,

    Thank you for your participation in the, maybe very confusing thread :)

    I have disabled the custom error and located that the following statement is empty

    var productTypes = productSectionPage.Children(f => f.IsVisible() && f.DocumentTypeAlias == "productType");

    Roldskov.sp34k.dk

  • Dennis Adolfi 1082 posts 6449 karma points MVP 6x c-trib
    Aug 30, 2016 @ 07:34
    Dennis Adolfi
    2

    Hi Mike.

    I´ve made a few ajudsments and the site is working now. There is however a few css adjustments to do, but now at least it renders the products in the menu.

    Best of luck.

  • MB 273 posts 936 karma points
    Aug 31, 2016 @ 09:31
    MB
    2

    All I had to do was change the doctypes in the code.

    Ya'll deserve a big high five for all the help and assistance! I really appreciate it guys, thank you so very much!

  • Dennis Adolfi 1082 posts 6449 karma points MVP 6x c-trib
    Aug 31, 2016 @ 09:32
    Dennis Adolfi
    1

    Awesome Mike!!! Have a great day!

    H5YR

Please Sign in or register to post replies

Write your reply to:

Draft