UIAPI
The API for interacting with UI.
Anchor to standardapiStandardApi
The base API object provided to this and other customer-account extension targets.
- required
Methods to interact with the extension's UI.
Docs_Standard_UIApi
- ui
Methods to interact with the extension's UI.
Ui
export interface Docs_Standard_UIApi extends Pick<StandardApi<any>, 'ui'> {}Ui
- forceDataRefresh
Refresh data so the surrounding information on the page is updated. The `content` string will appear in a toast message after refresh, to confirm the action was successful. To request access to this API: 1. Go to your partner dashboard and click **Apps**. 2. Select the app you need to request access for. 3. Click **API access**. 4. Under **Access force data refresh**, click **Request access**.
(content: string) => Promise<void> - overlay
An overlay is a contextual element on top of the main interface that provides additional information or functionality.
{ close(overlayId: string): void; } - toast
The Toast API displays a non-disruptive message that displays at the bottom of the interface to provide quick, at-a-glance feedback on the outcome of an action. How to use: - Use toasts to confirm successful actions. - Aim for two words. - Use noun + past tense verb format. For example, \`Changes saved\`. For errors, or information that needs to persist on the page, use a [banner](/docs/api/checkout-ui-extensions/unstable/components/feedback/banner) component.
{ show(content: string): void; }
export interface Ui {
/**
* An overlay is a contextual element on top of the main interface that provides additional information or functionality.
*/
overlay: {
close(overlayId: string): void;
};
/**
* The Toast API displays a non-disruptive message that displays at the bottom
* of the interface to provide quick, at-a-glance feedback on the outcome
* of an action.
*
* How to use:
*
* - Use toasts to confirm successful actions.
*
* - Aim for two words.
*
* - Use noun + past tense verb format. For example, \`Changes saved\`.
*
* For errors, or information that needs to persist on the page, use a [banner](/docs/api/checkout-ui-extensions/unstable/components/feedback/banner) component.
*/
toast: {
show(content: string): void;
};
/**
* Refresh data so the surrounding information on the page is updated. The `content` string will appear in a toast message after refresh, to confirm the action was successful.
*
* To request access to this API:
*
* 1. Go to your partner dashboard and click **Apps**.
*
* 2. Select the app you need to request access for.
*
* 3. Click **API access**.
*
* 4. Under **Access force data refresh**, click **Request access**.
*/
forceDataRefresh(content: string): Promise<void>;
}Anchor to examplesExamples
Anchor to example-displaying-a-toastDisplaying a toast
Here is an example of using the Toast.show method to display a message to the customer indicating that their action to select a pickup address was successful.
Displaying a toast
React
examples
Displaying a toast
description
Here is an example of using the `Toast.show` method to display a message to the customer indicating that their action to select a pickup address was successful.
React
import React, {useState} from 'react'; import { reactExtension, useApi, Button, Select, Modal, } from '@shopify/ui-extensions-react/customer-account'; export default reactExtension('customer-account.page.render', () => ( <Extension /> )); function Extension() { const [selectedAddress, setSelectedAddress] = useState(); const [pickupAddress, setPickupAddress] = useState(); const {i18n, ui} = useApi<'customer-account.page.render'>(); return ( <Modal> <Select onChange={(value) => { setSelectedAddress(value); }} label="Pickup Address Options" value="1" options={[ { value: '1', label: 'Address 1', }, { value: '2', label: 'Address 2', }, { value: '3', label: 'Address 3', }, { value: '4', label: 'Address 4', }, ]} /> <Button onPress={() => { setPickupAddress(selectedAddress); ui.toast.show('Selection saved'); }} > Save </Button> </Modal> ); }