Extension 'cart_transform' is not yet available for typescript

[peter-visualsquares]

Would be great if we can work in js/ts for cart transform api too

[devinatbryt]

Would be great if we can work in js/ts for cart transform api too

Heyo! I came across a similar issue, it's my understanding that whilst a template is not available yet, this is possible with any shopify function. As the main requirement of a shopify function is that it has to be wasm based code less than 500kb. Meaning any language that can compile down to wasm is able to use their cart_transform api. Shopify actually built a tool called Javi that compiles your javascript/typescript code into an executable wasm file.

I'm still working on getting my extensions deployed and whatnot, but I was able to get a project setup with it. Know I setup my extension from their other existing typescript/javascript extension templates.

Project Structure

/inputs - folder containing input tests
/src
+ index.ts

• .gitignore
• input.graphql
• package.json
• schema.graphql
• shopify.function.extension.toml

---

index.ts

import { InputQuery, FunctionResult } from "../generated/api";

export default (input: InputQuery): FunctionResult => {
    return {
        operations: []
    }
}

.gitignore

generated

input.graphql

query Input {
  cart {
    lines {
      id
      quantity
      merchandise {
        ... on ProductVariant {
          id
          component_parents: metafield(
            namespace: "custom"
            key: "component_parents"
          ) {
            value
          }
        }
      }
    }
  }
}

package.json

{
  "name": "bundles-cart-transform",
  "version": "0.0.1",
  "license": "UNLICENSED",
  "scripts": {
    "shopify": "npm exec -- shopify",
    "typegen": "npm exec -- shopify app function typegen",
    "build": "npm exec -- shopify app function build",
    "preview": "pnpm build && pnpm exec -- function-runner -f './dist/function.wasm'",
    "test": "vitest"
  },
  "codegen": {
    "schema": "schema.graphql",
    "documents": "input.graphql",
    "generates": {
      "./generated/api.ts": {
        "plugins": [
          "typescript",
          "typescript-operations"
        ]
      }
    }
  },
  "devDependencies": {
    "function-runner": "^4.0.2",
    "vitest": "^0.29.8"
  }
}

schema.graphql - I can't remember if this was generated via npm run typegen or if I copy and pasted this from here.

shopify.function.extension.toml

name = "bundles cart transform"
type = "cart_transform"
title = "bundles cart transform"
api_version = "unstable"

[build]
path = "dist/function.wasm"

That's pretty much all you need to get started. If you want to create tests for the cart, you can use the npm run preview script to first build your application and then run their function-runner package on a provided input to make sure your function meets their specifications.

I hope I could help :) !

[lukeclifton]

Be great to see a Typescript scaffold example for cart transform API soon! I am currently trying to translate the Rust example into Typescript. Has anyone done this already?

[ignacio-chiazzo]

Thanks for the feedback. We recently added JS and Typescript scaffold examples.

29-12-344fl-qtjc9.mp4