Build a discounts user interface

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

• Create an App Bridge UI that enables users to create a function owner.
• Configure the UI paths for your function.

• You've completed the Add configuration to your discounts experience tutorial.
• You created your app with the Remix app template.

The @shopify/discount-app-components package provides useful components for building a discount function configuration experience. Using it requires setting up some dependencies on top of the Remix app template.

1. Install the following packages:

   • @shopify/discount-app-components: Provides components that you can use to render a discounts UI.
   • @shopify/react-form: Provides hooks to help you manage React forms.
   • @shopify/app-bridge-react: Allows you to use App Bridge actions in React.

2. The @shopify/discount-app-components library requires an AppProvider for the components to work. Create a components directory in app. Within the components directory, create a providers directory.

3. Create a DiscountProvider.jsx file within the app/components/providers directory with the following contents:

4. In app/routes/app.jsx, import and render AppBridgeReactProvider and DiscountProvider.

   Your app.jsx should look similar to the following example:

1. In app/routes, create a new file named app.volume-discount.$functionId.new.jsx.

   The Shopify Remix app template uses file-based routing, so the file name determines the page's URL. The $ prefix indicates functionId is a dynamic segment. The path for this page will be /app/volume-discount/{functionId}/new.

2. Add the following code in app.volume-discount.$functionId.new.jsx:

   • The action function handles submitting the form data to Shopify to create the discount.
   • The VolumeNew function renders the page and form components using Polaris components, Remix hooks, and discount app components.

So far, this UI renders the common input fields for a discount. You need to add additional fields to collect the volume discount configuration that will be stored in your metafield.

1. In app/routes/app.volume-discount.$functionId.new.jsx, populate the quantity and percentage configuration properties and define initial states for your form data:

2. In app/routes/app.volume-discount.$functionId.new.jsx, parse the quantity and percentage configuration properties and add them to your discount configuration.

   You can store your configuration in one or more metafields on a discount. Learn more about using metafields with input queries.

   The following example parses the configuration values to store in a metafield:

3. In app/routes/app.volume-discount.$functionId.new.jsx, after the MethodCard component, add a Card component for the volume discount configuration:

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/product-discount/src/run.graphql file with the following code.

The query differs slightly in JavaScript and Rust due to code generation requirements. This change is automatically reflected as long as you're running dev.

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

In extensions/product-discount/shopify.extension.toml, populate the two settings directly under [ui.paths]. This change is automatically reflected as long as you're running dev.

1. If your app isn't already running, then start it using Shopify CLI.

2. From your Shopify admin, go to Discounts.

3. If you have existing discounts from previous tutorials, then click the checkbox next to each of them, and then click Deactivate discounts.

4. Click the Create discount button.

5. Click the product-discount discount type that you created under your app name. You should see the create page for your Volume discount.

6. Fill in values for the discount:

   • For Method, use Automatic.
   • For Title, use Volume.
   • For Minimum quantity, use 4.
   • For Discount percentage, use 20.

7. Click Save. You should see a new discount in the discounts list.

8. Open your development store and build a cart with a single item in it.

   No discounts should be applied to the cart.

9. Increase the item quantity to four.

   The 20% Volume discount should now be applied to the cart.

10. 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 > product-discount.
    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.
• Review the UX guidelines to learn how to implement discounts in user interfaces.