Commerce Cart - Localization?

Questions
1

Hi all

Does anyone have a working setup where localization is taken from the Umbraco translations and somehow adds it to UCC.addLocale ?

how would we go about that in a multi language site ?

3

I did a custom js where I get the dictionaries items from /umbraco/dictionaries.json, that matches the cart local model. It seems to work great.

1 Like
4

Nice work :raising_hands:

Would be cool to share your solution if you can in case anyone else wanted to do the same.

Glad you got it working though.

5

The solution I went with solution where I added a custom js file (note this is only set to EN, need to changes to work on multisite):

window.addEventListener('DOMContentLoaded', function () {
    UCC.init({
        store: 'STORENAME',
        checkoutUrl: '/checkout',
        showPricesIncludingTax: false
    });

    fetch('/umbraco/dictionaries.json')
        .then(response => response.json())
        .then(data => {
            // Directly access the checkout object
            const checkoutData = data.cart;

            // (Optional) remove leading `$` from keys
            const cleanedCheckoutData = strip(checkoutData);

            // Then do whatever you want with checkoutData or cleanedCheckoutData
            UCC.addLocale('en', cleanedCheckoutData);
        })
        .catch(err => console.error('Error fetching dictionary:', err));
});

function strip(obj) {
    // If not an object (or array), just return the value as is
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }

    // If it’s an array, iterate and process each element
    if (Array.isArray(obj)) {
        return obj.map(item => strip(item));
    }

    // Otherwise, it’s a plain object
    const newObj = {};
    Object.keys(obj).forEach(key => {
        // Strip leading `$`
        let newKey = key.startsWith('$') ? key.substring(1) : key;

        // Replace cart.
        newKey = newKey.replace(/cart\./g, '');

        // 4) If the first character is uppercase, lowercase it
        newKey = newKey.replace(/^[A-Z]/, char => char.toLowerCase());

        // 5) For any remaining uppercase letters, prepend "_" and lowercase it
        newKey = newKey.replace(/[A-Z]/g, char => '_' + char.toLowerCase());

        // Recursively fix keys in the value
        newObj[newKey] = strip(obj[key]);
    });

    return newObj;
}
6

Nice. Thanks for sharing :+1:

1 Like