Get Grain

The following command will create an order discount Function at extensions/order-discount-grain, using our generic Wasm boilerplate.

npm run generate extension -- --type order_discounts --template wasm --name order-discount-grain

Replace the contents of extensions/order-discount-grain/input.graphql with the following from GitHub:

➡️ Get input query code

You need to inform Shopify about the UI paths for configuring your function. These paths are already provided by the app template you used.

In shopify.function.extension.toml, replace the [ui.paths] section with the following:

[ui.paths]
create = "/discount/:functionId/new"
details = "/discount/:functionId/:id"

You also need to inform Shopify about where to find GraphQL variable values that will be used when executing your input query.

Add the following to shopify.function.extension.toml:

[input.variables]
namespace = "$app:polyglot-functions"
key = "function-configuration"

You also need to inform the Shopify CLI about how to build your Grain wasm module, and where to expect the build output.

In shopify.function.extension.toml, replace the [build] section with the following:

[build]
command = "grain compile src/main.gr --no-gc --release --elide-type-info -o main.wasm"
path = "main.wasm"

Create src/main.gr and implement the following function logic, outputting appropriate JSON for an order discount function result.

IF customer has VIP metafield with a value of 'true'
AND products in their cart with tag X have a total of more than $Y
THEN discount the order by Z%

Hint: You can find a completed example on GitHub:

➡️ Get Grain function code

Since Grain doesn't yet have built-in JSON support, this example uses code copied from an open Grain pull request.

1. Navigate to your function folder:

   cd extensions/order-discount-grain
   

2. Build your function code based on the command in shopify.function.extension.toml:

   npm run function:build
   

3. Validate your function's output against the FunctionResult GraphQL type:

   npm run function:validate
   

4. Preview your function's JSON output and performance profile:

   npm run function:preview
   

Use the following steps, selecting the order-discount-grain discount type, and using GRAIN as your discount code.

Testing a discount on Shopify

1. Navigate back to your app root:

   cd ../..
   

2. Deploy the functions in your app.

   npm run deploy
   

   • If asked, Deploy to the same org and app as you used for dev?, answer Yes.
   • When asked, Make the following changes...?, answer Yes.
   Once the deploy is complete, you will see a Deployed to Shopify! message.
3. Open your store admin and navigate to Discounts.
4. Click Create discount and then select the discount type you just created.
   • If you see an error screen, ensure you still have npm run dev executing in a terminal window.
5. Keep Discount code selected, and enter a discount code name based on the language of the discount you just created. (For example, RUST for Rust or ZIG for Zig.) Leave the other fields as default and click Save.
6. Open your online store and add The Complete Snowboard to your cart. Continue to View my cart and Checkout.
7. In Contact information, enter karine.ruby@example.com.
8. In Discount code, enter the code you just created, then click Apply.
   • You should immediately see the discount applied, based on the logic in the Wasm module you deployed to Shopify.
   • Note that if you change the customer (to one that's not a VIP), or add a different product (which doesn't qualify for VIP discounts), the discount is removed.
9. 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 > polyglot-functions > Extensions > {your function}.
   2. Click on any function run to view its input, output, and any logs written to STDERR.

The workshop app includes a test script which will execute all the function wasm modules you have created so far, and print a comparison of their instruction count and binary size.

1. If necessary, navigate back to your app root.

   cd ../..
   

2. Execute the following command to run the test script.

   npm run function:test-all
   

You tamed the Grain! Onto another language?

Thanks to Grain's Oscar Spencer and Blaine Bublitz for their help with this example!