How do I use 'toast' in admin extension?

Extensions
1

I want to display a confirmation to the merchant after they press a button in our admin extension react app (e.g. a ‘save’ action). I couldn’t find any way of using App Bridge api, like the toast for example? I am resorting to displaying an icon on request finishing.

I tried the global ‘shopify’ object and ‘useAppBridge’ but neither seem to work. A code snippet would be very useful.

Thanks.

2

Hi - just to confirm, you’re looking to use this: Toast

3

Yes, that’s the one. I couldn’t get it to work with “admin.product-details.block.render” nor “admin.product-variant-details.block.render”.

4

Can you share your code where you’re trying to add this, and remove any sensitive info?

5

Example “admin-block” code I used (generated from the CLI), also tried in an useEffect and that didn’t work:

BlockExtension.jsx

import {
  reactExtension,
  useApi,
  AdminBlock,
  BlockStack,
  Text,
  Button,
} from "@shopify/ui-extensions-react/admin";
import { useAppBridge } from "@shopify/app-bridge-react";

// The target used here must match the target used in the extension's toml file (./shopify.extension.toml)
const TARGET = "admin.product-details.block.render";

export default reactExtension(TARGET, () => <App />);

function App() {
  // The useApi hook provides access to several useful APIs like i18n and data.
  const { i18n, data } = useApi(TARGET);
  console.log({ data });

  const shopify = useAppBridge(); // comment out to use global shopify

  return (
    // The AdminBlock component provides an API for setting the title of the Block extension wrapper.
    <AdminBlock title="My Block Extension">
      <BlockStack>
        <Text fontWeight="bold">{i18n.translate("welcome", { TARGET })}</Text>
        <Button
          onClick={() => {
            console.log("test");
            shopify.toast.show("Hi");
          }}
        >
          Test
        </Button>
      </BlockStack>
    </AdminBlock>
  );
}
6

Thanks for sharing how you’re trying to implement this - have gotten in touch with the relevant team for their recommendation.

7

Hi again,

So this API is not intended to be used for block extensions. You’ll need to use the APIs which are listed here: https://shopify.dev/docs/api/admin-extensions/unstable/api/block-extension-api

Also, you can’t use @shopify/app-bridge-react in extensions - it’s only usable for your apps.