Discounts Allocator Function

In this example, you create a Discounts Allocator Function that uses two metafields to help define its custom allocation logic. The first metafield will be applied to a discount, setting a max amount per discount application. If the discount is 50 percent off, then a max amount can be set to not exceed X number of dollars. The second metafield will be applied to the shop, setting a max discounted amount per cart.

Refer to a sample app with a completed example

• You've created a Partner account.
• You've created a development store.

• You've created an app that uses Shopify CLI 3.49.5 or higher. If you previously installed Shopify CLI, then make sure that you're using the latest version.

  If you plan to create a UI for your extension, then start with the Remix app template.

• You've installed Node.js 16 or higher.

• You've installed your app on the development store.

The following requirements are specific to Rust-based development with Shopify Functions.

• You've installed 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've installed cargo-wasi:

You must request the write_discounts_allocator_functions access scope to give your app the permissions it needs to create and update discounts.

1. In shopify.app.toml, located in the root of your app, add the write_discounts_allocator_functions scope:

2. Deploy your updated configuration to Shopify:

3. Restart your app:

   Use the URL provided by Shopify CLI to open or re-install your app. You should be prompted to accept the new access scope permissions in your store.

To create your Discounts Allocator Function, you'll do the following: - Generate a starter Function with Shopify CLI. - Specify the inputs for your Function with an input query. - Implement the Function logic using either JavaScript or Rust.

1. Navigate to your app directory:

2. Run the following command to create a new Discounts Allocator Function extension:

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

4. Navigate to extensions/discounts-allocator.

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:

1. Using GraphiQL App (Install it from here) run the following mutations in your shop:

2. Create the discount metafield definition:

3. Create the shop metafield definition:

1. After a merchant installs your app, they will need to register the allocator function in order for it to be actively allocating discounts. This takes precedence over most discount features that are built by Shopify.

2. In app/routes, create a new file named app.discounts-allocator.$functionId.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/discounts-allocator/{functionId}.

1. Add the following code in app.discounts-allocator.$functionId.jsx:

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

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

In extensions/discounts-allocator/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 near the top right of your page and select Amount off products. Now fill in the values for the discount:

   • For Method, use Automatic.
   • For Discount percentage, use 50.

5. Open your development store and build a cart with some eligible products and notice the discount amount applied is 50 percent off.

6. To utilize the single-discount-cap capability of your allocator, go to the GraphiQL App and run the following mutation in your shop:

1. Go to the cart you created and refresh the page, notice the discounts will be capped at the SINGLE_DISCOUNT_CAP value you set in the metafield.

2. Now to utilize the per-cart-cap capability of your allocator, go to the GraphiQL App and run the following mutation in your shop:

3. Click the Create discount button and select Amount off order. Fill in the values for the discount:

   • For Method, use Automatic.
   • For Fixed Amount, use 500 or any amount higher than your PER_CART_CAP.

4. Go to the cart you created and refresh the page, notice the total savings will be capped at the PER_CART_CAP value you set in the metafield.