Build pre-auth order status UI extensions

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.

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 item extension and a file for the order action modal extension. The filenames must match the module paths you specified.

Anchor to Render the buttonRender the button

Now you'll render the Add note 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 Build the modal's UIBuild the modal's UI

Use CustomerAccountAction to extend the target. Here, you'll use Form, TextField, and Button components to add a note to the order.

Customer account UI extensions are limited to specific UI components exposed by the platform for security reasons. You can use checkout UI components and customer account UI components to create a UI that feels seamless within the customer accounts experience, and that inherits a merchant's brand settings.

Anchor to Make an API call to store the order note once the customer is logged inMake an API call to store the order note once the customer is logged in

The example code uses a comment line to mock the adding note request call. In a production-ready application, make an API call to your server.

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. In the developer console page, click the preview link for one of your extension targets.

The customer accounts experience opens.

1. Ensure that you're logged out.

2. Copy the URL of Order status page from a recent order confirmation email, and paste it to the browser directly to be taken to the pre-auth Order status page, where your extension will render.

3. Click the Add Note button, and you will be redirected to the login page.

4. After you login, you will see the modal opened automatically where you can leave a note.

The example code uses customer-account.order-status.block.render to render a card in the order summary on the Order status page.

In your extension's configuration file, for the customer-account-order-status-block-render target, 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 status block extension. The filenames must match the module paths you specified.

Anchor to Render loyalty points cardRender loyalty points card

Using UI extension components, add a card to the Order status page to let the customer know how many loyalty points they've earned for the order.

Anchor to Use the ,[object Object], API to direct the customer to loginUse the requireLogin API to direct the customer to login

Anchor to Determine the authentication state with the ,[object Object], APIDetermine the authentication state with the authenticationState API

Using the authenticationState API to get the current Order status page authentication state. You'll use this later in the tutorial.

Anchor to Render pre-authenticated state contentRender pre-authenticated state content

The extension adds a View rewards link to the card. Use the requireLogin API to direct the customer to login when the link is clicked. This method routes the customer back to the Order status page. The customer will need to re-initiate the action after they're logged in.

Anchor to Render fully authenticated state contentRender fully authenticated state content

In this example, the number of points is hardcoded.

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. In the developer console page, click the preview link for one of your extension targets.

The customer accounts experience opens.

1. Place an order, if you haven't already.

2. Click View your order from the order confirmation email to access the pre-authenticated Order status page. Don't log in.

3. Click the View rewards link, and you will be redirected to the login page.

4. After you login, you will be redirected back to the Order Status page and see your points balance.