Locale API

The Locale API allows the extension to retrieve the merchant's locale.

LocaleApi

LocaleApiContent

subscribable

IETF-formatted locale at time of page load and a callback to subsribe to value changes. Current supports only one subscription. You can utilize `makeStatefulSubscribable` on a `RemoteSubscribable` to implement multiple subscriptions. Using `makeStatefulSubscribable` or the corresponding hooks counts as a subscription.

Examples

The Locale API allows the extension to retrieve the merchant's locale.

import React from 'react';
import {
  reactExtension,
  useLocaleSubscription,
  useApi,
  Tile,
} from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridTile = () => {
  const locale = useLocaleSubscription();

  return (
    <Tile
      title='My App'
      subtitle={locale}
      enabled
    />
  );
};

export default reactExtension('pos.home.tile.render', () => <SmartGridTile />);

import {Tile, extension} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'My App',
    subtitle: api.locale.subscribable.initial,
    enabled: true,
  });

  api.locale.subscribable.subscribe((newLocale: string) => {
    tile.updateProps({
      subtitle: newLocale,
    });
  });

  root.append(tile);
});

import React from 'react';
import {
  reactExtension,
  useLocaleSubscription,
  useApi,
  Tile,
} from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridTile = () => {
  const locale = useLocaleSubscription();

  return (
    <Tile
      title='My App'
      subtitle={locale}
      enabled
    />
  );
};

export default reactExtension('pos.home.tile.render', () => <SmartGridTile />);

import {Tile, extension} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'My App',
    subtitle: api.locale.subscribable.initial,
    enabled: true,
  });

  api.locale.subscribable.subscribe((newLocale: string) => {
    tile.updateProps({
      subtitle: newLocale,
    });
  });

  root.append(tile);
});