Suggested Wiki Edits: Working with App Extensions

You can use Shopify App Extensions with your Laravel backend.

Steps to achieve this:

1. Create an App Extension

• Install shopify-cli
• Create a new extension in your project scaffold extension
  • I recommend installing it in a sub-folder of the project, to separate the app extension files such as node_modules from the laravel files.

2. Call the API

The Shopify App Extension by default will add the authentication token to the request for you. Please see: https://shopify.dev/docs/api/admin-extensions#app-authentication.

To implement just do the following steps:

• Add the verify.shopify route to your API route. It is recommended to put the route under routes/api.php.
• Ensure that CORS is set for the shopify domain in config/cors.php, this is by default under routes/api.php.
• Ensure that you set the Accepts: application/json header in your fetch.

Sample Code For App Extension

import {
  reactExtension,
  AdminAction,
  BlockStack,
  Button,
  Text,
} from "@shopify/ui-extensions-react/admin";

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

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

function App() {
  const doAThing = async () => {
    try {
      const res = await fetch(
        `/api/do-a-thing`,
        {
          headers: {
            "Accept": "application/json",
            "Content-Type": "application/json",
          },
        }
      );

      const data = await res.json();

      console.log("res data: ", data);
    } catch (err) {
      console.error("API error:", err);
    }
  };

  return (
    // The AdminAction component provides an API for setting the title and actions of the Action extension wrapper.
    <AdminAction
      primaryAction={
        <Button
          onPress={() => {
            doAThing();
          }}
        >
          Confirm Impersonation
        </Button>
        // <Link href={redirectUrl}>
        //   Confirm Impersonation
        // </Link>
      }
      secondaryAction={
        <Button
          onPress={() => {
            close();
          }}
        >
          Close
        </Button>
      }
    >
      <BlockStack>
        <Text fontWeight="bold">
          Do a thing.
        </Text>
      </BlockStack>
    </AdminAction>
  );
}