Order Discount Function with `orderMinimumSubtotal`
In this example, you create an Order Discount Function that uses the OrderMinimumSubtotal
Condition. After you run the example code, the FunctionResult returns the following:
See sample app with completed example here
Related common objects in Order Discount API
Anchor link to section titled "Related common objects in Order Discount API"Step 1: Create the order discount Function
Anchor link to section titled "Step 1: Create the order discount Function"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.
Navigate to your app directory:
Run the following command to create a new Order Discount Function extension:
Choose the language that you want to use. For this tutorial, select either Rust or JavaScript.
Navigate to
extensions/order-discount
.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 Rust and JavaScript due to code generation requirements.If you're using JavaScript, then run the following command to regenerate types based on your input query:
Replace the content of the
src/run.rs
orsrc/run.js
file with the following code. This logic applies a 10% discount to any order that has a minimum subtotal greater than $100.
Step 2: Create the frontend UI for your Function
Anchor link to section titled "Step 2: Create the frontend UI for your Function"- In
app/routes
, create a new file namedapp.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
.
Add the following code in
app.minimum-subtotal.$functionId.new.jsx
. Theaction
function handles submitting the form data to Shopify to create the discount. TheMinimumSubtotalNew
function renders the page and form components using Polaris components, Remix hooks, and discount app components.
Step 3: Configure the create UI path for your Function
Anchor link to section titled "Step 3: Configure the create UI path for your Function"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
.
Step 4: Create and test your discount
Anchor link to section titled "Step 4: 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 order-discount discount type that you created under your app name. You should see the create page for your Minimum Subtotal discount.
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.
Click Save. The new discount is added to the list.
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.
Increase the item quantity until you have a subtotal higher than $100.
The 10% MinimumSubtotal discount is 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 > order-discount.
- Click on any Function run to view its input, output, and any logs written to
STDERR
.