Localize custom cart sections

Support
#1

Hi, I have some custom sections that I added according to the docs customization section. I was wondering how I can localize the text for this.

Consider the example from the docs

<div id="snipcart-templates">
    <address-fields section="top">
        <div>
            <snipcart-label for="phone">
                Phone number
            </snipcart-label>
            <snipcart-input name="phone">
            </snipcart-input>
        </div>
    </address-fields>
</div>

How can I display “phone number” for the english site and “numéro de téléphone” on the french site

#2

You can basically follow the steps I described in HTML tags in localization strings

To get the string into your template do something like this <snipcart-label for="agb">{{ $localize('mcm.tos_consent') }}</snipcart-label>

If you don’t have HTML in your translation string it should work fine.

#3

I’m not sure I fully understand your example, I’m not a great javascript coder so I might need some hand holding. Either way though I’m close following the examples from the docs you linked to. Here is what I’m doing:

document.addEventListener('snipcart.ready', function() {
     Snipcart.api.session.setLanguage('en', {
         actions: {
             test: "english"
         }
    });
    Snipcart.api.session.setLanguage('fr', {
        actions: {
            test: "francais"
         }
    });
 });

in my template <p>{{ $localize('actions.test') }}</p>

So right now the cart is showing me the right string per the cart language but it’s inverting the entire language of the cart, it’s showing me french on the english site and english on the french site.

I suspect it’s because I’m already setting the language with lang attribute, then the js sets the language back. Is there a way to do this without setLanguage … just checking which lang the cart is already set to?

#4

This is very interesting. Because since I implemented it on my site, I experience the same inverse language behaviour and I couldn’t figure out why this is happening either. Guess we should contact snipcart support and let them know. I will make a support request by email. Maybe you could do that, too.

I’m not sure if setLanguage really sets the language when you pass in the second argument (overrides). I can’t see if it really does from the docs. I don’t think that there is another way of setting custom language strings. At least it is not documented.

#5

So it sounds like maybe you have a similar setup where you can switch between site languages and your lang attribute changes accordingly.

I got it working in the end by checking with an if statement whether lang is set to en or fr and then doing the setLanguage bit. Thing is that I am not a proficient javascript programmer so I used antlers which is a language that comes with my CMS, but here is my logic:
(the stuff in {{ }} is antlers so probably won’t work for you)

{{ if locale == "fr" }}
        <script>
              document.addEventListener('snipcart.ready', function() {
                    Snipcart.api.session.setLanguage('fr', {
                        actions: {
                          phone: "Numéro de téléphone",
                        }
                    });
                });
        </script>
{{ else }}
         <script>
              document.addEventListener('snipcart.ready', function() {
                    Snipcart.api.session.setLanguage('en', {
                        actions: {
                          phone: "Phone number",
                        }
                    });
                });
        </script>
 {{ /if }}

In javascript my guess is you would create a variable like let Language = document.documentElement.lang; and then do something like

if (language === "fr") {
     Snipcart.api.session.setLanguage('fr', {       
         actions: {
             phone: "Numéro de téléphone",
         }
} else...

but as I said don’t really know javascript too well

2 Likes
#6

Thank you @fred . I implemented it in pure JS like this and it works.

    if (document.documentElement.lang === "en") {
        Snipcart.api.session.setLanguage("en", {
            mcm: {
                tos_consent: MCM.translations.tos_consent.en,
            },
        });
    }
1 Like