Multiple languages

🧑‍💻 Technical Support
1

I’m creating a project that once complete I will make a copy and replace the text with the second language. My concern is the client wants to print physical banners for this project with the two language QR codes displayed. BUT I’m still developing the English version and will not duplicate the project until final approval from the client.

My question is how do I create a QR code for a project that doesn’t exist? Could I create a custom QR code and then change the URL to something different at a later date?

2

You could also add some localization functionality to your projects instead of duplicating them. Doing so will cause headaches in the future, as you will need to change the code in two places for every update.

Search for “javascript i18n” to find some nice premade solutions.

3

This project is pretty big and have a very tight deadline. I will have a look at the javascript i18n, but for this project I think I’m gonna have to stick with the duplicate method. Won’t make the copy till final approval from the client.

But thanks for the tip, it looks like it’s worth digging into

4

you can use third party for that if you have budget

5

Why pay for it when it’s free? I can even share my module, which I created last week for a project in 8th Wall. The module gets the user’s language from the browser.

// Example:
import { localize } from './searchPath/localization.js';

console.log( localize('loading_start_ar') ); // "Begin your AR Experience"

// localization.js

const DEFAULT_LANGUAGE = 'en';

// In addition to DEFAULT_LANGUAGE (English)
const supportedLanguages = {
  'sv-SE': 'sv',
  'sv': 'sv',
};

/**
 * Retrieves current language from memory, local storage, or browser.
 * Sets DEFAULT_LANGUAGE if the supported language isn't available.
 *
 * @return {string}
 */
const getCurrentLanguage = () => {
  window.currentLanguage = window.currentLanguage || localStorage.getItem('currentLanguage');

  if (!window.currentLanguage) {
    window.currentLanguage = supportedLanguages[navigator.language] || DEFAULT_LANGUAGE;
    setCurrentLanguage(window.currentLanguage);
  }

  return window.currentLanguage;
}

/**
 * Sets new language in local storage
 *
 * @param {string} newLang - Language code
 * @return {object}
 */
const setCurrentLanguage = (newLang) => {
  localStorage.setItem('currentLanguage', newLang);
  window.currentLanguage = newLang;

  return newLang;
}

/**
 * Gets new language from local storage
 * 
 * @param {string} key - a sentence or a unique string
 * @return {string} the translated text, or the key if the text doesn't exist
 */
const localize = (key) => {
  return getDictionary(key);
}

/**
 * Retrieves the dictionary and returns the correct translation based on the language
 * 
 * @param {string} key - a sentence or a unique string
 * @return {string} a text string based on language, default language, or "key" if the text doesn't exist
 */
const getDictionary = (key) => {
  let translation = dictionary[key];

  if (translation) {
    return dictionary[key][getCurrentLanguage()] || dictionary[key][DEFAULT_LANGUAGE] || key;
  }

  return key;
}

const dictionary = {
  'loading_start_ar': {
    'en': 'Begin your AR Experience',
    'sv': 'Starta din AR-upplevelse'
  },
}

export { getCurrentLanguage, setCurrentLanguage, localize };
1 Like
6

wow thanks for sharing

7

Thanks for this Richard, I was looking at what you first suggested, and was thinking what if I can store the Lang var and other vars in a browser cookie…

I wish I had more time to implement your multi language solution, but I’m going to be developing right up until launch.

Thanks again, loving 8thwall it’s got a lot of potential.