shopify-functions

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Shopify Functions

Shopify Functions differ from traditional backend apps. They are compiled to WASM and run on Shopify's infrastructure with extremely low latency. They are the successor to Shopify Scripts (Plus).

Shopify Functions 与传统后端应用不同，它们被编译为 WASM 并在 Shopify 的基础设施上运行，延迟极低，是 Shopify Scripts（Plus 版）的替代方案。

1. Concepts

1. 核心概念

Deterministic: Same input always equals same output. No random numbers, no network calls.
Execution Time: Strict limits (e.g., 5ms for logic).
Languages: Rust (First-class) or JavaScript (via Javy).

确定性：相同输入始终产生相同输出，不支持使用随机数，也无法发起网络请求。
执行时长：有严格限制（例如逻辑执行最长5ms）。
支持语言：Rust（一等支持）或 JavaScript（通过 Javy 编译）。

2. Structure

2. 结构组成

A function consists of:

shopify.extension.toml
: Configuration.
input.graphql
: Defines data sent to the function.
src/run.rs
(or
.js
): The logic that returns an
```
Output
```
.

一个函数包含以下部分：

shopify.extension.toml
：配置文件。
input.graphql
：定义发送给函数的入参数据。
src/run.rs
（或
.js
）：编写返回
```
Output
```
的业务逻辑代码。

3. Workflow

3. 工作流程

Generate:

shopify app generate extension --template product_discounts --name my-discount

Input Query: Modify
```
input.graphql
```
to request necessary data (Cart, Customer, etc.).
CodeGen: Run
```
shopify app function typegen
```
to generate types from your GraphQL query.
Logic: Implement the
```
run
```
function.
Build:
```
npm run build
```
(compiles to
```
.wasm
```
).
Deploy:
```
shopify app deploy
```
.

生成项目：

shopify app generate extension --template product_discounts --name my-discount

编写输入查询：修改
```
input.graphql
```
来请求所需数据（购物车、客户信息等）。
生成类型定义：运行
```
shopify app function typegen
```
基于你的 GraphQL 查询生成类型。
编写逻辑：实现
```
run
```
函数。
构建项目：
```
npm run build
```
（编译为
```
.wasm
```
文件）。
部署上线：
```
shopify app deploy
```
。

4. JS Example (Product Discount)

4. JS 示例（商品折扣）

javascript

// src/run.js
// @ts-check

/**
 * @typedef {import("../generated/api").RunInput} RunInput
 * @typedef {import("../generated/api").FunctionRunResult} FunctionRunResult
 */

/**
 * @param {RunInput} input
 * @returns {FunctionRunResult}
 */
export function run(input) {
  const targets = input.cart.lines
    .filter(line => line.merchandise.product.hasAnyTag)
    .map(line => ({
      cartLine: {
        id: line.id
      }
    }));

  if (!targets.length) {
    return {
      discounts: [],
      discountApplicationStrategy: "FIRST",
    };
  }

  return {
    discounts: [
      {
        targets,
        value: {
          percentage: {
            value: "10.0"
          }
        },
        message: "VIP Discount"
      }
    ],
    discountApplicationStrategy: "FIRST",
  };
}

javascript

// src/run.js
// @ts-check

/**
 * @typedef {import("../generated/api").RunInput} RunInput
 * @typedef {import("../generated/api").FunctionRunResult} FunctionRunResult
 */

/**
 * @param {RunInput} input
 * @returns {FunctionRunResult}
 */
export function run(input) {
  const targets = input.cart.lines
    .filter(line => line.merchandise.product.hasAnyTag)
    .map(line => ({
      cartLine: {
        id: line.id
      }
    }));

  if (!targets.length) {
    return {
      discounts: [],
      discountApplicationStrategy: "FIRST",
    };
  }

  return {
    discounts: [
      {
        targets,
        value: {
          percentage: {
            value: "10.0"
          }
        },
        message: "VIP Discount"
      }
    ],
    discountApplicationStrategy: "FIRST",
  };
}

5. Configuration (GraphiQL)

5. 配置与调试（GraphiQL）

You can't console.log in WASM. Use the Shopify App Bridge helper or the locally served GraphiQL explorer to debug inputs/outputs.

Run

npm run dev

, then open the highlighted GraphiQL URL in the terminal.

你无法在 WASM 中使用 console.log 打印日志，可借助 Shopify App Bridge 工具或本地启动的 GraphiQL 资源管理器 来调试输入输出。

运行

npm run dev

，然后在终端中打开高亮显示的 GraphiQL 访问地址即可。