Build a discounts user interface
Users create and manage discounts in the Shopify admin. Shopify uses the URLs that you configure to render the discount creation and editing experience for the user. 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:
- Add a server endpoint to your node app that creates the function owner.
- Create an App Bridge UI that enables users to create the function owner.
- Configure the UI paths for your function.
Requirements
Anchor link to section titled "Requirements"- You've completed the Add configuration to your discounts experience tutorial.
Step 1: Add server endpoints to create the discount
Anchor link to section titled "Step 1: Add server endpoints to create the discount"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.
In
web/index.js
, add an import forGraphqlQueryError
under the existing import statements. This is helpful when trapping errors from the node GraphQL client.Still in
web/index.js
, define the mutations that you'll need to create discounts directly after the module imports:Still in
web/index.js
, add the following code directly afterapp.use(express.json())
:Still in
web/index.js
, add the endpoints directly afterconst app = express();
:
Step 2: Create the frontend UI for your function
Anchor link to section titled "Step 2: Create the frontend UI for your function"The following example builds a React-based page that enables app users to create and configure a new discount. The Shopify node app template uses file-based routing, so the file path of the page determines its URL.
Navigate to the
web/frontend
directory.Install the following packages:
@shopify/discount-app-components
to render a discounts UI@shopify/react-form
to make managing your forms easier@shopify/react-i18n
for localization support
In the
web/frontend/components/providers
folder, create aDiscountProvider.jsx
file and add aDiscountProvider
component:In
web/frontend/components/providers/index.js
, exportDiscountProvider
:In
web/frontend/App.jsx
, import and renderDiscountProvider
.Your
App.jsx
should look similar to the following example:Under
web/frontend/pages
, create a new folder calledvolume
. This folder name isn't important, but it determines the URL that you configure later in Step 5.Under
volume
, create a new folder called[functionId]
. The square brackets ([]
) indicate that this is a route parameter, which you can access in your frontend through theuseParams
hook.Create a new file in
[functionId]
callednew.jsx
with the following code:You now have a frontend page in your app that can invoke your app backend to create a discount.
Step 3: Add a card for the Volume discount configuration
Anchor link to section titled "Step 3: Add a card for the Volume discount configuration"So far, this UI renders the common input fields for a discount. You must add additional fields to collect the volume discount configuration that will be stored in your metafield.
In
web/frontend/pages/volume/[functionId]/new.jsx
, populate thequantity
andpercentage
configuration properties and define initial states for your form data:In
web/frontend/pages/volume/[functionId]/new.jsx
, parse thequantity
andpercentage
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 stores configuration in a JSON metafield:
In
web/frontend/pages/Volume/[functionId]/new.jsx
, after theMethodCard
component, add aCard
component for the Volume discount configuration:
Step 4: Update your input query to use an app-owned namespace
Anchor link to section titled "Step 4: Update your input query to use an app-owned namespace"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/input.graphql
file with the following code:
Step 5: Configure the create UI path for your function
Anchor link to section titled "Step 5: Configure the create UI path for your function"Settings in the shopify.function.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.function.extension.toml
, populate the two settings directly under[ui.paths]
.To update this setting and your input query, 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
product-discount
function is live.
Step 6: Create and test your discount
Anchor link to section titled "Step 6: Create and test your discount"If your app isn't already running, then start it using Shopify CLI.
From your Shopify admin, go to Discounts.
If you have existing discounts from previous tutorials, then click the checkbox next to each of them, and then click Deactivate discounts.
Click the Create discount button.
Click the product-discount discount type that you created under your app name. You should see the create page for your Volume discount.
Fill in values for the discount:
- For Method, use Automatic.
- For Title, use Volume.
- For Minimum quantity, use 4.
- For Discount percentage, use 20.
Click Save. You should see a new discount in the discounts list.
Open your development store and build a cart with a single item in it.
No discounts should be applied to the cart.
Increase the item quantity to four.
The 20% Volume discount should now be applied to the cart.
To debug your function, or view its output, you can review its logs in your Partner Dashboard:
- Log in to your Partner Dashboard and navigate to Apps > {your app} > Extensions > product-discount.
- 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.