Jump to content

few issues with my multilingual web

Recommended Posts

Hi! I have a few issues with my new web, hope somebody can help me with some of them. I have the web in 3 languages now (planning to add a forth one). 

- Is there a way to change the CTA button depending the language you are navigating?

- when you access to the web you can see all the header links in all languages for a brief moment and then they dissaper. Is there a way to avoid that?

- Can I have 3 (or 4) different footers depending on the selected language? I seen a code somewhere but is only for two, the code is written to work for 3.

- Last doubt, the language selector links disappear when i scroll down, is there a way to anchor them always on the top no matter if I scroll down?

Thank you for any help!

Link to comment

Can you share your website?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

You have this in Custom CSS, and to keep the language switcher visible:

.language {
    position: absolute;
}

change to:

.language {
    position: fixed;
}

2 hours ago, Ricard said:

- Is there a way to change the CTA button depending the language you are navigating?

How do you want it to change?

2 hours ago, Ricard said:

- when you access to the web you can see all the header links in all languages for a brief moment and then they disappear. Is there a way to avoid that?

This is probably because of how you are hiding the links, how are you achieving this?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
2 hours ago, Ricard said:

- Can I have 3 (or 4) different footers depending on the selected language? I seen a code somewhere but is only for two, the code is written to work for 3.

You can certainly switch out footer sections depending on which page you are on, it would take a snippet of style code added to the page header code injection. I would need to know all of the sections in the footer and how you currently have this set up to be able to give you the best way to do it.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

That wasn't all CSS to add, it was a suggestion to tweak the CSS you currently have

image.png.bfdaf90cfab1ec07dffc558a2d414992.png

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Regarding the CTA button I would like to have it like this:

catalan: Reserva ara

spanish: Reserva ahora 

english: Book now

 

And concerning how I am hiding the links, heres the full 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 = 'ca';
    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 == "es") {
      $('a[href="/"]').attr("href", "/es/inici/");
    }
       if (lang == "en") {
      $('a[href="/"]').attr("href", "/en/inici/");
    }

    /* ADD EXCLUSION NAV ITEMS */
    $('.exclude-me,.exclude-me a').addClass('exclude');
    $('.sqs-svg-icon--list a,.SocialLinks-link,.header-menu-controls-control').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="/ca/inici" class="lang-cat">cat</a> | <a href="/es/inici/" class="lang-es">esp</a> | <a href="/en/inici/" class="lang-en">eng</a></div>');
  
if (lang == "ca") {
$('section[data-section-id="6539a0872ecc656144301c97"]').remove();
}

if (lang == "es") {
$('section[data-section-id="650eb3301a6932094d727f7e"]').remove();
}
     
      if (lang == "en") {
$('section[data-section-id="650eb3301a6932094d727f7e"]').remove();
}
      
      
   
      });
</script>

Link to comment

Okay I managed to find a fix for the cta button and for the issue that showed all the links for a fraction of second. My only issue now is that I cannot have a different footer depending on the language. I have seen on the forum that somebody suggests to have multiple footers and then hide them depending on the language you are, but i cannot figure it out how to do it. 

Link to comment
On 10/28/2023 at 6:12 AM, Ricard said:

Okay I managed to find a fix for the cta button and for the issue that showed all the links for a fraction of second. My only issue now is that I cannot have a different footer depending on the language. I have seen on the forum that somebody suggests to have multiple footers and then hide them depending on the language you are, but i cannot figure it out how to do it. 

First, change this code

image.png.05fc670084d59e5758c3ffe5a930ecfd.png

to this

 /* HOMEPAGE-LOGO LINKS TO PROPER LANGUAGE HOMEPAGE */
    if (lang == "es") {
      $('a[href="/"]').attr("href", "/es/inici/");
	$('body').addClass('body-es');
    }
       if (lang == "en") {
      $('a[href="/"]').attr("href", "/en/inici/");
$('body').addClass('body-en');
    }
      if (lang == "fr") {
      $('a[href="/"]').attr("href", "/fr/inici/");
$('body').addClass('body-fr');
    }
      

Next, add 4 sections to Footer, then add this code to Website Tools (under Not Linked) > Custom CSS

/* this code will hide Section 2, 3, 4 when users on ES pages */
body.body-es footer.sections section:nth-child(n+2) {
	display: none;
}
/* this code will hide Section 1, 3, 4 when users on EN pages */
body.body-en footer.sections section:not(:nth-child(2)) {
	display: none;
}
/* this code will hide Section 1, 2, 4 when users on FR pages */
body.body-fr footer.sections section:not(:nth-child(3)) {
	display: none;
}
/* this code will hide Section 1, 2, 3 when users on CAT pages */
body:not(.body-en):not(.body-es):not(.body-fr) footer.sections section:nth-child(-n+3) {
	display: none;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.