useTranslate

Examples

• Translating strings

  Description

  Define strings in JSON files for each locale and render them using `translate()`. See [localizing UI extensions](/docs/apps/checkout/best-practices/localizing-ui-extensions) for more information.

  React

  /* See the locales/en.default.json tab for the translation keys and values for this example */
  import React from 'react';
  import {
    render,
    Text,
    useTranslate,
  } from '@shopify/checkout-ui-extensions-react';
  
  render('Checkout::Dynamic::Render', () => (
    <Extension />
  ));
  
  function Extension() {
    const translate = useTranslate();
    return (
      <Text>{translate('welcomeMessage')}</Text>
    );
  }
  

  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. See [localizing UI extensions](/docs/apps/checkout/best-practices/localizing-ui-extensions) for more information.

  React

  /* See the locales/en.default.json tab for the translation keys and values for this example */
  import React from 'react';
  import {
    render,
    Banner,
    useExtensionApi,
    useTranslate,
  } from '@shopify/checkout-ui-extensions-react';
  
  render('Checkout::Dynamic::Render', () => (
    <Extension />
  ));
  
  function Extension() {
    const {i18n} = useExtensionApi();
    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} />;
  }
  

  locales/en.default.json

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