BundleB2B Developer Guide

# Multi-language

# Customize storefront multi-language using BundleB2B JS API

There are two methods to customize the language(s) for BundleB2B:

  1. We recommend using useText API if you only need to modify the display text with a single language.
  2. Please use the BundleB2B locale solution below to customize multi-language.

# Usage

  1. 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.tpa': '贸易专业申请',
      '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.tpa': 'TRADE PROFESSIONAL APPLICATION',
      'nav.button.quotesList': 'Quotes',
      // ……
    }
    // ……
  }

Links:

Language Codes: ISO-639

Country Codes: ISO-3166

  1. 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

  1. Download template(lang.js), customize the languages on demand.

  2. 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)

  1. Download template(lang.js), customize the languages on demand.

  2. 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 Multi-Language Checkout

  // Bigcommerce checkout text config 
  window.B3checkoutLanguageConfig = {
    "locales": {
      "en": {
        "address": {
          "address_line_1_label": "Address",
          "city_label": "City",
          "city_required_error": "City is required",
        }
      }
    }
  }

  // BundleB2B 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"
  }

← Customize styles →