Build a discount experience

You want to create a new discount type called "Volume discount" that offers a percentage off when customers purchase more than the minimum quantity of each product.

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

• Install the discount React library to your app
• Create a new page in your app where merchants can create a discount
• Generate a new product discount extension with boilerplate code
• Modify the Shopify Function code to generate the discounts at checkout
• Configure your extension
• Test the new discount in your development store
• Share a test error report and access it

• You need to install 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 need to install cargo-wasi:

• If you're not using the discount sample app, then you need to create an app that uses Shopify CLI 3.0 or higher, or migrate your existing app so that it's compatible with Shopify CLI 3.0 or higher.

If you want to quickly get started, then you can get the sample code by completing the following steps. This tutorial describes the sample code step by step.

1. Clone the discount sample app:

2. Deploy the function:

3. In web/frontend/pages/Volume/new.jsx, update the FUNCTION_ID value with the SHOPIFY_VOLUME_ID value in the app's .env file.

4. Start a local server for your app:

5. Proceed to creating and testing a discount.

The discount React library provides a set of React components for building a discount form page. The discount React library helps you replicate the experience and behavior of existing discount types in your own app.

1. Navigate to the web/frontend directory.

2. Install the discount React library.

3. In the web/frontend/components/providers folder, create a DiscountProvider.jsx file and add a DiscountProvider component.

4. In web/frontend/components/providers/index.js, export DiscountProvider.

5. In web/frontend/App.jsx, import and render DiscountProvider and update navigationLinks.

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

To create the Volume discount type, you'll replicate the existing discount page in the Shopify admin, and then you'll add a card where merchants can configure the Volume discount.

1. In the web/frontend/pages folder, create a Volume folder.

   You'll add the discount create page to this folder.

2. Navigate to the web/frontend directory.

3. Install @shopify/react-form to make managing your forms easier and @shopify/react-i18n for localization support.

4. In web/index.js, define the mutations you'll need to create discounts before the createServer function is defined:

5. Still in web/index.js, add the endpoints to create discounts directly after app.use(express.json()):

6. In the web/frontend/pages/Volume folder, create a new.jsx file.

   This automatically creates a new URL (Volume/new) for your app based on the folder and file name.

7. Do one of the following to navigate to your discount create page.

   • Click the New volume discount navigation link in your app
   • Add /Volume/new to the end of your app URL within the Shopify admin

You should have a sample discount page appear that's similar to Shopify's discount page.

1. In web/frontend/pages/Volume/new.jsx, populate the quantity and percentage configuration properties and define initial states in your form state.

2. In web/frontend/pages/Volume/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 stores configuration in a JSON metafield. Be sure to update the METAFIELD_NAMESPACE and METAFIELD_CONFIGURATION_KEY with your own namespace and key.

3. In web/frontend/pages/Volume/new.jsx, after the MethodCard component, add a Card component for the Volume discount configuration.

Now that you have a discount create page in your app, you need to create the Shopify Function that will generate discounts during checkout. For this Volume discount type, you'll look at each variant in the cart, and if the customer has more products than the minimum quantity, then you return a percentage discount for those products.

1. Navigate to your app directory.

2. Run one of the following commands to create a new product discount extension:

   Set your extension name to Volume, and choose the Rust language option.

3. Navigate to extensions/Volume.

4. Build the function's Wasm module.

   If you encounter any errors, make sure that you've installed Rust and cargo-wasi and configured your environment variables correctly.

5. Copy the following code into input.graphql.

   input.graphql defines the input for the function. You need the items in the cart, the quantity, the variant, and the configuration stored in a metafield.

   Replace YOUR_NAMESPACE with your app name in input.graphql and in web/frontend/pages/Volume/new.jsx. For example, discounts-plus.

6. In src/api.rs, update the following areas:

   • The configuration structure in pub struct Configuration
   • The structs representing the input query defined in the previous step

   Types for serializing the input and output of your function are located in src/api.rs and written in Rust.

   You can replace the src/api.rs file with the following code:

7. Your main discounting logic is located in src/main.rs and written in Rust. In src/main.rs, update the following areas:

   • The function() method
   • The corresponding test suite

   You can replace the src/main.rs file with the following code:

8. In shopify.function.extension.toml, edit the ui.paths to connect the function to your frontend code.

   This code will tell Shopify which paths in your app to open when a merchant creates or updates a Volume discount.

9. Deploy your app along with the function.

10. In web/frontend/pages/Volume/new.jsx, update the FUNCTION_ID value with the SHOPIFY_VOLUME_ID value in the app's .env file.

    This will associate the discount that you create with the backend function logic to execute when a discount is created.

Your app must request the write_discounts access scope to create discounts.

1. In shopify.app.toml, add the write_discounts access scope.

2. Restart the server and reload the app:

   You should be prompted to accept the new access scope permissions in your store.

1. From your Shopify admin, go to Discounts.
2. Click the Create discount button.
3. Click the Volume discount type you created under your app name. You should see the create page for your Volume discount.
4. Fill in values for the discount, including minimum quantity and percentage discount.
5. Click Save.

6. Navigate to Discounts.

   You should see a new discount.

7. Navigate to your online store and add multiple items to your cart.

8. Go to checkout.

   You should see a Volume discount that's applied based on your configuration.

When the merchant shares an error report from the Shopify admin, you can access it from the app's Extensions section in your Partner Dashboard.

This section describes how to share a test error report and access it.

When a function is executed and an error occurs, a banner displays in the Discounts page of the Shopify admin. The banner contains information about when errors started occurring. It also includes a link that merchants can use to share information with developers about function runs that failed.

1. From your Shopify admin, go to Discounts.
2. Click the error banner.
3. Click Share the error reports with <developer-name>.
4. Select whether the error report includes the last 10 times the customization ran on checkout.
5. Click Share.

You'll receive an email notification.

1. From your Partner Dashboard, go to Apps.
2. Click the app that you deployed your function to.
3. Click Extensions.
4. Click the name of your function.

5. In the Total errors box, click Error runs.

   All of the function runs that failed display in a list.

6. From the list, click the failed function run that you shared.

You can view the error report.

For information on inspecting error details, refer to Debugging.