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

Help with Multilingual Squarespace website


thecigarbible

Question

Dear Community,

I am in the process of making my website Multilingual.

For the moment I have set up a test Squarespace website to experiment on, though the implementation on my live website will be the same.

Website: http://lychee-sheep-23gt.squarespace.com/
Password: 123456789 
Template: Brine

I have followed the guide found here https://www.bradgood.net/articles/multi-language-content-on-any-squarespace-template with great success.  However, I am stuck on the following: On the mobile / tablet view I would like the Language switcher to appear on the bottom of the mobile menu and not in the header...

For reference here is the code I have used so far.

CODE INJECTION FOOTER:

Quote

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
  window.Squarespace.onInitialize(Y, function(){  
  /* SETUP MULTI-LANGUAGE */
  var defaultLanguage = 'de';
  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 == "en") {
    $('a[href="/"]').attr("href", "/en/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="/de/home" class="lang-de">DE</a> | <a href="/en/home/" class="lang-en">EN</a></div>');

</script>

 

CUSTOM CSS:

Quote

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

 

 

Please take note: I am not a coder. I can understand instructions on code and modify them so they work for me.... If somebody could please help me with this, it would honestly make my day!

 

Thanks 

Max

Link to comment
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

5 answers to this question

Recommended Posts

  • 0

remove top: 0px, and replace with bottom: 0;

.language {
    color: #fff;
    position: absolute;
    font-size: 10px;
    right: 15px;
    z-index: 99999;
    bottom: 0;
}

not related, where did you get script code...

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
1 hour ago, tuanphan said:

remove top: 0px, and replace with bottom: 0;


.language {
    color: #fff;
    position: absolute;
    font-size: 10px;
    right: 15px;
    z-index: 99999;
    bottom: 0;
}

not related, where did you get script code...

The script works and an example can be found under the website address given in my post. I want to move the language switcher into the mobile menu when my website is vied on a mobile. 

20191113_071340.jpg

Link to comment
  • 0
27 minutes ago, thecigarbible said:

The script works and an example can be found under the website address given in my post. I want to move the language switcher into the mobile menu when my website is vied on a mobile. 

 

@media screen and (max-width:640px) {
.language {
    bottom: 0;
	left: 0;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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