Multilanguage code possibilities in 7.1.

Dear Community, 

I found a great option to get squarespace website in multilanguage, the base code are great but I did have problem at the end. The main page in english version work as well but when customer choose another flag to switch language the main navigation did not exclude all other langage .

I probably did something wrong on the code could you please help me to get a solution for it ??? it might be simple for some of you but I am beginner. 

Thanks for your help !!!!😍

Find bellow the footer code I used : 

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.6.0/css/flag-icon.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(function() {
    /* SETUP MULTI-LANGUAGE */
    var defaultLanguage = 'en';
    var lang = location.pathname.split("/")[1];
    var defaultClass = 'lang-'+defaultLanguage+'';
    var itemParent = "nav [class*='collection'],nav [class*='folder'],nav [class*='index'],nav [class*='group'],[class*='link']";
    if (lang == "" || lang.length > 2 ){
      var lang = defaultLanguage;
    }

    /* ADD LANGUAGE CLASSES */
    $('a[href="/"]').addClass('lang-'+defaultLanguage+'').parents(itemParent).addClass('lang-'+defaultLanguage+'');
    $('nav a:link:not([href^="http://"]):not([href^="https://"])').each(function () {
      var langType = $(this).attr('href').split("/")[1];
      var multiLanguageClass = 'multilanguage lang-' + langType + '';
      if (undefined !== langType && langType.length <= 2) 
        $(this).addClass(multiLanguageClass).parents(itemParent).addClass(multiLanguageClass);
    });
    $('nav button').each(function () {
      var langTypeFolder = $(this).attr('data-controller-folder-toggle').split("/")[0];
      var multiLanguageClass = 'multilanguage lang-' + langTypeFolder + '';
      if (undefined !== langTypeFolder && langTypeFolder.length <= 2) 
        $(this).addClass(multiLanguageClass);
    });

      /* HOMEPAGE-LOGO LINKS TO PROPER LANGUAGE HOMEPAGE */
    if (lang == "fr") {
      $('a[href="/"]').attr("href", "/fr/");
      $('#mainNavigation a[href="/fr/"]').parent().remove();
      $('#mobileNavigation a[href="/fr/"]').parent().remove();
     }
      /* ADD EXCLUSION NAV ITEMS */
      $('.sqs-svg-icon--list a,.SocialLinks-link').addClass('exclude');
      $('#mainNavigation a[href="/en/home"]').addClass('exclude').parent().addClass('exclude language');
      $('#mainNavigation a[href="/fr/"]').addClass('exclude').parent().addClass('exclude language');
      $('#mobileNavigation a[href="/en/home"]').addClass('exclude').parent().addClass('exclude language');
      $('#mobileNavigation a[href="/fr/"]').addClass('exclude').parent().addClass('exclude language');

    /* REMOVE OTHER LANGUAGES AND KEEP EXCLUDED ITEMS */
    $('.multilanguage:not(".lang-'+lang+',.exclude")').remove();

    /* SETUP LANGUAGE SWITCHER */
    $('body').prepend('<div class="language"><a href="/en/home" class="lang-en"><span class="flag-icon flag-icon-us"></span></a> <a href="/fr/accueil" class="lang-fr"><span class="flag-icon flag-icon-fr"></span></a> <a href="/de/home" class="lang-de"><span class="flag-icon flag-icon-de"></span></a></div>');

    /* NOT REQUIRED */
    /* SETUP URL REROUTE FOR MATCHING LANGUAGE PAGE */
    switch (window.location.pathname) {
      case '/en/home':
        $(".language a.lang-en").attr("href", "/en/home");
        $(".language a.lang-fr").attr("href", "/fr/accueil");
        break;
      case '/fr/accueil':
        $(".language a.lang-en").attr("href", "/en/home");
        $(".language a.lang-fr").attr("href", "/fr/accueil");
        break;
                                    }
  });
</script>

Have you solved yet?

I can't help with this code, but I also wrote a similar guide, to create 2/3 languages site (just copy code, paste, and code works, no need to do anything)

Thanks TUANPHAN for your reply i found a solution !! 🤩

On 2/14/2020 at 5:27 PM, tuanphan said:

Have you solved yet?

I can't help with this code, but I also wrote a similar guide, to create 2/3 languages site (just copy code, paste, and code works, no need to do anything)

@tuanphan - Where is the code you wrote? I am working on a multi-language site and could use some help.

7 hours ago, liftyourgood said:

@tuanphan - Where is the code you wrote? I am working on a multi-language site and could use some help.

On 4/8/2020 at 5:10 AM, tuanphan said:

If you use Business Plan, use this guide.  https://www.bradgood.net/articles/multi-language-content-on-any-squarespace-template 

If you use Personal Plan, use this guide https://beaverhero.com/squarespace-2-languages

Hey there,

I have checked out your code injection for business plan and part of it worked well (the part where just the default language is showing in the main navigation and the other language is invisible). 

