Locale APIAPIs
APIs
The Locale API allows the extension to retrieve the merchant's locale.
Anchor to localeapiLocaleApi
- Anchor to subscribablesubscribableRemoteSubscribable<string>required
IETF-formatted locale at time of page load and a callback to subscribe to value changes. Current supports only one subscription. You can utilize
on ato implement multiple subscriptions. Usingor the corresponding hooks counts as a subscription.
LocaleApiContent
- subscribable
IETF-formatted locale at time of page load and a callback to subscribe 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.
RemoteSubscribable<string>
export interface LocaleApiContent {
/** IETF-formatted locale at time of page load and a callback to subscribe 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.
*/
subscribable: RemoteSubscribable<string>;
}Was this section helpful?
Anchor to examplesExamples
Examples of using the Locale API
Anchor to example-subscribe-to-locale-changes.Subscribe to locale changes.
Was this section helpful?
Subscribe to locale changes.
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 />);
examples
Subscribe to locale changes.
React
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 />);TS
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); });