Change header button language Squarespace 7.1

12 hours ago, Oddvar said:

But the code you made doesn't seem to work.

My code is custom code for another piece of code which your site appears not to use. Without that code my code will not work.

You probably don't want to install the code that my code depends on as it appears you've used a different way to handle multi-language site capabilities.

I suggest taking a look at the following thread.

On 1/14/2022 at 11:04 PM, creedon said:

I suggest taking a look at the following thread.

Hello!

I did not realize you answered so quickly, thank you!

It seems this thread might not be quite what I'm looking for.

What I need is the same button (the green "Kontakt oss"-button in the header" to have two different languages when switching between Norwegian and English. I don't need two separate buttons. So when you are on the NO-site it says "Kontakt oss", and on the EN-site it says "Contact us", and links to the english version of the contact-page. 

Hope you know how to help me, it would be greatly appreciated 🙂 

@Oddvar

I suggested the two button code that could then be supplemented with additional code that would decide which button to show based on which language section of the site the visitor is in.

Hello @creedon! I don't know much about coding, but I would also like to have the button change according to the language. My website will be published in Dutch, French and English. Could you help me with this? The website is atelierroger.eu and the password is Scoby2311. 

@amberv98

Please see my code cited in February 2, 2021 post earlier in this thread.

Let us know how it goes.

@creedon Hi there, I have used some of your help already in setting my website in 2 french and english.

I also used Brad Good tutorials and everything works great on Desktop, but not so much in mobile. I don't know if you can help me.

I have 2 issues remaining after using brad good's way of switching languages,

1- On the mobile version, the CTA button was missing from the burger menu. I used his suggestion of adding this line in the exclusion. The CTA button came back on the mobile version, but the translation does not work, it stays in french (default language)

$('.header-menu-cta a').addClass('exclude');

2 - Also, the language switcher is oddly placed in the mobile version. It pops almost on the logo and it stays there even when I open the burger menu. Is there a way to change its place, or add it in the burger menu, or remove it?

Thanks a lot for your help,

url: https://www.panoraloges.ca/

@HP920

It appears good to me.

Site URL: https://www.thefrassas.com

Hi!

So I tried figuring it out by myself but I couldn't. This is the last detail I need to finish my website.

So the button on the header is RSVP (international word so doesn't need translation in the other language versions) and I have 3 languages, but when I try to add the anchor link in it, the same link goes for all the languages (because header and footer is the same for all pages).

Ex.: If you chose English on the cover page and you click on the header button RSVP, it goes to the RSVP part in English. That sames rationale goes to someone who chooses Portuguese or German.

Is it possible to someone help me out? Thanks a lot!

Hi!

So I tried figuring it out by myself but I couldn't. This is the last detail I need to finish my website.

So the button on the header is RSVP (international word so doesn't need translation in the other language versions) and I have 3 languages, but when I try to add the anchor link in it, the same link goes for all the languages (because header and footer is the same for all pages).

Ex.: If you chose English on the cover page and you click on the header button RSVP, it goes to the RSVP part in English. That sames rationale goes to someone who chooses Portuguese or German.

Is it possible to someone help me out? Thanks a lot!

https://thefrassas.com

On 3/26/2022 at 2:40 AM, ca_belle said:

Hi!

So I tried figuring it out by myself but I couldn't. This is the last detail I need to finish my website.

So the button on the header is RSVP (international word so doesn't need translation in the other language versions) and I have 3 languages, but when I try to add the anchor link in it, the same link goes for all the languages (because header and footer is the same for all pages).

Ex.: If you chose English on the cover page and you click on the header button RSVP, it goes to the RSVP part in English. That sames rationale goes to someone who chooses Portuguese or German.

Is it possible to someone help me out? Thanks a lot!

https://thefrassas.com

To change button url on each language, first, edit this code

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

to this

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

Next, add this to Last Line in Code Injection > Footer

<script>
$(document).ready(function() {
	// change button url on English Pages
	$('body.body-en header#header a.btn').attr('href','https://google.com');
	// change button url on DE Pages
	$('body.body-de header#header a.btn').attr('href','https://pixabay.com');
});
</script>

Replace google & pixabay with new url

Hall together
I used the code from @Creedon and it works great. The problem is that in the mobile menu only the button is shown in one language and not in the other language.

Website: https://cricket-megalodon-8kgf.squarespace.com/

Pw: summer123

8 hours ago, Trawww said:

The problem is that in the mobile menu only the button is shown in one language and not in the other language.

The code appears to be working to me.

Hi @creedon, I'm having the same problem: the button at the bottom of the English mobile sandwich menu doesn't appear. It works on desktop. I pasted a code you suggested to someone here earlier, but that didn't solve the issue either.

Could you please take a look!

Url: https://www.bee-at-work.hu

Thanks, 
Anita

11 hours ago, antasz said:

I'm having the same problem: the button at the bottom of the English mobile sandwich menu doesn't appear.

I'm not able to reproduce your issue. I see the language switcher links on all the burger menus of each language.

14 hours ago, creedon said:

I'm not able to reproduce your issue. I see the language switcher links on all the burger menus of each language.

Hello! Thanks for your reply! 
The problem is not with the language selector, but with the red button. On desktop both languages have the button in the navigation, but on mobile the English version has no button in the sandwich menu. 

13 hours ago, antasz said:

The problem is not with the language selector, but with the red button.

Try changing the URL for the CTA to #.

Let us know how it goes.

8 hours ago, creedon said:

Try changing the URL for the CTA to #.

Let us know how it goes.

Thank you! It works, that was the solution!

On 3/7/2022 at 10:42 PM, HP920 said:

@creedon Hi there, I have used some of your help already in setting my website in 2 french and english.

I also used Brad Good tutorials and everything works great on Desktop, but not so much in mobile. I don't know if you can help me.

...

.....

$('.header-menu-cta a').addClass('exclude');

2 - Also, the language switcher is oddly placed in the mobile version. It pops almost on the logo and it stays there even when I open the burger menu. Is there a way to change its place, or add it in the burger menu, or remove it?

Thanks a lot for your help,

url: https://www.panoraloges.ca/

 

 

Hi Creedon

I am facing a similar problem like HP920.

the language switcher is oddly placed over the burger menu in the mobile verion or when I shrink the desktop window.

I've used the following code for the language switcher in the footer of the code injection:

---------------------------------------------------------------------------------------------------------------------

<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) {
      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 == "de") {
      $('a[href="/"]').attr("href", "/de/startseite/");
        } else if (lang == "fr") {
      $('a[href="/"]').attr("href", "/fr/page-daccueil/");
        }

    /* 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 */
    var currentUrl = location.pathname;
    var switcherUrl = currentUrl.replace('/' + lang + '/', '/' + (lang === 'de' ? 'fr' : 'de') + '/');

    switch (currentUrl) {
      case '/de/startseite':
        switcherUrl = switcherUrl.replace('/startseite', '/page-daccueil');
        break;
      case '/fr/page-daccueil/':
        switcherUrl = switcherUrl.replace('/page-daccueil', '/startseite');
        break;
      default:
        var germanPages = ['startseite', 'ueber-uns', 'dienstleistungen', 'team', 'referenzen', 'karriere', 'kontakt', 'stellenportal', 'impressum', 'datenschutzerklaerung' ];
        var frenchPages = ['page-daccueil', 'a-propos', 'services', 'lequipe', 'references', 'carriere', 'contact', 'portail-de-lemploi', 'impression', 'declaration-de-protection-des-donnees'];
        var germanIndex = germanPages.indexOf(currentUrl.split('/')[2]);
        var frenchIndex = frenchPages.indexOf(currentUrl.split('/')[2]);
        if (germanIndex > -1) {
          switcherUrl = switcherUrl.replace('/' + germanPages[germanIndex], '/' + frenchPages[germanIndex]);
        } else if (frenchIndex > -1) {
          switcherUrl = switcherUrl.replace('/' + frenchPages[frenchIndex], '/' + germanPages[frenchIndex]);
        }
        break;
    }
/* Language-Initials DE | FR */
$('body').prepend('<div class="language"><a href="' + switcherUrl + '" class="lang-de">DE</a> <a href="' + switcherUrl + '" class="lang-fr">FR</a></div>');

  });
</script>

CSS:

/*SETUP STYLE LANGUAGE SWITCHER*/
.language {
  font-size: 16px;
  position: fixed;
  top: 39px; 
  right: 20px;
  z-index: 99999;
}

/* Entfernen Sie den Trennstrich "|" nach "FR" */
.lang-fr:not(:last-child)::after {
  content: none;
}

/* Ändern Sie die Schriftfarbe für "DE" und "FR" */
.lang-de, .lang-fr {
  color: #3255A4; /* Ersetzen Sie #3255A4 durch die gewünschte Farbe */
}

/* Ändern Sie die Schriftfarbe beim Hover für "DE" und "FR" */
.lang-de:hover, .lang-fr:hover {
  opacity: 0.8;
}

---------------------------------------------------------------------------------------------------------------------

Is there a possibility to integrate the language switcher in the burger menu? Or do you know a better solution?

Many thanks for your help!

Cheers!