Multilingual

As of now, the Crema template supports six languages. These are English, Spanish, French, Italian, Arabic and Chinese. Users can select or change any of the given languages by following simple steps.

Changing Language in run time:- You will find a Language selector in the header, click on that and select the language of your choice.

Changing Language in development mode (setting default Language):- To set the default language, go to the following file libs/constants/src/defaultConfig.js and update the locale object

const defaultConfig = {
  ...,
  locale: {
    languageId: 'english',
    locale: 'en',
    name: 'English',
    icon: 'us',
  },
  rtlLocale: ['ar'],
};

You have to replace this above object with any accepted value in order to set your language as the default locale. You can get the list of accepted values by opening the following file having path: libs/components/src/lib/AppLngSwitcher/data.js

const languageData = [
  {
    languageId: 'english',
    locale: 'en',
    name: 'English',
  },
  {
    languageId: 'chinese',
    locale: 'zh',
    name: '中国人',
  },
  {
    languageId: 'spanish',
    locale: 'es',
    name: 'Español',
  },
  {
    languageId: 'french',
    locale: 'fr',
    name: 'français',
  },
  {
    languageId: 'italian',
    locale: 'it',
    name: 'Italiano',
  },
  {
    languageId: 'arabia',
    locale: 'ar',
    name: 'عربي',
  },
];
export default languageData;

Adding New Language

In order to add new language to the template, follow the following steps:-

1. Make a new {new_locale}.json file in the folder libs/services/localization/src/locales

2. Copy the content of the file 'en-US.json' kept adjacent to the file you made and paste it into your file. The path of file 'en-US.json' is:libs/services/localization/src/locales/en_US.json

3. In the next step, you need to translate the values of translation variables into the new language.

  "ecommerce.exclusivePrice": "Price",
  "ecommerce.mrp": "MRP",
  "ecommerce.off": "OFF",
  "ecommerce.addToCompare": "Add to compare",
  "ecommerce.addToCart": "Add to cart",
  "ecommerce.orderSummary": "Order Summary",

4. Now make a new file in the folder libs/services/localization/src/entries

The name of the file should be the same as the above-created locale file, just the extension will be different, this will be {new_locale}.js file, earlier we created {new_locale}.json file.

Copy the following code, paste it into the newly made file and modify the content according to the changes suggested in the image given below the code.

import saMessages from '../locales/es_ES.json';
import {esES} from '@material-ui/core/locale';

const saLang = {
	messages: {
		...saMessages,
	},
	muiLocale: esES,
	locale: 'es',
};
export default saLang;

5. Now go to the file libs/components/src/lib/AppLngSwitcher/data.js and add the new object corresponding to the new language, the code should look something like this:-

const languageData = [
  {
    languageId: 'english',
    locale: 'en',
    name: 'English',
  },
  {
    languageId: 'chinese',
    locale: 'zh',
    name: '中国人',
  },
  {
    languageId: 'spanish',
    locale: 'es',
    name: 'Español',
  },
  {
    languageId: 'french',
    locale: 'fr',
    name: 'français',
  },
  {
    languageId: 'italian',
    locale: 'it',
    name: 'Italiano',
  },
  {
    languageId: 'saudi-arabia',
    locale: 'ar',
    name: 'عربي',
  },
  
//New Locale will be add here
];
export default languageData;

6. In the last step, open the file on the path: libs/services/localization/src/index.js and add the language code defined in the above step and assign the value of the variable exported in step 4 to this code. Follow the following code for reference:-

import enLang from './entries/en-US';
import zhLang from './entries/zh-Hans-CN';
import arLang from './entries/ar_SA';
import itLang from './entries/it_IT';
import esLang from './entries/es_ES';
import frLang from './entries/fr_FR';

const AppLocale = {
  en: enLang,
  zh: zhLang,
  ar: arLang,
  it: itLang,
  es: esLang,
  fr: frLang,
  //New Locale will be add here
};

export default AppLocale;

In case you want to maintain the locales on the project level, not the library level like above. then you can manage its apps directory as well.