Change header button language Squarespace 7.1

Site URL: https://www.mazamcr.com/es/inicio

Hi! I have already finished adding the two languages on my website by displaying the flags on the header. My main language is Spanish, and I currently have a "Contáctenos" button on the header that is connected to the Spanish contact page. Is there a way to change that CTA so that when someone is viewing the English version it sends them to the English contact page and also translate the button to "Contact Us"?

Any help is appreciated!

Have you solved it yet?

No! I already have the languages set up but have not been able to change that specific button in the header to change depending on the language.

I need that button to be in English when selecting the English language.

On 7/8/2020 at 7:01 PM, nataliaesp said:

No! I already have the languages set up but have not been able to change that specific button in the header to change depending on the language.

I need that button to be in English when selecting the English language.

Hi @nataliaesp I took a look and it looks like you were able to solve this issue on your site. Do you mind sharing how you did it please?

I have the same question

Thank you :) 

On 11/30/2020 at 5:54 AM, mei_chicks said:

Hi @nataliaesp I took a look and it looks like you were able to solve this issue on your site. Do you mind sharing how you did it please?

I have the same question

Thank you :) 

Hi! Honestly I had to ask a developer for help and he solved it. I have no idea :(

1 hour ago, nataliaesp said:

Hi! Honestly I had to ask a developer for help and he solved it. I have no idea :(

You will see this code in script

 if (lang == "es") {
          

          
        $('a[href="/"]').attr("href", "/es/inicio/");
      
        $('.btn').each(function() {
        var text = $(this).text();
        $(this).text(text.replace('Contact Us', 'Contáctenos')); 
    });
    }
      
      
        if (lang == "en") {
         

          
      $('a[href="/"]').attr("href", "/en/inicio/");
                $('.btn').each(function() {
        var text = $(this).text();
        $(this).text(text.replace('Contáctenos', 'Contact Us')); 
    });
    }

On 1/26/2021 at 2:32 AM, tuanphan said:

You will see this code in script

 if (lang == "es") {
          

          
        $('a[href="/"]').attr("href", "/es/inicio/");
      
        $('.btn').each(function() {
        var text = $(this).text();
        $(this).text(text.replace('Contact Us', 'Contáctenos')); 
    });
    }
      
      
        if (lang == "en") {
         

          
      $('a[href="/"]').attr("href", "/en/inicio/");
                $('.btn').each(function() {
        var text = $(this).text();
        $(this).text(text.replace('Contáctenos', 'Contact Us')); 
    });
    }

 

Hi @tuanphan, I am trying to solve the same issue as Natalie. I am making a multilingual site with Czech and English.

I inserted the code above into the Code Injection > Footer > Script:

/* TRANSLATE CTA BUTTON IN HEADER */
     if (lang == "cs") {  
        $('a[href="/"]').attr("href", "/cs/vitejte/");    
        $('.btn').each(function() {
        var text = $(this).text();
        $(this).text(text.replace('Visit us', 'Navštivte nás')); 
    });
    } 
      if (lang == "en") {
      $('a[href="/"]').attr("href", "/en/welcome/");
      $('.btn').each(function() {
      var text = $(this).text();
      $(this).text(text.replace('Navštivte nás', 'Visit us')); 
    });

But it still does not translate 😞 Any suggestions?

@mei_chicks

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

On 1/29/2021 at 11:05 PM, creedon said:

@mei_chicks

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

Hi @creedon sure, thank you for taking a look 🙂 the password is: N@rov1nu

@mei_chicks

The URL for your site? I'm not seeing it posted here.

9 hours ago, creedon said:

@mei_chicks

The URL for your site? I'm not seeing it posted here.

🤦🏾‍♀️ @creedon so sorry. I forgot to add that important detail. Here it is: https://circle-leopard-x8kf.squarespace.com/en/welcome/

@mei_chicks

First you need to carefully remove the code that you added.

Please see CTA Button Text and Url Change Based on Language.

Let us know how it goes.

13 hours ago, creedon said:

@mei_chicks

First you need to carefully remove the code that you added.

Add the following code in the place noted here, removing the [insert new code here]. The placement is absolutely critical.

    /* REMOVE OTHER LANGUAGES AND KEEP EXCLUDED ITEMS */
    $('.multilanguage:not(".lang-'+lang+',.exclude")').remove();
    
    [insert new code here]
  });  

/* TRANSLATE CTA BUTTON IN HEADER */

  let ctaLanguageUrlMapping = {
  
    /*
    
      cs : { // technically this isn't needed, the default language is cs
    
      text : 'Navštivte nás',
      
      url : '/cs/vitejte/'
      
      }, */
    
    en : {
    
      text : 'Visit us',
      
      url : '/en/welcome/'
      
      }
    
    }
    
  if ( lang in ctaLanguageUrlMapping ) {
  
    $( '.header-actions-action--cta a' )
  
      .attr ( 'href', ctaLanguageUrlMapping [ lang ].url )
    
      .text ( ctaLanguageUrlMapping [ lang ].text );
      
    }

Let us know how it goes.

@creedon it worked like a charm. Thank you so much for your help 🙂

@creedon Hi! I tried this code too and it worked on desktop, but not in my mobile menu. Can you help me? 

Thank you!

@Web_Turbu

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

@creedonhttps://grape-lizard-j7j6.squarespace.com/ the pw is Pierrot2021

I have updated my previous code post.

@Web_Turbu

Here is a version of the updated code wrapped in a script tag. You should be able to just drop it in as I pulled your values from your code.

<script>

  $( ( ) => {
  
    /*
    
      begin change cta button text and url based on language
      
      Version      : 0.1d1
      
      SS Version   : 7.1
      
      Dependancies : jQuery
                     
                     lang variable being set by language switching code
                     
      Note         : this code must be run after the language switching code has
                     set the lang variable
                     
      By           : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      */
      
      const languageTextUrlMap = {
      
        /*
        
          the format of each language code/text/url data structure is as follows
          
          [enter language code here] : {
          
          text : '[enter language text here]',
          
          url : '[enter url here]'
          
          },
          
          */
          
        /*
        
          cs : { // technically this isn't needed, the default language is cs
          
          text : 'Commander en ligne',
          
          url : ''
          
          },
          
          */
          
        en : {
        
          text : 'Order Online',
          
          url : ''
          
          },
          
        }
        
      // do not change anything below, there be the borg here
      
      if ( ! ( lang in languageTextUrlMap ) ) return; // bail if not defined
      
      $( '.header-actions-action--cta .btn, .header-menu-cta .btn' )
      
        .attr ( 'href', languageTextUrlMap [ lang ].url )
        
        .text ( languageTextUrlMap [ lang ].text );
        
      // end change cta button text and url based on language
      
    } );
    
  </script>

This is for v7.1 and specific to the poster's need.

Let us know how it goes.

@Web_Turbu

While I was digging around in your site I noticed a syntax error in the script just before mine. Change the following...

      }
      
  </script>

