Build a location rule user interface

In this tutorial, you'll learn how to do the following tasks:

• Generate starter code for location rule UI extensions.
• Update the location rule user interface with Admin UI extensions.

• You've completed the Add configuration to your location rule function tutorial.
• You created your app with the Remix app template.

The following example builds a React-based Admin UI extensions that enables merchants to create and configure a location rule function.

1. Navigate to your app directory:

2. Run the following command to create a new location rule UI extension:

3. Choose the language that you want to use. For this tutorial, you should select either JavaScript or TypeScript.

4. Navigate to extensions/location-rule-ui:

5. Create a new preferredCountry state variable:

6. Update your user interface to provide controls to configure the state variable:

7. Use the applyMetafieldsChange API to prepare your changes to be saved to your metafield:

The contents of src/OrderRoutingLocationRule.tsx should look like this:

To connect the location rule user interface to a location rule function, set the handle property of the extensions.ui setting in your extension config.

1. Navigate to your app directory:

2. Navigate to extensions/location-rule:

3. Inside of shopify.extension.toml, under the [extensions.ui] heading, add a new key to associate the newly created location rule UI extension with the existing location rule function.

4. Restart your app:

You can test your location rule to ensure it's working as expected, and review logs for your function.

Before you test the location rule, make sure that you have the following:

• Two locations in your store in different countries, one of them in Canada and the other one in the US.
• One product that is stocked on both locations.

1. On the Order routing settings page, click the Edit ✎ button next to your rule.

   A modal should open showing the custom location rule user interface.

2. Select a different prioritized country.

3. Click Done.

4. In the context bar, click Save.

5. Open your development store.

6. Add products to your cart, including the one that's stocked in your Canada and US locations.

7. Proceed through checkout.

8. In the Shopify admin, and find your new order. This should be assigned to the location in the country you prioritized.

9. To debug your function, or view its output, you can review its logs in your Partner Dashboard.

   1. Log in to your Partner Dashboard and navigate to Apps > {your app} > Extensions > order-routing-location-rule.
   2. Click on any function run to view its input, output, and any logs written to STDERR.
   3. Confirm that the function ran using the configured value.