API Localization

Snipcart is completely localizable. You can use it or translate it into any language you may need.

Translating Snipcart

If you want to learn how to translate Snipcart, I suggest you take a look at our Github repository. We are suggesting you use the en.js file as reference because it's always up to date with the latest resources. However, other files should be up to date as well.

A localization file is a simple JavaScript file that contains all the resources of Snipcart; it's using a public method named registerLocale.

The first parameter of the method is the language code, and the third parameter is a JavaScript object containing all the resources.

Snipcart.execute('registerLocale', 'en', {
yes:
"Yes",
no:
"No",
...
});

Take a look at the whole file on Github.

After you finish translating Snipcart, save the JavaScript file on your server. The name must be the language code, for instance: en.js.

You must include this file after the snipcart.js file.

<script
    id="snipcart"
    type="text/javascript"
    src="https://cdn.snipcart.com/scripts/2.0/snipcart.js"
    data-api-key="{API_KEY}"></script>

<!-- Include your resource file -->
<script
    type="text/javascript"
    src="http://localhost/scripts/en.js"></script>

The next step is to specify which language you are currently using. Snipcart relies on the lang attribute in the html tag.

<!DOCTYPE html>
<html lang="en">
...
</html>

We are accepting pull requests on Github for new languages! We highly encourage you to correct errors if you find some and submit your new language to our Github repository to make it available for everyone.

Changing language dynamically

If you need to switch the language of the cart dynamically or if you can't change the lang attribute of the html tag, you can use the Snipcart.setLang API method:

Snipcart.setLang('fr');

Altering specific resources

You may also want to only change a few resources on Snipcart. For instance, you may want to show a custom thank you message to your customers that will include a discount code for a future order.

Once you've included the snipcart.js file, you can use the registerLocale method to override the resources you want.

The following example will replace the default thank you message with a custom one showing your customer a discount code.

Snipcart.execute('registerLocale', 'en', {
"thankyou_message":
"Thank your for your order, use NEXT_ORDER code for your next order and get 10% off!"
});

If you are overriding a localization file other than the default english one, you will need to wait for the app to be ready to call this method. To do so, use the app.ready event.

Snipcart.execute('bind', 'app.ready', function() {
    Snipcart.execute('registerLocale', 'fr', {
    "thankyou_message":
    "Merci pour votre commande, utilisez le code PROCHAINE_COMMANDE lors de votre prochain achat et obtenez 10% de rabais!"
    });
});

The specified resource will then be overrided, but all the other ones will use the default values, so you can customize only the parts you want.

Was this article helpful?