...to...

      }
      
    } );
    
  </script>

@creedon It worked perfectly! Thanks A LOT ! 🙂  (for the syntax error too! 😉 )

Hi @creedon, I came across this post since I have the same issue for which I need to have a different url for the Contact button in my SS7.1 site header. 

The translation switch between the default English (EN) language and the second Dutch (NL) language works fine, I even have different footers for both languages. 

But the url of the contact button remains /en/contact and won't switch to /nl/contact. 

This is the code I have in place at Advanced/Code injection (Footer area):

<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 = 'en';
  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 == "nl") {
    $('a[href="/"]').attr("href", "/nl/word-lid/");
  }

  /* 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="/en/join-us/" class="lang-en">EN</a> | <a href="/nl/word-lid/" class="lang-nl">NL</a></div>');

  $( ( ) => {
  
      /*   
      begin change cta button text and url based on language     
      Version      : 0.1d1      
      SS Version   : 7.1    
      Dependancies : jQuery                 
                     lang variable being set by language switching code                   
      Note         : this code must be run after the language switching code has
                     set the lang variable                    
      By           : Thomas Creedon < http://www.tomsWeb.consulting/ >      
      */
      
      const languageTextUrlMap = {
      
        /*        
          the format of each language code/text/url data structure is as follows          
          [enter language code here] : {         
          text : '[enter language text here]',     
          url : '[enter url here]'
          },
        */
          
        en : {
          text : 'Contact',
          url : '/en/contact'
          },

        nl : {
          text : 'Contact',
          url : '/nl/contact'
          },
       }
        
      // do not change anything below, there be the borg here
      
      if ( ! ( lang in languageTextUrlMap ) ) return; // bail if not defined  
      $( '.header-actions-action--cta .btn, .header-menu-cta .btn' )
        .attr ( 'href', languageTextUrlMap [ lang ].url )
        .text ( languageTextUrlMap [ lang ].text );
      // end change cta button text and url based on language
      
    } );
</script>

Perhaps you can tell me what is happening.. Help would be much appreciated!

I could share the password, but not public and i need to publish the site first since it is still in DEV. 

Best regards,

Steven

@Groeipiraat

We'd need to see the code in action to diagnose what is going on.

Please post the URL for your site. If you don't feel comfortable posting the info in public you can DM me.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

@Groeipiraat

You need to follow the instructions from the February 2 post. The code from the April 30 post is a special case.

Thank you very much @creedon, it works perfectly now! 👏

Hello @creedon! As an amateur I have tried to use you Feburary 2nd-code to be able to change the CTA-button in my site header between Norwegian and English. Flag, footer and everything else works. But the code you made doesn't seem to work. But I might also just not know how to use it 😅 Do you have the opportunity to help me? The website is greenwaves.no.