Order Discount Function with `orderMinimumSubtotal`

To create your Order Discount 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 Order Discount Function extension:

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

4. Navigate to extensions/order-discount.

5. Replace the contents of src/run.graphql file with the following code. run.graphql defines the input for the Function target. The query is slightly different in JavaScript and Rust due to code generation requirements.

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

7. Replace the content of the src/run.js or src/run.rs file with the following code. This logic applies a 10% discount to any order that has a minimum subtotal greater than $100.

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

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

1. Add the following code in app.minimum-subtotal.$functionId.new.jsx. The action function handles submitting the form data to Shopify to create the discount. The MinimumSubtotalNew function renders the page and form components using Polaris components, Remix hooks, and discount app components.

The settings in the shopify.extension.toml file define the URLs that Shopify uses to enable users to create and edit discounts based on your Function. Shopify automatically fills in any dynamic tokens in these URLs.

In extensions/order-discount/shopify.extension.toml, populate the create and module setting in the [ui] section. This change is automatically applied 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 order-discount discount type that you created under your app name. You should see the create page for your Minimum Subtotal discount.

6. Fill in the values for the discount:

   • For Method, use Automatic.
   • For Title, use MinimumSubtotal.
   • For Minimum subtotal, use 100.
   • For Discount percentage, use 10.

7. Click Save. The new discount is added to the list.

8. Open your development store and build a cart with a single item in it to have under $100 subtotal.

   No discounts should be applied to the cart.

9. Increase the item quantity until you have a subtotal higher than $100.

   The 10% MinimumSubtotal discount is 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 > order-discount.
    2. Click on any Function run to view its input, output, and any logs written to STDERR.