The code for the language switch did look very weird though and also I couldn´t click on them. I want "german" as my default and "english" as 2nd option. What exactly do I have to inject as code to show a decent nice language switch on my website - also with flags? The link you shared didnt give me any info for which code to inject for which flag etc..I´m a real beginner when it comes to coding and I just want a decent language switch showing on my website that works..HELP :)

PS: I have attached a screen shot of how the language switch looks right now (its on the very left upper corner)..it doesnt really look well and as said- i cant click either of them..they seem to be passive..

On 4/8/2020 at 5:10 AM, tuanphan said:

If you use Business Plan, use this guide.  https://www.bradgood.net/articles/multi-language-content-on-any-squarespace-template 

If you use Personal Plan, use this guide https://beaverhero.com/squarespace-2-languages

Dear @bradgood
I have used your code as described and for some reason when I activate the code, I can see the code below in the footer: 

/* SETUP LANGUAGE SWITCHER */
    $('.header-display').prepend('<div class="language"><a href="/de/adr-ac" class="lang-de"><span class="langueEncourse">DE</span></a><a href="/en/adr-ac" class="lang-en"><span class="langueEncourse">EN</span></a><a href="/fr/adr-ac" class="lang-fr"><span class="langueEncourse">FR</span></a><a href="/it/adr-ac/" class="lang-it"><span class="langueEncourse">IT</span></a></div>');

I also noticed that on mobile page looks very different as in too wide. If I want to use the accordion I need to swiping right to find it. 

this is the page i am referring to: https://www.adr-ac.ch/

Thank you for your help
Lucia

4 hours ago, Lucia_ said:

Dear @tuanphan
I have used your code as described and for some reason when I activate the code, I can see the code below in the footer: 

/* SETUP LANGUAGE SWITCHER */
    $('.header-display').prepend('<div class="language"><a href="/de/adr-ac" class="lang-de"><span class="langueEncourse">DE</span></a><a href="/en/adr-ac" class="lang-en"><span class="langueEncourse">EN</span></a><a href="/fr/adr-ac" class="lang-fr"><span class="langueEncourse">FR</span></a><a href="/it/adr-ac/" class="lang-it"><span class="langueEncourse">IT</span></a></div>');

I also noticed that on mobile page looks very different as in too wide. If I want to use the accordion I need to swiping right to find it. 

this is the page i am referring to: https://www.adr-ac.ch/

Thank you for your help
Lucia

If you use bradgood guide, you try contacting him

I'm not familiar with his code

hi @bradgood

I have been using your code for the language switcher. I'm using the version 7.1 and when I activate the code I for some reason see it below the footer. Do you know why this is?
Thank you for your help 

Lucia

7 minutes ago, Lucia_ said:

hi @bradgood

I have been using your code for the language switcher. I'm using the version 7.1 and when I activate the code I for some reason see it below the footer. Do you know why this is?
Thank you for your help 

Lucia

Wrap code in script tag

<script>
paste all code here
</script>

Thank you @tuanphan that solved it😍

But now the language switcher up the top is gone?

On 8/13/2020 at 4:12 PM, Lucia_ said:

Thank you @tuanphan that solved it😍

But now the language switcher up the top is gone?

Can you paste all code here? All code in Code Injection

@tuanphan sure here we go - happy to give you the access too. 

header

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">window.$crisp=[];window.CRISP_WEBSITE_ID="561b2956-d1d6-4c4b-8f9f-83709dcf419a";(function(){d=document;s=d.createElement("script");s.src="https://client.crisp.chat/l.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();</script>

Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(function() {
    /* SETUP MULTI-LANGUAGE */
    var defaultLanguage = 'de';
    var lang = location.pathname.split("/")[1];
    var defaultClass = 'lang-'+defaultLanguage+'';
    var itemParent = "nav [class*='collection'],nav [class*='folder'],nav [class*='index'],nav [class*='group']";
    if (lang == "" || lang.length > 2 ){
      var lang = defaultLanguage;
    }

    /* ADD LANGUAGE CLASSES */
    $('a[href="/"]').addClass('lang-'+defaultLanguage+'').parents(itemParent).addClass('lang-'+defaultLanguage+'');
    $('nav a:link:not([href^="http://"]):not([href^="https://"])').each(function () {
      var langType = $(this).attr('href').split("/")[1];
      var multiLanguageClass = 'multilanguage lang-' + langType + '';
      if (undefined !== langType && langType.length <= 2) 
        $(this).addClass(multiLanguageClass).parents(itemParent).addClass(multiLanguageClass);
    });
    $('nav button').each(function () {
      var langTypeFolder = $(this).attr('data-controller-folder-toggle').split("/")[0];
      var multiLanguageClass = 'multilanguage lang-' + langTypeFolder + '';
      if (undefined !== langTypeFolder && langTypeFolder.length <= 2) 
        $(this).addClass(multiLanguageClass);
    });

    /* HOMEPAGE-LOGO LINKS TO PROPER LANGUAGE HOMEPAGE */
    if (lang == "de") {
      $('a[href="/"]').attr("href", "/de/home/");
    }

    /* ADD EXCLUSION NAV ITEMS */
    $('.exclude-me,.exclude-me a').addClass('exclude');
    $('.sqs-svg-icon--list a,.SocialLinks-link').addClass('exclude');

    /* REMOVE OTHER LANGUAGES AND KEEP EXCLUDED ITEMS */
    $('.multilanguage:not(".lang-'+lang+',.exclude")').remove();

    /* SETUP LANGUAGE SWITCHER */
    $('.header-display').prepend('<div class="language"><a href="/de/home" class="lang-de"><span class="langueEncourse">De</span></a><a href="/en/home" class="lang-en"><span class="langueEncourse">En</span></a></div>');

    /* NOT REQUIRED */
    /* SETUP URL REROUTE FOR MATCHING LANGUAGE PAGE */
    switch (window.location.pathname) {
      case '/en/kontakt':
        $(".language a.lang-en").attr("href", "/en/about");
        $(".language a.lang-de").attr("href", "/de/ueber");
        break;
      case '/de/contact':
        $(".language a.lang-de").attr("href", "/de/ueber");
        $(".language a.lang-en").attr("href", "/en/about");
        break;
                                    }
  });</script>
