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

Help with Multilingual Squarespace website

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

Share this post


Link to post

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

Share this post


Link to post
  • 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

Share this post


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

 

Share this post


Link to post
  • 0
5 minutes ago, tuanphan said:

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

 

I will give this a try later when I am on my laptop 🤞🤞🤞

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...