Build a delivery customization user interface

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

• Add a server endpoint to your node app that creates the function owner.
• Create an App Bridge UI that enables merchants to create the function owner.
• Configure the UI paths for your function.

• You've completed the Add configuration to your delivery customization tutorial.
• You created your app with the node app template and you are using the @shopify/shopify-app-express middleware.

You can't invoke the GraphQL Admin API directly from your app frontend, so you must first create an API layer for the app to invoke.

1. In web/shopify.js, update the version used for Shopify API calls to 2023-04.

2. In web/index.js, add an import for GraphqlQueryError under the existing import statements. This is helpful when trapping errors from the node GraphQL client.

3. Still in web/index.js, add the endpoint to create a delivery customization directly after app.use(express.json()).

This example builds a React-based page that enables merchants to create and configure a new delivery customization. The Shopify node app template uses file-based routing, so the file path of the page will determine its URL.

1. Under web/frontend/pages, create a new folder called delivery-customization. This folder name isn't important, but it determines the URL that you configure later in Step 3.

2. Under delivery-customization, create a new folder called [functionId]. The square brackets ([]) indicate that this is a route parameter, which you can access in your frontend through the useParams hook.

3. Create a new file in [functionId] called new.jsx with the following code.

   You now have a frontend page in your app that can invoke your app backend to create a delivery customization.

In the previous tutorial, you used a metafield namespace that was accessible to any app, so that the metafield namespace could be populated using GraphiQL. To make your function ready for production, you should update the metafield namespace to use a reserved prefix so that other apps can't use your metafield.

Replace the code in the extensions/delivery-customization/input.graphql file with the following code:

Settings in the shopify.function.extension.toml file define the URLs that Shopify uses for merchants to create and edit delivery customizations based on your function. Shopify automatically fills in any dynamic tokens in these URLs.

1. In extensions/delivery-customization/shopify.function.extension.toml, populate the two settings directly under [ui.paths].

2. To update this setting, deploy your app and function by running the following command from your app root folder:

   A message from the CLI displays and indicates that your delivery-customization function is live.

You must request the write_delivery_customizations access scope to invoke delivery customization mutations in the Admin API.

1. In shopify.app.toml in the root of your app, add the write_delivery_customizations scope.

2. Restart your app.

3. Use the URL provided by the CLI to open and re-install your app. You should be prompted to accept the new access scope permissions in your store.

1. From the Shopify admin, go to Settings > Shipping and delivery.
2. Under the Delivery customizations section, click Manage.
3. If you have existing customizations from previous tutorials, then click the checkbox next to each of them, and then click Deactivate.
4. Click Add a customization and then click delivery-customization by {your app}.

5. Fill in the delivery customization form, then click Save.

6. Open your development store, build a cart, and proceed to checkout.

7. Enter a delivery address that doesn't use the specified state/province code. You shouldn't see any additional messaging on the delivery options.

8. Change your shipping address to use your chosen state/province code. Your delivery options should now have the additional messaging.

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 > delivery-customization.
   2. Click on any function run to view its input, output, and any logs written to STDERR.

• Learn more about how Shopify Functions work and the benefits of using Shopify Functions.
• Consult the API references for Shopify Functions.

• Learn how to use variables in your input query.

• Review the UX guidelines to learn how to implement delivery customizations in user interfaces.