multiLanguage script not working

Site URL: https://www.smykbar.dk/

Hey guys,

I've followed the tutorial of https://www.bradgood.net/articles/multi-language-content-on-any-squarespace-template 

and replaced everything of /en with /dk as danish is the main language and /es/ with /uk

I dont get any language switcher buttons up - what am i doing wrong? here is the code i added:

<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 = ‘dk’;

    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 == “uk”) {

      $(‘a[href=”/”]’).attr(“href”, “/uk/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();

 

    /* SETUP LANGUAGE SWITCHER */

    $(‘body’).prepend(‘<div class=”language”><a href=”/dk/hjem” class=”lang-dk”><span class=”flag-icon flag-icon-us”></span></a> <a href=”/uk/home/” class=”lang-uk”><span class=”flag-icon flag-icon-mx”></span></a></div>’);

 

  });

</script>

 

Edited June 26, 2022 by lisbet

Your code has syntax errors.

It appears you may have taken the code into a word processor which, probably, automatically turned straight quotes into smart quotes. JavaScript doesn't like smart quotes and will not work.

You can do a couple of things. Turn off the automatic smart quote feature in your word processor.

You can use a program that is specifically designed to edit code. There are many programs out there for many systems.

You can try NotePad/WordPad on Windows or TextEdit on macOS. I don't know for sure those will work as I use a code based editing program.

Hi creedon Thank you. I have not used any word processor - i did put it into indesign in order to change the /en to /dk. but maybe this is where it happened. I will try to add it to textedit instead.

9 hours ago, creedon said:

Your code has syntax errors.

It appears you may have taken the code into a word processor which, probably, automatically turned straight quotes into smart quotes. JavaScript doesn't like smart quotes and will not work.

You can do a couple of things. Turn off the automatic smart quote feature in your word processor.

You can use a program that is specifically designed to edit code. There are many programs out there for many systems.

You can try NotePad/WordPad on Windows or TextEdit on macOS. I don't know for sure those will work as I use a code based editing program.

Hi creedon, it still does not work 😞  i have now copyed it into textedit. Is it becourse i changed the /en/home to /dk/hjem and es/in... to uk/home ? All the pages have these endings. but when i go to smykbar.dk/uk/home the menu is still the danish and there is no language switcher.

 

here is my new code:

 

<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 = ‘dk’;

    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 == “uk”) {

      $('a[href="/"]').attr("href", “/uk/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();

 

    /* SETUP LANGUAGE SWITCHER */

    $('body').prepend('<div class="language"><a href="/dk/hjem" class="lang-dk”><span class="flag-icon flag-icon-us"></span></a> <a href=“/uk/home/“ class="lang-uk”><span class="flag-icon flag-icon-mx"></span></a></div>');

 

  });

</script>

You still have syntax errors. For example.

var defaultLanguage = ‘dk’;

Those are smart quotes. You need to use straight quotes.

var defaultLanguage = 'dk';

As I said TextEdit may not do the trick. I've not used it for code editing. If you want to use a code editor on macOS you can look at BBedit. TextMate is another option, I've not used it, and is open source.

18 hours ago, creedon said:

You still have syntax errors. For example.

var defaultLanguage = ‘dk’;

Those are smart quotes. You need to use straight quotes.

var defaultLanguage = 'dk';

As I said TextEdit may not do the trick. I've not used it for code editing. If you want to use a code editor on macOS you can look at BBedit. TextMate is another option, I've not used it, and is open source.

aah - FINALLY 🤩 THANK YOU SO MUCH. Now I just need to figure out the language switcher. its not there. But I was thinking just adding a button on the front page for danish and english home. But where was it supposed to be situated when having added the code? 

Quote

I just need to figure out the language switcher.

It appears you didn't install the CSS from Step 5 of the instructions.

Quote

But I was thinking just adding a button on the front page for danish and english home.

The downside I see to that method is that if somebody comes in from a link on a search engine, or elsewhere, to a non-home page, then they won't have an option to switch languages and might just leave your site.

On 6/28/2022 at 7:54 PM, creedon said:

It appears you didn't install the CSS from Step 5 of the instructions.

 

Dear Creedon.

I would also really like to do so but where is it I should ad this code? I tried in the code injection but nothing happens. 

<script>
/*setup language switcher*/
$('body').prepend('<div class="language"><a href="/dk/Hjem class="lang-dk">Dansk</a> | <a href="/en/home/" class="lang-en">English</a></div>');
</script>
 

18 minutes ago, lisbet said:

Dear Creedon.

I would also really like to do so but where is it I should ad this code? I tried in the code injection but nothing happens. 

<script>
/*setup language switcher*/
$('body').prepend('<div class="language"><a href="/dk/Hjem class="lang-dk">Dansk</a> | <a href="/en/home/" class="lang-en">English</a></div>');
</script>
 

I just added the code to the ccs and then I got up the mexican and american flags. but then i went to the advanced code injection and changed the flag names and now i dont get any flags. can you please check if this code is right:

Advanced code injection - HEADER:

<script>
/*setup language switcher*/
$('body').prepend('<div class="language"><a href="/Dk/hjem" class="lang-dk">Dansk</a> | <a href="/en/home/" class="lang-en”>English</a></div>');
</script>
 

Advanced code injection - footer: (now i just added all the code so you can see if any other code is conflicting)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>

<script> 
  $('.has-background:not(:has(.sqs-video-background))').each(function() {
    var findImage = $(this).find('.section-background img');
    var imgUrl = findImage.data('src');
    var dimensions = findImage.data('image-dimensions');
    var imgWidth = dimensions.substr(0, dimensions.indexOf('x'));
    var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1);
    $(this).parallax({
        imageSrc: imgUrl,
        naturalWidth: imgWidth,
        naturalHeight: imgHeight,
        speed: .5,
    })
});
document.getElementsByTagName("body")[0].onresize = function() {
    setTimeout(function() {
        jQuery(window).trigger('resize').trigger('scroll')
    }, 100)
}; 
</script>

<style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}.has-background.background-width--inset{margin:4vw;padding:0!important}.has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}</style>

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

    /* 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="/dk/hjem" class="lang-dk"><span class="flag-icon flag-icon-DK"></span></a> <a href="/en/home/" class="lang-en"><span class="flag-icon flag-icon-US"></span></a></div>');

  });
</script>

 

CCS design: 

/*setup language switcher*/
.language {
  color: #fff;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 99999;
  a {
    color: #fff;
    &:hover {
      opacity: 0.8;
    }
  }
}

9 hours ago, lisbet said:

then I got up the mexican and american flags. but then i went to the advanced code injection and changed the flag names and now i dont get any flags.

The code you put in the header should go in the footer after the other code you installed.