UI

The API for interacting with UI.

StandardApi

The base API object provided to this and other `customer-account` extension targets.

Docs_Standard_UIApi

ui

Methods to interact with the extension's 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**.

overlay

An overlay is a contextual element on top of the main interface that provides additional information or functionality.

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.

Examples

The API for interacting with UI.

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.

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>
  );
}

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>
  );
}