11 language switcher variants - Templates, (partial) views and macros

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

David Gregory 82 posts 208 karma points

May 10, 2019 @ 15:56
0

1:1 Language switcher Variants

Templates, (partial) views and macros

Umbraco 8
Hi guys

I'm trying to get a language switcher to work on a 1:1 bilingual site on v8.

So as an example I have this article with the urls:

http://localhost:61707/en/articles/article-1/

http://localhost:61707/cy/erthygylau/article-1-cym/

Variants and cultures all set up and working nicely I just need to have a button that will toggle the page from one language to the other.

Looking at this post https://our.umbraco.com/forum/umbraco-8/95673-switching-language-using-language-variants I have this test code:
```
    @foreach (var (culture, info) in Model.Cultures)
    {
        <li>
            <a href="/@info.UrlSegment">@info.Name</a>
       </li>
    }
```
But this returns me the urls:

http://localhost:61707/article-1

http://localhost:61707/article-1-cym

As you can see UrlSegment only gives me the last part of the url. What am I missing to get the fuller path?

Thanks
Copy Link

christian Boutet 10 posts 100 karma points

May 10, 2019 @ 18:32

Hi, here our language switcher in Umbraco 8. Hope it help!

    @inherits Umbraco.Web.Mvc.UmbracoViewPage<IPublishedContent>

    @{
        var page = UmbracoContext.PublishedRequest.PublishedContent;
        var currentCulture = System.Threading.Thread.CurrentThread.CurrentCulture;
        var availableLanguages = Services.LocalizationService.GetAllLanguages().Where(l => page.Cultures.Keys.Contains(l.IsoCode));

        var currentlanguage = availableLanguages.GetLanguageFromIsoCode(currentCulture.Name);
    }

    <div class="dropdown" data-controller="DropdownController">
        <button class="btn btn-link btn-xs dropdown-toggle" type="button" id="languageSelectorButton">
            <span>@(currentlanguage)</span>
            <div class="btn-icon">
                <div class="dropdown-toggle-btn-icon icon-chevron-right"></div>
            </div>
        </button>
        <ul class="dropdown-menu dropdown-menu-left">
            @foreach (var (culture, infos) in page.Cultures.Where(c => c.Key.ToLower() != currentCulture.Name.ToLower()))
            {
                var language = availableLanguages.GetLanguageFromIsoCode(culture);
                <li><a class="btn btn-link-thin btn-xs text-right" href="@page.GetUrl(culture)">@(language)</a></li>
            }
        </ul>
    </div> 
extension method is:
        public static string GetLanguageFromIsoCode(this IEnumerable<ILanguage> languages, string isoCode) {
            return languages.FirstOrDefault(l => l.IsoCode.ToLower() == isoCode.ToLower())?.CultureInfo?.NativeName ?? isoCode;
        }

Copy Link

David Gregory 82 posts 208 karma points

May 11, 2019 @ 19:13
0
Ah, thanks.

I didn't know you could pass in a culture to get url. So I can basically change my code to use @Model.GetUrl(culture) instead and it works.
```
@foreach (var (culture, info) in Model.Cultures)
{
    <li>
        <a href="@Model.GetUrl(culture)">@info.Name</a>
   </li>
}
```
Copy Link
Sachin 19 posts 49 karma points

Sep 12, 2019 @ 09:17

0

Hi, I am new to Umbraco, can you please let me know where and how should I create extension method that you have mentioned in your above example: public static string GetLanguageFromIsoCode(this IEnumerable

Regards, Sachin

Copy Link

Mohammad 14 posts 83 karma points

Aug 12, 2020 @ 20:39

Hi Sachin In order to create the GetLanguageFromIsoCode extension, just create a class, call it what ever. The class should be like this

public static class LanguageExtensions
{
    public static string GetLanguageFromIsoCode(this IEnumerable<ILanguage> languages, string isoCode)
    {
        return languages.FirstOrDefault(l => l.IsoCode.ToLower() == isoCode.ToLower())?.CultureInfo?.NativeName ?? isoCode;
    }
}

Now in your cshtml file you have this line:

var currentlanguage = availableLanguages.GetLanguageFromIsoCode(currentCulture.Name);

this will automatically call above method in the static class.

Copy Link

David Gregory 82 posts 208 karma points

May 13, 2019 @ 09:11
0
Further thinking on this.

For my site which has 2 languages all I need to do for a 1:1 lang switch is use the Dictionary feature in Umbraco like this:

and then have a single line of code like this to display the switch.
```
<a href="@Model.GetUrl(Umbraco.GetDictionaryValue("CultureParam"))">@Umbraco.GetDictionaryValue("SwitchLanguage")</a>
```
Does anyone think this is a bad/good way of doing it?
Copy Link
Tom 34 posts 154 karma points

Apr 01, 2020 @ 19:45

0

Hello David, maybe you could check out this article about settings up a language variants switch in Umbraco 8: https://fungybytes.com/knowledge/how-to-build-a-language-variants-switch-in-umbraco-8/

Hope it helps you out!

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

1:1 Language switcher Variants