Jump to content

Multilingual Website: applying code footers for each language

Go to solution Solved by paul2009,

Recommended Posts

Site URL: https://lifelab.world/en/home

Hello! 


I need some help please. I am on a SS 7.0 with brine template. I have been doing my research here on the forum and have been applying codes for solution for the footer to work and display the correct language. However, I have no luck.

I made 2 footers from the Top footer blocks for EN and Bottom footer blocks for DE. I am trying this code, but it does not seem to work.

This is from @tuanphan

Add 2 sections in Footer for 2 languages

  • Top section for English
  • Bottom section for DE

Next, find this code

if (lang == "de") {
    $('a[href="/"]').attr("href", "/de/home/");
  }

edit it to

if (lang == "de") {
    $('a[href="/"]').attr("href", "/de/home/");
	$('body').addClass('body-de');
  }

Next, add this to Code Injection > Header

<style>
  body.body-de footer.sections section:nth-child(1) {
  	display: none;
  }
  body:not(.body-de) footer.sections section:nth-child(2) {
  	display: none;
  }
</style>


Am I doing something wrong? 

For reference, I followed this solution in creating a multilingual site: https://www.bradgood.net/articles/multi-language-content-on-any-squarespace-template

Thank you in advance!


P.S.:

I currently put the code to hide the bottom footer block so only 1 footer will show on the website

.Footer-blocks--bottom {

display:none;

}

Edited by Naomi-lifelab
Link to comment
  • Solution
5 hours ago, Naomi-lifelab said:

I made 2 footers from the Top footer blocks for EN and Bottom footer blocks for DE. I am trying this code, but it does not seem to work.

You've followed Brad's excellent article fine but there's an issue with your CSS - that isn't from the guide. 

You've added a "body-de" class to indicate when the German pages are shown which is great, but the classes you have used for the footer section are not correct for your Brine-family template.

The classes for the footer sections in your template are "Footer-blocks--top" (for EN) and "Footer-blocks--bottom" (for DE). You should therefore be able to use something like this instead:

.body-de .Footer-blocks--bottom {
  display: unset;
  }
.body-de .Footer-blocks--top {
  display: none;
  }  
  
body:not(.body-de) .Footer-blocks--bottom {
  display: none;  
}
body:not(.body-de) .Footer-blocks--top {
  display: unset;  
}

Did this help? Please give feedback by clicking an icon below  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
On 2/18/2022 at 1:32 AM, paul2009 said:

You've followed Brad's excellent article fine but there's an issue with your CSS - that isn't from the guide. 

You've added a "body-de" class to indicate when the German pages are shown which is great, but the classes you have used for the footer section are not correct for your Brine-family template.

The classes for the footer sections in your template are "Footer-blocks--top" (for EN) and "Footer-blocks--bottom" (for DE). You should therefore be able to use something like this instead:

.body-de .Footer-blocks--bottom {
  display: unset;
  }
.body-de .Footer-blocks--top {
  display: none;
  }  
  
body:not(.body-de) .Footer-blocks--bottom {
  display: none;  
}
body:not(.body-de) .Footer-blocks--top {
  display: unset;  
}

Did this help? Please give feedback by clicking an icon below  ⬇️

Hello paul2009,

Thank you so much! It worked, I am not that skilled. I just use the forum to learn and explore more. I make sure I exhaust all options and if I am really stuck, I ask here. I am so thankful and glad with this community. 🙏

Have an amazing day! 

Link to comment

Thanks / danke. It's a pleasure to help.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.