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).

确定性：相同输入始终产生相同输出。不允许生成随机数，也不支持网络调用。
执行时间：有严格限制（例如逻辑执行时间上限为5毫秒）。
支持语言：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
```
.

一个Function包含以下部分：

shopify.extension.toml
：配置文件。
input.graphql
：定义传递给Function的数据。
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. JavaScript示例（商品折扣）

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 explorer来调试输入和输出。

运行

npm run dev

，然后在终端中打开高亮显示的GraphiQL URL即可。