Copied to clipboard

Flag this post as spam?

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


  • ds 191 posts 223 karma points
    Mar 12, 2015 @ 18:22
    ds
    0

    Multilingual Menu

    Hi all,

    I am trying to achieve multilingual menu. I could manage to change between languages but I could not make it to show only "Homepage" and rest of the menu.

    It shows now Homepage / Startseite / rest of the menu. What I am trying to achieve is to in English "Homepage" / rest of the menu or in German "Startseite" / rest of the menu.

    What I have done so far is in the following.

        @{
        var root = Model.Content.AncestorOrSelf(1);
        var rootChildern = root.Children.Where(x => x.IsVisible());
    }
    
    <ul class="sf-menu">
        @foreach (var page in rootChildern)
        {
            var cssClass = page.Id == CurrentPage.AncestorOrSelf(2).Id ? "last" : string.Empty; 
            <li><a class="@cssClass" href="@page.Url">@page.GetPropertyValue("title", page.Name)</a></li>
        }   
    </ul>
    
  • Jan Skovgaard 11257 posts 23497 karma points MVP 7x admin c-trib
    Mar 12, 2015 @ 18:31
    Jan Skovgaard
    0

    Hi DS

    I just want to be certain that I understand what it is you're trying to achieve...

    Do you want to have two different menus rendered? So on the english site it's

    "Homepage" - English page - English page - Etc.

    And the german site

    "Startseite" - German page - German page - etc.

    Or do you want to render a mixed menu with both english and german pages? It's a bit unclear to me, sorry.

    /Jan

  • ds 191 posts 223 karma points
    Mar 12, 2015 @ 18:35
    ds
    0

    Hi Jan,

    I want to have two different menu rendered as you indicated

  • Dennis Aaen 4448 posts 17913 karma points admin hq c-trib
    Mar 12, 2015 @ 18:45
    Dennis Aaen
    0

    Hi ds,

    I try to do it like this this should include the homepage in your menu.

    @{
        var root = Model.Content.AncestorOrSelf(1);
        var rootChildern = root.Children.Where(x => x.IsVisible());
        var homeNode = CurrentPage.AncestorOrSelf("Home");
    }

    <ul class="sf-menu">
         <li>
            <a href="@homeNode.Url">@homeNode.Name</a>
        </li>
        @foreach (var page in rootChildern)
        {
            var cssClass = page.Id == CurrentPage.AncestorOrSelf(2).Id ? "last" : string.Empty;
            <li><a class="@cssClass" href="@page.Url">@page.GetPropertyValue("title", page.Name)</a></li>
        }  
    </ul>

    Remember to change this so it match your document type alias of your home page.

    var homeNode = CurrentPage.AncestorOrSelf("Home");

    Hope this helps,

    /Dennis

  • ds 191 posts 223 karma points
    Mar 12, 2015 @ 18:51
    ds
    0

    Thank you Dennis,

    I will try your suggestion.

  • Dennis Aaen 4448 posts 17913 karma points admin hq c-trib
    Mar 12, 2015 @ 18:53
    Dennis Aaen
    0

    And if you want the frontpage to be heighlighed in the navigation when you are displaying the frontpage, then you code should be like this.

    @{
        var root = Model.Content.AncestorOrSelf(1);
        var rootChildern = root.Children.Where(x => x.IsVisible());
        var homeNode = CurrentPage.AncestorOrSelf("Home");
        var homeActive = "";
    }

    <ul class="sf-menu">
        @if(homeNode.Id == CurrentPage.Id){
            homeActive = "selected";
        }
        <li class="@homeActive">
            <a href="@homeNode.Url">
                @homeNode.Name             
            </a>
        </li>
        @foreach (var page in rootChildern)
        {
            var cssClass = page.Id == CurrentPage.AncestorOrSelf(2).Id ? "last" : string.Empty;
            <li><a class="@cssClass" href="@page.Url">@page.GetPropertyValue("title", page.Name)</a></li>
        }  
    </ul>

    Hope this helps,

    /Dennis

  • Jan Skovgaard 11257 posts 23497 karma points MVP 7x admin c-trib
    Mar 12, 2015 @ 18:54
    Jan Skovgaard
    100

    Hi DS

    Ok, then you should probably just do something like this

        @{
        var root = Model.Content.AncestorOrSelf(1);
        var rootChildern = root.Children.Where(x => x.IsVisible());
    }
    
    <ul class="sf-menu">
       <li>
          <a href="@root.Url">@root.Name</a>
        </li>
        @foreach (var page in rootChildern)
        {
            var cssClass = page.Id == CurrentPage.AncestorOrSelf(2).Id ? "last" : string.Empty; 
            <li><a class="@cssClass" href="@page.Url">@page.GetPropertyValue("title", page.Name)</a></li>
        }   
    </ul>
    

    I just made a quick test and it should work.

    You can also consider another approach where you create a navigation picker based on the "multiple node picker" property editor, which you can place on a "navigation" tab on the home node.

    This way it's easy to manage the nodes that should be rendered in the navigation and it makes it possible to select the "home" node as well so all items can just be rendered within the foreach.

    Hope this helps.

    /Jan

  • Jan Skovgaard 11257 posts 23497 karma points MVP 7x admin c-trib
    Mar 12, 2015 @ 18:54
    Jan Skovgaard
    0

    Oh...too slow it seems :)

    /Jan

  • Dennis Aaen 4448 posts 17913 karma points admin hq c-trib
    Mar 12, 2015 @ 19:03
    Dennis Aaen
    0

    Hi ds,

    Just optimized my code, so you can avoid so many variables.

    @{
        var root = Model.Content.AncestorOrSelf(1);
        var rootChildern = root.Children.Where(x => x.IsVisible());
        var homeActive = "";
    }

    <ul class="sf-menu">
        @if(root.Id == CurrentPage.Id){
            homeActive = "selected";
        }
        <li class="@homeActive">
            <a href="@root.Url">
                @root.Name             
            </a>
        </li>
        @foreach (var page in rootChildern)
        {
            var cssClass = page.Id == CurrentPage.AncestorOrSelf(2).Id ? "last" : string.Empty;
            <li><a class="@cssClass" href="@page.Url">@page.GetPropertyValue("title", page.Name)</a></li>
        }  
    </ul>

    Hope this helps,

    /Dennis

  • ds 191 posts 223 karma points
    Mar 12, 2015 @ 20:03
    ds
    0

    Hi Jan and Dennis,

    I tried both you suggested. It works in both ways. I appreciate for the quick answer :)

  • ds 191 posts 223 karma points
    Mar 12, 2015 @ 20:07
    ds
    0

    Oh, I forgot to ask. Is there any easy way to place language selector so user can change language from either dropdown or from the way you suggested?

  • Dennis Aaen 4448 posts 17913 karma points admin hq c-trib
    Mar 12, 2015 @ 20:11
    Dennis Aaen
    0

    Hi ds,

    Try to see this blogpost, I think it can help you build a simple contextual language switcher.

    http://24days.in/umbraco/2014/razor-language-switcher/

    Hope this helps,

    /Dennis

  • ds 191 posts 223 karma points
    Mar 12, 2015 @ 20:16
    ds
    0

    Thanks again for the tip Dennis :)

Please Sign in or register to post replies

Write your reply to:

Draft