The following command will create an order discount Function at extensions/order-discount-javascript, using our JavaScript boilerplate.

npm run generate extension -- --type order_discounts --template vanilla-js --name order-discount-javascript

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

➡️ Get input query code

For JavaScript and TypeScript, we provide tooling to generate types for working with your function input and output.

1. Navigate to your function extension folder:

   cd extensions/order-discount-javascript
   

2. Generate types using the following npm script:

   npm run typegen
   

3. (optional) Open src/index.js in an IDE that supports TypeScript, such as Visual Studio Code. Note that you get language server features (such as autocomplete, hover info, etc.) on the InputQuery and FunctionResult types.

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"

In src/index.js, 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 JavaScript function code

1. The following npm script will bundle your JavaScript and compile it using Javy:

   npm run build
   

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

   npm run function:validate --prefix ../..
   

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

   npm run function:preview --prefix ../.. 
   

Use the following steps, selecting the order-discount-javascript discount type, and using JAVASCRIPT 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're a JavaScript expert. Onto another language?