Jump to content

Bilingual Website - How to keep language setting with drop down menu / navigation

Go to solution Solved by paul2009,

Recommended Posts

Site URL: https://www.atelierviso.com

Hi all, 

I'm a new user to Squarespace Forum and I'm looking for some help.

I customized my Marta template with some CSS codes I found from tutorials. After some trial and error it actually works quite fine except of two bugs I cannot figure out:

 

1. When I click Language>Deutsch in my main navigation it changes to german, which is perfect BUT as soon as I click on "Deutsch" again, it changes back to english instead of staying german. What can I do to keep it in german?

 

 

2. When I click one of the options/pages in my primary navigation, all pages appear, which should not be the case.  One language should always be disabled. What can I do to keep the chosen language?

 

To give you an better understanding, this is what I did:

- Changed all URL-slugs in pages depending on the language i.e. /en/home for english;  /dt/home for german and so on...

- This is the Code I copied in Settings>Advanced>Code Injection>Footer:

 

<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']";
  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 == "dt") {
    $('a[href="/"]').attr("href", "/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();
});
</script>

My website is - www.atelierviso.com

Any suggestions and answers will be highly appreciated, thanks!

 

PS: I didn't translate the different pages to german yet. 😉 

Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

See my answer here:

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 2 weeks later...
10 minutes ago, viso said:

Thank you so much!! 🙌

🙂 You're welcome.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.