Localization

Examples

• Translating strings

  React

  /* See the locales/en.default.json tab for the translation keys and values for this example */
  import {
    reactExtension,
    Text,
    useTranslate,
  } from '@shopify/ui-extensions-react/customer-account';
  
  export default reactExtension(
    'customer-account.order-status.block.render',
    () => <Extension />,
  );
  
  function Extension() {
    const translate = useTranslate();
    return (
      <Text>{translate('welcomeMessage')}</Text>
    );
  }
  

  JavaScript

  /* See the locales/en.default.json tab for the translation keys and values for this example */
  import {extension} from '@shopify/ui-extensions/customer-account';
  
  export default extension(
    'customer-account.order-status.block.render',
    (root, {i18n}) => {
      const welcomeMsg = i18n.translate(
        'welcomeMessage',
      );
  
      root.appendChild(root.createText(welcomeMsg));
    },
  );
  

  locales/en.default.json

  {
    "welcomeMessage": "Welcome to our store!"
  }
  

• Translating strings with pluralization

  Description

  You can use the count option to get a pluralized string based on the current locale.

  React

  /* See the locales/en.default.json tab for the translation keys and values for this example */
  import {
    reactExtension,
    Banner,
    useApi,
    useTranslate,
  } from '@shopify/ui-extensions-react/customer-account';
  
  export default reactExtension(
    'customer-account.order-status.block.render',
    () => <Extension />,
  );
  
  function Extension() {
    const {i18n} = useApi();
    const translate = useTranslate();
  
    const points = 10000;
    const formattedPoints =
      i18n.formatNumber(points);
    // Translate the loyalty points message, using pluralization to differentiate messages
    const loyaltyPointsMsg = translate(
      'loyaltyPoints',
      {
        count: points,
        formattedPoints,
      },
    );
  
    return <Banner title={loyaltyPointsMsg} />;
  }
  

  JavaScript

  /* See the locales/en.default.json tab for the translation keys and values for this example */
  import {
    extension,
    Banner,
  } from '@shopify/ui-extensions/customer-account';
  
  export default extension(
    'customer-account.order-status.block.render',
    (root, {i18n}) => {
      const points = 10000;
      const formattedPoints =
        i18n.formatNumber(points);
      // Translate the loyalty points message, using pluralization to differentiate messages
      const loyaltyPointsMsg = i18n.translate(
        'loyaltyPoints',
        {
          count: points,
          formattedPoints,
        },
      );
  
      const app = root.createComponent(Banner, {
        title: loyaltyPointsMsg,
      });
  
      root.appendChild(app);
    },
  );
  

  locales/en.default.json

  {
    "loyaltyPoints": {
      "one": "You have {{formattedPoints}} loyalty point",
      "other": "You have {{formattedPoints}} loyalty points"
    }
  }