Create the admin UI for the Cart and Checkout Validation Function

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

• Generate starter code for Shopify Functions.
• Use GraphQL to define the input of your function.
• Deploy functions to the Shopify platform.

• Review logs for your function.

• Create an Admin UI extension to configure your function.

• You've created a Partner account.
• You've created a development store with the Checkout and Customer Accounts Extensibility developer preview enabled.

• You've created an app that uses Shopify CLI 3.49.5 or higher. If you previously installed Shopify CLI, then make sure that you're using the latest version.

  Start with an extension-only app and let Shopify host it for you.

• You've installed Node.js 16 or higher.

• You've installed your app on the development store with the Checkout and Customer Accounts Extensibility developer preview enabled.

The following requirements are specific to Rust-based development with Shopify Functions.

• You've installed Rust.

  On Windows, Rust requires the Microsoft C++ Build Tools. Make sure to select the Desktop development with C++ workload when installing the tools.

• You've installed cargo-wasi:

To create a validation function, use Shopify CLI to generate a starter function, specify the inputs for your function using an input query, and implement your function logic using JavaScript or Rust.

1. Navigate to your app directory:

2. Run the following command to create a new validation extension:

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

   Shopify defaults to Rust as the most performant and recommended language choice to stay within the platform limits. For more information, refer to language considerations.

4. Navigate to the extensions/cart-checkout-validation directory:

5. Replace the contents of src/run.graphql file with the following code. The run.graphql file defines the input for the function. You need to retrieve the quantity and merchandise ID of the current cart lines.

   Metafields allow your app to store custom data related to the validation function. Using the $app reserved prefix makes the metafield private to your app.

6. If you're using JavaScript, then run the following command to regenerate types based on your input query:

7. Replace the src/run.rs or src/run.js file with the following code. The function logic checks that the quantity of each cart line isn't above the quantity set in the configuration metafield. You can configure the quantity limits for each product variant using the Admin UI extension that you will create in step 2.

8. If you're using Rust, then build the function's Wasm module:

   If you encounter any errors, then ensure that you've installed Rust and cargo-wasi.

The following steps show how to build an Admin UI extension that enables merchants to configure a validation function.

1. Navigate to your app directory:

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

3. Choose the language that you want to use.

4. Navigate to the extensions/validation-settings directory:

5. Replace the validation settings UI code with the following code:

To link the Admin UI extension to the validation function, configure your validation function's TOML file. You can also configure the app's TOML file with necessary access scopes.

1. Navigate to the validation function directory:

2. Add the following code to the shopify.extension.toml file associated with the validation function:

3. Make sure that the shopify.app.toml file in your app root folder has the read_products access scope:

Run your development server and test the validation function and the corresponding Admin UI extension on your development store. You can test the validation behavior directly on checkout, or using the GraphQL Storefront API.

1. If you're developing a function in a language other than JavaScript or TypeScript, ensure you have configured build.watch in your function extension configuration.

2. Navigate back to your app root:

3. Use the Shopify CLI dev command to start app preview:

   You can keep the preview running as you work on your function. When you make changes to a watched file, Shopify CLI rebuilds your function and updates the function extension's drafts, so you can immediately test your changes.

4. Follow the CLI prompts to preview your app, and install it on your development store.

5. From the Shopify admin, go to Settings > Checkout.

6. Under Checkout rules, click Add rule. A new page opens and shows a list of checkout rules.

7. Find the cart-checkout-validation function that you want to test and select it.

8. In the validation configuration, set the limit to five for each product variant.

9. Click Save, but don't turn on the validation yet.

1. Before turning on the validation, create a cart that exceeds the quantity limit you set. For example, in your development store, create a cart with a quantity of 10 products.
2. Go back to the checkout rules page in theShopify Admin and enable this validation by clicking on Turn on.
3. Optional. Control how checkout behaves when encountering runtime exceptions by selecting the validation under Checkout rules and toggling Allow all customers to complete checkout.
4. Complete a checkout in your online store and verify that the validation error message displays.
5. Verify that checkout progress is blocked. Clicking the Continue to shipping button in 3-page checkout, or the Pay now button in 1-page checkout, shouldn't redirect the user.

1. You can also verify through the GraphQL Storefront API. Once the validation is turned on, create a cart with the cartCreate mutation:

2. Using the Storefront API cartLinesAdd mutation, confirm that the mutation's userErrors field contains the function's error message, and that executing the mutation was unsuccessful.

1. Open your terminal where shopify app dev is running, and review your function executions.

   When testing functions on development stores, the output of dev includes executions of your functions, any debug logging you have added to them, and a link to a local file with the full function execution details.

2. In a new terminal window, use the Shopify CLI app function replay command to replay a function execution locally, and debug your function without the need to re-trigger the function execution on Shopify.

3. Select the function execution from the top of the list. Press q to quit when you are finished debugging.

When you're ready to release your changes to users, you can create and release an app version. An app version is a snapshot of your app configuration and all extensions.

1. Navigate to your app directory.

2. Run the following command.

   Optionally, you can provide a name or message for the version using the --version and --message flags.

Releasing an app version replaces the current active version that's served to stores that have your app installed. It might take several minutes for app users to be upgraded to the new version.

• 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.