Backend:
The B2B Edition application can currently be translated to 7 different languages at this time. Only the static text will be changed to the desired language you have set it at.
Supported Languages:
English
Chinese
French
Dutch
German
Italian
Spanish
How to Change the Language:
Inside the B2B Edition application, click on the globe icon in the bottom left hand corner
Selected the desired language
Review the tabs and translated static texts (screenshot is the Chinese translation)
Frontend:
The backend setting does not change the frontend language. To change the B2B Edition features' text on the frontend, there are a couple of different ways:
Customize storefront multi-language using B2B Edition JS API
There are two methods to customize the language(s) for B2B Edition:
We recommend using useText API if you only need to modify the display text with a single language.
Please use the B2B Edition locale solution below to customize multi-language.
Usage
Create
assets/js/theme/{relative-path}/b3lang.js
using the code below:
All available storefront language keys could be found in b3lang.js
export default {
// language key: we recommend to follow the ISO language codes(ISO-639) and country codes(ISO-3166) rules for language key.
zh: {
// navigation button text
'nav.button.dashboard': '仪表盘',
'nav.button.quotes': '报价',
'nav.button.userManagement': '用户管理',
'nav.button.buyAgain': '再次购买',
'nav.button.addressBook': '地址薄',
'nav.button.quickOrderPad': '快速购买',
'nav.button.shoppinglists': '采购清单',
'nav.button.quotesList': '报价列表',
// ……
},
en: {
// navigation button text
'nav.button.dashboard': 'Dashboard',
'nav.button.quotes': 'Quotes',
'nav.button.userManagement': 'User Management',
'nav.button.buyAgain': 'Buy Again',
'nav.button.addressBook': 'Addresses',
'nav.button.quickOrderPad': 'Quick Order Pad',
'nav.button.shoppinglists': 'Shopping Lists',
'nav.button.quotesList': 'Quotes',
// ……
}
// ……
}
Links:
Language Codes: ISO-639
Country Codes: ISO-3166
2. Import the assets/js/theme/{relative-path}/b3lang.js
to assets/js/theme/global.js
using the code below:
// other code
+ import b3lang from '{relative-path}/b3lang';
export default class Global extends PageManager {
onReady() {
// other code
window.b3themeConfig = window.b3themeConfig || {}
// config the lang key: To config the lang key, B3 will use the browser language keys to find the language config from window.b3themeConfig.locale automatically if the lang key is not found from the js. The default language (English) will be used for the storefront if all the browser language keys don't match one of the keys in window.b3themeConfig.locale.
+ window.b3themeConfig.lang = 'en'
+ window.b3themeConfig.locales = b3lang
// other code
}
}
Customize checkout multi-language using Script Manager
Download template(lang.js), customize the languages on demand.
Create a script by script manager, copy and paste the script content from the lang.js.
You can also change part of language by overriding the default language on demand.
window.B3checkoutLanguageConfig = {
"locales": {
"en": {
"address": {
"address_line_1_label": "Address",
"city_label": "City",
"city_required_error": "City is required",
}
}
}
}
Customize checkout multi-language using Script Manager (v3.3.0)
Download template(lang.js), customize the languages on demand.
Create a script by script manager, copy and paste the script content from the lang.js.
You can also change part of language by overriding the default language on demand.
// Bigcommerce checkout text config
window.B3checkoutLanguageConfig = {
"locales": {
"en": {
"address": {
"address_line_1_label": "Address",
"city_label": "City",
"city_required_error": "City is required",
}
}
}
}
// B2B Edition checkout text config
window.b3CheckoutConfigTips = {
"b3.login.failed": "Login Failed.",
"b3.salesRep.notMasquerading": "Please select a company.",
"b3.poinput.title": "PO Number / Reference Number (Optional)",
"b3.addresses.search": "Search addresses",
"b3.addresses.addressLabel": "Address Label",
"b3.addresses.enterNew": "Enter a new address",
"b3.addresses.select": "Select an address",
"b3.multiShipping.address.edit": "Edit",
"b3.multiShipping.address.remove": "Remove",
"b3.multiShipping.shipped.toAddress": "can be shipped to another address.",
"b3.poNumber.label": "PO Number / Reference Number",
"b3.label.optional": "(Optional)",
"b3.poNumber.required": "PO Number / Reference Number is required.",
"b3.field.required": "Please Input"
}