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>
