Locales issue with custom labels

Support
,
#1

Hi I’m having an issue with my locales. I have some custom labels in my cart which I want to change up like this:

  if (document.documentElement.lang === "en"){
            document.addEventListener('snipcart.ready', function() {
                Snipcart.api.session.setLanguage('en', {
                    actions: {
                        phone: "Phone number",
                    }
                });
            });
        }      

        else if (document.documentElement.lang === "fr"){
            document.addEventListener('snipcart.ready', function() {
                Snipcart.api.session.setLanguage('fr', {
                    actions: {
                        phone: "Numéro de téléphone",
                    }
                });
            });
        }

My english site is mysite.com and my french site is mysite.com/fr . The problem is that the labels don’t change on mysite.com/fr .

What I’ve noticed is that my code works fine on the english site, I tested explicitly setting <html lang='fr'> on mysite.com and the labels work just fine in french.

So this isn’t a javascript issue so I’m wondering if I’m missing a step here, I tried registering mysite.com/fr in the control panel domains tab but it didn’t help.

#2

Hey Fred,

Are only your custom labels not translating to french or all labels?

A couple things it could be :

  • How did you implement the custom field? Did you add the label with the proper suffix {{ $localize('address_form.phone') }} or {{ $localize('actions.phone') }}?
  • Is your locale really ‘fr’, could it be ‘fr-FR’ or ‘fr-CA’?
#3

So I’m switching the html lang attribute with a if statement depending on what site I’m on. If I remove the if statement and explicitly set lang='fr' or lang='en' then both the french and the english labels work on my main site, if I go to my url with /fr then neither of them work. So it looks like it doesn’t have something to do with the way I implemented the labels.

This is how I set it up for the phone label:

<address-fields section="top">
        <div class="my-4">
            <snipcart-label for="phone">
                {{ $localize('actions.phone') }}
            </snipcart-label>
            <snipcart-input name="phone">
            </snipcart-input>
        </div>
    </address-fields>

Maybe it has to do with my logic of how I’m switching the language. I’m looking for the <html lang="fr"> attribute and then applying the appropriate snipcart .setLanguage accordingly, does this make sense? I’m not specifically looking for the locale so it shouldn’t matter if it’s fr_CA, no?

I also tested simply:

if (document.documentElement.lang === "en"){
            console.log("Hello world!");
        }      

else if (document.documentElement.lang === "fr"){
            console.log("Bonjour world!");
        }

and this works so I’m able to detect my lang attribute on both sites. Oh and also the language of the cart changes just fine on either site, it really is only the labels that don’t work on /fr

#4

Have you tried putting the snipcart.ready event at the base? I’d guess it won’t change much, but just covering it in case the snipcart.ready event pops before going into the if.

document.addEventListener('snipcart.ready', function() {
      if (document.documentElement.lang === "en"){      
                Snipcart.api.session.setLanguage('en', {
                    actions: {
                        phone: "Phone number",
                    }
                });
        }      
        else if (document.documentElement.lang === "fr"){
                Snipcart.api.session.setLanguage('fr', {
                    actions: {
                        phone: "Numéro de téléphone",
                    }
                });
        } 
});
#5

Hey this looks like it works! I’m not super good in javascript, can you tell me what the difference is or what was going with the other way I wrote it?

#6

I’m not exactly sure, my theory was that snipcart.ready event might pop too early, before it checked the language of the page. More so if you already had the Snipcart files cached in your browser.

#7

So i had more labels in there than just the phone label, one of them was pulling content from my CMS and in that content, i didn’t realize the French text was using quotations and breaking the JavaScript. Seems like that was the core of the issue in the end.

1 Like