Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

multiLanguage script not working


Recommended Posts

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 by lisbet
Link to comment
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

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.

Link to comment
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>

Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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? 

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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>
 

Link to comment
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;
    }
  }
}

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...