Jump to content

Coding Help: Multilingual Navigation Menu

Go to solution Solved by paul2009,

Recommended Posts

I found this article: 

https://medium.com/@hardluckcreative/making-better-multi-language-squarespace-sites-e46d24094a7d

This is my variation of the code to tailor the website between English and French. 

 

<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];
    
 /* Set English designation if there's no language subfolder */
    if (langType != 'fr') {langType = 'en'; }

    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 == "/") {
    $('a[href="/"]').attr("href", "https://www.sgtguides.com/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>
<div class=”language”><a href=/home class=”lang-en”>English</a> | <a href=/fr/home class=”lang-fr”>Français</a></div>

Though, the only issue I am having still, is when I visit the websites of the different language home pages separately (It shows the navigation the way I want it.) Good! 😀👍

https://www.sgtguides.com/fr/home
https://www.sgtguides.com/home

But when I click on the English/French button on the site, the navigation still shows both versions of the navigation menus? Not good. 😪 Can anyone help with the issue?

Thank you!
 

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

  • Solution
19 hours ago, Styledent said:

But when I click on the English/French button on the site, the navigation still shows both versions of the navigation menus?

I should probably start by saying that this script was originally written by @bradgood in this article: How to setup multi-language content on any Squarespace Template. As he mentions just after step 6, as you're using a Brine-family template, you'll need to disable 'Ajax Loading' in Site Styles.

Did this help? Please give feedback by clicking an icon below  ⬇️

Edited by paul2009

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment
21 minutes ago, paul2009 said:

I should probably start by saying that this script was originally written by @bradgood in this article: How to setup multi-language content on any Squarespace Template. As he mentions just after step 6, as you're using a Brine-family template, you'll need to disable 'Ajax Loading' in Site Styles.

Did this help? Please give feedback by clicking an icon below  ⬇️

Thank you so much! That is exactly what I needed! 

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.