Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Multilanguage code possibilities in 7.1.


MaryLyn

Question

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>

 

Link to comment

24 answers to this question

Recommended Posts

  • 0

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)

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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.

Link to comment
  • 0
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.

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
On 4/8/2020 at 5:10 AM, tuanphan said:
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..

Screenshot 2020-06-18 at 17.30.39.png

Link to comment
  • 0
On 4/8/2020 at 5:10 AM, tuanphan said:
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

Edited by Lucia_
Link to comment
  • 0
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

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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

220805574_Screenshot2020-08-13at10_59_04.thumb.png.c6755ed76f77b6861e070c550d32a05f.png

Wrap code in script tag

<script>
paste all code here
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

@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>

Link to comment
  • 0

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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?)

Link to comment
  • 0
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.

Link to comment
  • 0
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. 

Link to comment
  • 0

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

Edited by Kate
Typo

If you are looking for a way to add Anchor Links, Gallery Blocks, or a Rotating Banner with Content Blocks overlaid in Squarespace 7.1, you can find all these plugins in our Squarespace add-on store here: www.Squareaddons.com -- Enjoy! 

Link to comment
  • 0
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?

Link to comment
  • 0
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']";

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...