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

Language Switch Button Code


slowtravelmorocco

Question

Hey there,

I am using 7.1 and my default language is german.

I want a simple and good looking german/english switch option on the home page (i dont want a cover page etc.).

I have injected already a code that makes only the default language main navigation visible and hides the english ones - i have done that by giving each folder and page a "/de/.." or "/en/.." URL slag. The code makes the "en" ones invisible. 

Now i want a code that creates a nice looking language switch somehwere on the top on my website (header etc.).

Right now it looks like that (see attachment) and i cant even click on either on them..and the switch looks very weird and unprofessional.

Please send help! I´m a beginner in coding..:)

Screenshot 2020-06-18 at 17.30.39.png

Link to comment

20 answers to this question

Recommended Posts

  • 0

HI could you provide your site url to check?

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
11 hours ago, slowtravelmorocco said:

Do you want it to display as flag image like this

image.thumb.png.acc2579ea1021ad2890c1e02a75dd572.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

yes, that would be great!!

My header is see through - when I´m scrolling down it should also move with the main navigation and site titel, but I guess it will do that automatically once I have inserted a code, right?

 

 

It did slightly changes in your current solution, hopes it'll help

<style>
	.language {
	  position: absolute;
	  z-index: 999;
	  top: -20px;
	  left: 0;
	  display: inline-block;
	}
	.language a {
	  border: 1px solid #000;
	  margin: 0 5px;
	  width: 40px;
	  height: 20px;
	  display: inline-block;
	  background-position: center top;
	  float: left;
	  text-indent: -999999px;
	  color: transparent;
	}
	.language [href="/en/home/"] {
	  background: url(https://restcountries.eu/data/gbr.svg) no-repeat;
	  background-size: cover;  
	}

	.language [href="/de/home"] {
	  background: url(https://restcountries.eu/data/deu.svg) no-repeat;
	  background-size: cover;
	  width: 33px
	}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(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();
});

</script>
<script>
/*setup language switcher*/
$('.header-title-text').prepend('<div class="language"><a href="/de/home" class="lang-en">Deutsch</a><a href="/en/home/" class="lang-es">English</a></div>');
</script>

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
18 minutes ago, slowtravelmorocco said:

wow its working! Thank you so much! This is great. 

Glad it helps

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
On 6/20/2020 at 3:35 PM, bangank36 said:

Glad it helps

hi @bangank36 would there be a possibility also to place the language switch on the top right instead of top left? And could we just name the switch "DE | EN" (german/english) and take away the flags? i think a bit more minimalistic design would fit much better on my site and the top left position could interfere with my logo that I will be placing there soon as well... I appreciate your support! 

Screenshot 2020-07-04 at 10.51.59.png

Edited by slowtravelmorocco
Link to comment
  • 0
On 7/4/2020 at 3:55 PM, slowtravelmorocco said:

hi @bangank36 would there be a possibility also to place the language switch on the top right instead of top left? And could we just name the switch "DE | EN" (german/english) and take away the flags? i think a bit more minimalistic design would fit much better on my site and the top left position could interfere with my logo that I will be placing there soon as well... I appreciate your support! 

Screenshot 2020-07-04 at 10.51.59.png

I will update accordingly

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
18 hours ago, slowtravelmorocco said:

@bangank36 great, thank you lots!

What is your site password again, thanks

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
20 hours ago, slowtravelmorocco said:

@bangank36 Did you get access? Did it work? 

<style>
	.language {
        position: absolute;
        z-index: 999;
        top: -20px;
        right: 0;
        display: inline-block;
      }
      .language a:first-child {
        border-right: 1px solid #000;
      }
      .language a {
        border: none;
        margin: 0 5px;
        width: 40px;
        height: 26px;
        display: inline-block;
        background-position: center top;
        float: left;
        text-indent: 0;
        color: transparent;
        font-size: 18px;
        color: #000 !important;
      }
      .language [href="/en/home/"] {
        background: none;
        background-size: cover;  
      }
      .language [href="/de/home"] {
        background: none;
        background-size: cover;
        width: 33px
      }


</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(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();
});

</script>
<script>
/*setup language switcher*/
$('.header-title-text').prepend('<div class="language"><a href="/de/home" class="lang-en">DE</a><a href="/en/home/" class="lang-es">EN</a></div>');
</script>

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0

@bangank36 hey there, I was wondering if you could help again?

I am facing the issue, that I can only link navigation items into my footer. But I can´t manage to just show the english navigation there when using the english website version or only showing the german navigation links in the footer, when using the german website version. I hope there is a code solution to that issue?

The following links would need to be included into the footer:

german urls:

de/faq-reisen-in-marokko

de/datenschutz-impressum

 

english urls:

en/faq-when-traveling-in-morocco

en/data-security-imprint

 

here´s the link again: www.slowtravelmorocco.com

 

Thank you so much - I also posted a thread in the general forum but havent had any response since weeks..

 

 

Link to comment
  • 0

In footer I only see the social icons, where is the link

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0

If you’re going for style...we created a sleek drop down selector that floats at bottom of screen for translating your 7.0 or 7.1 site through Google Translate... https://www.squareaddons.com/shop-2/language-selector-translate

If you are looking for a way to add Anchor Links, Gallery Blocks, or a Rotating Banner with Content Blocks overlaid in Squarespace 7.1, you can find all these plugins in our Squarespace add-on store here: www.Squareaddons.com -- Enjoy! 

Link to comment
  • 0
On 9/1/2020 at 1:23 PM, slowtravelmorocco said:

the language switch generally disappears, when I´m inserting a logo actually. When I turn the logo off and just use a normal site titel the language switch is visible again. maybe a little bug that can be fixed?

 

I'm having the exact same problem and I see you've got the language switcher working nicely on your website, floating on the navigation bar. May you let me know your solution?

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