Multilingual Menu Issues

Hi All

Hope you can help.

I used the following guide to set up multilingual site

https://www.bradgood.net/articles/multi-language-content-on-any-squarespace-template

With minor amendments to keep the English version at the root ie yogajardin/ and the french version using /fr

So I followed the guide until the point of putting English | French in the menu and it added it to the top left (including a white bar) and neither of the links were clickable.

So I decided to try another method and use a button in the menu for EN / FR. This has worked to a certain extent: it works on desktop fine but on mobile version the FR button is not visible on the EN mobile menu as below:

But the EN button is visible on the FR menu as below:

I believe this has something to do with the EXCLUDE operator in the header code injection. 

/* HOMEPAGE-LOGO LINKS TO PROPER LANGUAGE HOMEPAGE */
  if (lang == "fr") {
    $('a[href="/"]').attr("href", "/fr/acceuil/");
  }
/* 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>

However, I find this not a perfect solution because the language changer is hidden in the menu plus it requires page header code injection for every French page I create.

What I would really like is to have EN | FR above this button as below (as the button was previously used as a CTA for Booking) on both desktop and mobile versions but I cannot seem to get this working - does anyone have any ideas how to get it to work?

Hope this makes sense

Site is: https://yogajardin.com

Thanks

Matt

Anyone have any ideas?

Thanks

Matt

I'm sure this is a simple solution - is anyone available just to have a look and point me in the right direction?

Ok so first part solved, have managed to get it on desktop menu

However it does not appear on mobile site at all? Ideally I want it on site and not embedded in the menu so people can change immediately

Thanks

Matt

I added the following code

@media screen and (max-width:991px) {
.header-display-desktop {
    display: block !important;
    position: absolute;
    right: 15vw;
    z-index: 99999999;
}

.header-display-desktop .header-title-nav-wrapper, .header-display-desktop .header-burger {
    display: none;
}

.header-dislay-desktop .header-actions.header-actions--right {
    display: flex !important;
}

div#multilingual-language-picker-desktop {}

.header-display-desktop .header-actions.header-actions--right, .header-display-desktop div#multilingual-language-picker-desktop {
    display: flex !important;
}
    .header-burger {
        visibility: hidden;
    }
}

But when I use it I get the following in the mobile header

Header code injection:

<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 == "fr") {
    $('a[href="/"]').attr("href", "/fr/acceuil/");
  }
    
/* 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-nav-wrapper').prepend('<div class="language"><a href="/fr/acceuil" class="lang-fr"><span style="font-size:12pt;">FR |</span></a><a href="/" class="lang-en"><span style="font-size:12pt;"> EN</span></a></div>');
  });
</script>

And custom CSS

/* Desktop Language Position */
.language {
    position: static !important;
    margin-left: 1vw;
}
.header-nav-wrapper {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

PS - it doesn't appear in mobile menu at all

Is there anyone who could just identify why this doesn’t appear in the mobile menu? I’m desperate! I’m sure it’s just a typo or omission but can’t seem to work out what I’ve done wrong. 
 

thanks in advance!

Matt

Here's how I structured my multi language site, the main idea is to have in the main navigation section in Squarespace all the pages you want to have in both English and whatever alternate language, do the translation manually and just ensure the URL slug is correct and add the page header code injection for the alternate hreflang tag.

Main language is English under

www.website.com

Alternate language is under

www.website.com/xx/

The main navigation section in Squarespace looks like: (example for English & Italian language) 

+ /page
+ /it/page
+ /about-us
+ /it/about-us

I then have in the main navigation a link page acting as language switcher:

link title: English/Italiano
url: #lang

For each page both English and alternate language, you will have to ensure google knows the alternate href lang tag, so add the following code in both languages:

<link rel="alternate" hreflang="en" href="https://www.website.com/about-us" />
<link rel="alternate" hreflang="it" href="https://www.website.com/it/about-us" />

and here's the code injection in the site footer:

// Default Country Code
let defaultCountryCode = 'en';
let alternateCountryCode = 'it';
let countryCode = defaultCountryCode;
let countryCodePath = location.pathname.match(/\/[a-z]{2}\//);


// Set Country Code from URL
if (countryCodePath != null) {
    countryCode = countryCodePath[0].replaceAll('/', '');

    document.documentElement.lang = countryCode;

    // Hide all but 'countryCode'
    document.querySelectorAll('.header-nav-item.header-nav-item--collection a[href]:not([href^="/' + countryCode + '"]')
        .forEach(function (el) {
            el.closest('.header-nav-item.header-nav-item--collection').style.display = 'none';
        });
    document.querySelectorAll('.header-menu-nav-item.header-menu-nav-item--collection a[href]:not([href^="/' + countryCode + '"]')
        .forEach(function (el) {
            el.closest('.header-menu-nav-item.header-menu-nav-item--collection').style.display = 'none';
        });

    // Change language switcher URL
    document.querySelectorAll('[href="#lang"]').forEach(function (el) {
        el.setAttribute('href', location.pathname.substring(3));
    });

    // URL Mapping for Logo 
    document.querySelectorAll('a[href="/"]')
        .forEach(function (el) {
            el.setAttribute('href', '/' + countryCode + '/home');
        });

} else {
    // Hide all but English 
    document.querySelectorAll('.header-nav-item.header-nav-item--collection a[href^="/' + alternateCountryCode + '"]')
        .forEach(function (el) {
            el.closest('.header-nav-item.header-nav-item--collection').style.display = 'none';
        });
    document.querySelectorAll('.header-menu-nav-item.header-menu-nav-item--collection a[href^="/' + alternateCountryCode + '"]')
        .forEach(function (el) {
            el.closest('.header-menu-nav-item.header-menu-nav-item--collection').style.display = 'none';
        });

    // Change language switcher URL
    document.querySelectorAll('[href="#lang"]').forEach(function (el) {
        el.setAttribute('href', (location.pathname === '/') ? alternateCountryCode + '/home' : '/' + alternateCountryCode + location.pathname);
    });
}

When users will click the "English/Italiano" link (on desktop and mobile) it will automatically switch from the English page to the same Italian page

/home -> /it/home

The only problem with this and any other similar solution is the Hreflang and HTML lang mismatch    

unfortunately the HTML language will stay to whatever language you set the squarespace website, even if I change it in the code... that's done at the JS level not at the server level, so robots will always see the default language ex. English

Hope it helps.