Build for order action menus

To create a customer account UI extension, you can use Shopify CLI, which generates starter code for building your extension and automates common development tasks.

1. Navigate to your app directory:

   Terminal

   Copy

   $

   $

   cd <directory>

2. Run the following command to create a new customer account UI extension:

   Terminal

   Copy

   $

   $

   shopify app generate extension --template customer_account_ui --name customer-account-ui-extension

3. Select a language for your extension. You can choose from TypeScript, JavaScript, TypeScript React, or JavaScript React.

   Tip

   TypeScript or JavaScript is suitable for smaller projects that require a more straightforward API. TypeScript React or JavaScript React is suitable when you want an easy model for mapping state updates to UI updates. With JavaScript or TypeScript, you need to map state updates yourself. This process is similar to writing an application targeting the DOM, versus using react-dom.

   You should now have a new extension directory in your app's directory. The extension directory includes the extension script at src/index.{file-extension}. The following is an example directory structure:

   Customer account UI extension file structure

   Copy

   99

   1

   2

   3

   4

   5

   6

   7

   8

   9

   10

   └── my-app

   └── extensions

   └── my-customer-account-ui-extension

   ├── src

   │ └── CustomerAccount.jsx OR CustomerAccount.js // The index page of the customer account UI extension

   ├── locales

   │ ├── en.default.json // The default locale for the customer account UI extension

   │ └── fr.json // The locale file for non-regional French translations

   ├── shopify.extension.toml // The config file for the customer account UI extension

   └── package.json

1. Start your development server to build and preview your app:

   Terminal

   Copy

   $

   $

   shopify app dev

   To learn about the processes that are executed when you run dev, refer to the Shopify CLI command reference.

2. Press p to open the developer console. In the developer console page, click on the preview link for your extension.

Anchor to Reference the extension targets in your configuration fileReference the extension targets in your configuration file

This example code uses the following targets:

In your extension's shopify.extension.toml configuration file, for each of the targets, create an [[extensions.targeting]] section with the following information:

• target: An identifier that specifies where you're injecting code into Shopify.
• module: The path to the file that contains the extension code.

Anchor to Create files for your targetsCreate files for your targets

Create files in your extension's src directory for each of your targets.

In this example, you'll create a file for the order action menu extension and a file for the order action modal extension. The filenames must match the module paths you specified.

Anchor to Fetch the order's fulfillmentsFetch the order's fulfillments

Merchants might not want to allow customers to report a problem before at least some parts of an order are fulfilled. To determine the fulfillment status, retrieve the order's fulfillments from the Customer Account API. Make sure to fetch data before rendering the button the first time.

Anchor to Conditionally render the order action menu item, based on the order's fulfillment statusConditionally render the order action menu item, based on the order's fulfillment status

Add a condition to render null if the order doesn't have any fulfillments.

Anchor to Render the buttonRender the button

Now you'll render the order action button. The button isn't being passed a to or onPress prop. This is how we know to connect this button to the order action modal extension.

Anchor to Check if this is a B2B customerCheck if this is a B2B customer

Add an extra option in the form's Select field options if the customer belongs to a company.

Anchor to Build the modal's UIBuild the modal's UI

Use CustomerAccountAction to extend the target. Here, you'll use Form and Select to display a list of reasons for reporting the order.

Anchor to Make an API call to store the reported problemMake an API call to store the reported problem

The example code adds a timeout to fake an API call. In a production-ready application, make an API call to your server to store the reported problem.

Anchor to Start your serverStart your server

Run the Shopify CLI dev command to build your app and preview it on your development store.

1. In a terminal, navigate to your app directory.

2. Either start or restart your server to build and preview your app:

   Terminal

   Copy

   9

   1

   shopify app dev

3. If prompted, select a development store.

4. Press p to open the developer console.

5. To install the app on your development store, click the Install your app link.

6. In the developer console page, click the preview link for one of your extension targets.

The customer accounts experience opens.

Test your conditional logic by submitting and fulfilling some orders. For example, the order action menu item should only display if the order has at least one fulfillment.