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