Jump to content

Help! Multilanguage site displaying both languages in main nav on secondary pages

Go to solution Solved by paul2009,

Recommended Posts

Site URL: http://theconcilio.org

Hi all,

I've inherited a bilingual Squarespace site and recently the nav menu started displaying in both languages (English and Spanish) on secondary pages (but not on the English or Spanish home page). Please see attached screenshot. How can I fix this so that the English navigation menu items appear only on the English side and vice versa for the Spanish? The site was built in Squarespace 7.0 using the Brine family template.

For the multilingual functionality, the site uses the code from Brad Good's excellent tutorial.  I know it has something to do with the nav not excluding things correctly, but I've checked all the URLs and all use the /en/ or /es/ prefix. So, I'm not sure what has happened.

Please see code below from the code injection. Thanks in advance for your help.

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

    /* 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 */
    $('body').prepend('<div class="language"><a href="/en/home" class="lang-en"><span class="flag-icon flag-icon-us"></span></a> <a href="/es/inicio/" class="lang-es"><span class="flag-icon flag-icon-mx"></span></a></div>');

  });
</script>

 

 

Screen Shot 2022-06-08 at 11.33.29 AM.png

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution
1 hour ago, creedexan said:

How can I fix this so that the English navigation menu items appear only on the English side and vice versa for the Spanish? The site was built in Squarespace 7.0 using the Brine family template.

It looks like someone has enabled Ajax Page Loading in Design > Site Styles. If you disable this, it should behave as expected.

 

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

Thanks so much, @paul2009. Please excuse my ignorance, but I don't have an option to turn off Ajax Page Loading through Site Styles. I found some code to inject through a search on how to disable Ajax page loading (please see code below), but it doesn't seem to work.

<script src="https://content1.getnarrativeapp.com/ss-ajax-loader.js"></script>

Do you know of another option?

 

 

Link to comment
3 minutes ago, creedexan said:

Please excuse my ignorance, but I don't have an option to turn off Ajax Page Loading through Site Styles.

No problem. The Site Styles panel is interactive and will only show the 'tweaks' that are relevant to the page you are previewing at the time.

For example, the Ajax Page Loading tweak will not appear when you are looking at the cover page that is your homepage. You'll need to preview one of the other pages and then open the Site Styles panel.

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

@paul2009 I'm so sorry -- one more question. Everything is working but now on the Spanish side of the site, if I click on the logo in the navigation, which should take users back to the language choice cover page, it can't find the page. The logo link works on the English side, though.

 

Link to comment
  • 1 month later...

Does this exclude code work on Folders as well? I want to create a Folder (for a dropdown) for English and want to exclude this folder from the French. I've used the same script as mentioned in the start of this thread. I've been struggling for a while to find the answer, it'll be excellent if someone can help me here. 

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.