</script>

1. Remove this link in Header (Footer has already latest jquery link)

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

2. In the last code

</script>
</script>

it should be 1 </script>

</script>

@tuanphan when I remove this code in the header my drop down wont work anymore. 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

https://www.theginiusway.ch/de/faq -> drop down

further I cant seem to see why my language Icon at the top right has disappeared. 

thank you for your help

4 minutes ago, Lucia_ said:

@tuanphan when I remove this code in the header my drop down wont work anymore. 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

https://www.theginiusway.ch/de/faq -> drop down

further I cant seem to see why my language Icon at the top right has disappeared. 

thank you for your help

Hi Lucia,

my language icon/switch also disappears whenever I install a logo in the header. I´m not sure if that´s also the source of your issue, but could be.

Try removing the logo for a second and see if the language icon is back.

Also a question: Are you using squarespace 7.1 or 7.0 ? I am using 7.1 and having issues figuring out how to put my "data security" and "faqs" in the footer (i can only link those pages and not put them there like in the header navigation). so right now both languages show up at the same time in my footer..what´s the solution to that? (ps: do you speak german as well?)

hi @slowtravelmorocco

thank you for your fast responds. I just deleted the logo and nothing happened. 
I am using the latest version 7.1 - I have seen the switcher before but somehow after making the minor changes suggested above it disappeared. 

1 hour ago, Lucia_ said:

hi @slowtravelmorocco

thank you for your fast responds. I just deleted the logo and nothing happened. 
I am using the latest version 7.1 - I have seen the switcher before but somehow after making the minor changes suggested above it disappeared. 

ok i see. probably some minor issue in the code - the person who wrote the code might can help out here.

ps: can you help me with the footer? what was your solution for the "imprint" "data security" when customers use your english website version? how did you figure it out? I am also using 7.1. but i can also "link" navigation pages ..so for me both languages show up at the same time..thank you for any suggestions.

4 hours ago, slowtravelmorocco said:

ok i see. probably some minor issue in the code - the person who wrote the code might can help out here.

ps: can you help me with the footer? what was your solution for the "imprint" "data security" when customers use your english website version? how did you figure it out? I am also using 7.1. but i can also "link" navigation pages ..so for me both languages show up at the same time..thank you for any suggestions.

Well my footer solution is just a work around as I have not found a better was to do it.

Now I just have the german version as the main file and then link the english on that page. 

We created a cool little add-on for this that translates (via Google Translate) in a selector on the bottom right hand side of your page...way less clunky: https://www.squareaddons.com/shop-2/language-selector-translate

On 9/8/2020 at 1:02 AM, Kate said:

We created a cool little add-on for this that translates (via Google Translate) in a selector on the bottom right hand side of your page...way less clunky: https://www.squareaddons.com/shop-2/language-selector-translate

thank you for this link. I have translated all the pages so this might not work as its from google translate or can you also choose your own translations?

No, it uses Google translate...but with a much sleeker, and floating selector 

13 hours ago, Kate said:

No, it uses Google translate...but with a much sleeker, and floating selector 

Do you also have an solution for version 7?

@Lucia_ the translate addon works in 7.0 and 7.1 🙂

On 8/17/2020 at 4:44 PM, tuanphan said:

1. Remove this link in Header (Footer has already latest jquery link)

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

2. In the last code

</script>
</script>

it should be 1 </script>

</script>

 

Hi Tuan, 

If I remove the the third <script> below the Language switcher appears again at the top right corner but the code shows again in the footer. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
-----  <script> ----this one
$(function() {
    /* SETUP MULTI-LANGUAGE */
    var defaultLanguage = 'de';
    var lang = location.pathname.split("/")[1];
    var defaultClass = 'lang-'+defaultLanguage+'';
    var itemParent = "nav [class*='collection'],nav [class*='folder'],nav [class*='index'],nav [class*='group']";