Build the UI to configure the validation function
Merchants install and manage Cart and Checkout Validation Functions in Shopify admin. Shopify uses Admin UI extensions to render the validation settings experience for the merchant. You can customize this UI for your function's configuration needs, or to meet other requirements of your app.
What you'll learn
Anchor link to section titled "What you'll learn"In this tutorial, you'll learn how to do the following tasks:
- Generate starter code for a validation settings UI extension.
- Create a validation user interface with Admin UI Extensions.
Requirements
Anchor link to section titled "Requirements"- You created your app with the Remix app template.
- You've completed the Add configuration to your validation function tutorial.
- Your app has the
read_products
access scope. Learn how to configure your access scopes using Shopify CLI.
Step 1: Create the validation user interface
Anchor link to section titled "Step 1: Create the validation user interface"The following example builds a React-based Admin UI extensions that enables merchants to create and configure a validation function.
Navigate to your app directory:
Run the following command to create a new validation rule UI extension:
Choose the language that you want to use. For this tutorial, you should select either JavaScript React or TypeScript React.
Navigate to
extensions/validation-settings
:Replace the
src/ValidationSettings.jsx
orsrc/ValidationSettings.tsx
file with the following code.
Step 2: Link the user interface to the validation
Anchor link to section titled "Step 2: Link the user interface to the validation"Go to your validation folder:
Add the following to your
shopify.extension.toml
:
Step 3: Test the validation user interface
Anchor link to section titled "Step 3: Test the validation user interface"Navigate to your app directory:
To build and preview your app, either start or restart your server with the following command:
Press
p
to open the developer console.In the developer console page, click on the preview link for the validation settings extension.
Go to Settings > Checkout in Shopify admin.
In the Checkout rules section, click on Add rule and add your validation.
Confirm the user interface looks and works as intended.