# @fast-simon/shopify-hydrogen 中文文档

规范地址：https://npmcn.com/package/%40fast-simon/shopify-hydrogen/

版本：1\.0\.21
npm 元数据更新时间：2026-11-08T08:39:14.015Z
中文译文更新时间：2026-11-14T10:56:37.495Z
软件包许可：ISC

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40fast-simon/shopify-hydrogen
原文对照：https://npmcn.com/package/%40fast-simon/shopify-hydrogen/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：107 kB，141 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2022-11-16T11:23:50.815Z
- 最新版本发布：2026-11-08T08:39:13.864Z
- 近 30 天下载量：2800（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：61（近 12 个月 56 个）

## 中文简介

与Sastify Plus认证合伙人Simon建立搜索和发现经验

## 安装

```sh
npm install @fast-simon/shopify-hydrogen
```

也可以使用：`pnpm add @fast-simon/shopify-hydrogen`、`yarn add @fast-simon/shopify-hydrogen`、`bun add @fast-simon/shopify-hydrogen`

## README

# 快速 Simon 集成和商店化

与Sastify Plus认证合伙人Simon建立搜索和发现经验

[正在获取指南](https://npmcn.com/package/%40fast-simon/shopify-hydrogen/'https://instantsearchplus.zendesk.com/hc/en-us/categories/360000839131-Getting-Started-with-Fast-Simon')

# 氢App

氢是反应框架和SDK,可以用来构建快活的Shopify自定义存储面.

[正在获取指南](https://npmcn.com/package/%40fast-simon/shopify-hydrogen/'https://shopify.dev/custom-storefronts/hydrogen')

# 快速 Simon 用于购买氢

响应国家防范机制软件包,支持Shopify Hydrgen Projects中的快通搜索和发现工具.

# "快通"是什么来着?

Fast Simon Shopify Hydrogen是一个反应库,用于Shopify Hydrogen应用.

通过在您基于氢的 React Shopify 商店前端安装此库, 您就可以在您的应用程序中提供快速西蒙搜索和发现工具 .

# 安装指南

该文件将指导您:

-   配置您的 Shopify 商店, 准备为快门 Shopify 氢气 .
-   在您的 Shopify 氢应用中安装和使用 Fast Simon Shopify 氢组件 .

### 先决条件

在安装前, 用快通私人的国家预防机制包认证 :

```bash
# NPM_TOKEN must hold a read-only token for the private @fast-simon scope.
# PowerShell: use "$env:NPM_TOKEN" — a bare "$NPM_TOKEN" expands to empty and sets no token.
npm config set "//registry.npmjs.org/:_authToken" "$NPM_TOKEN"
```

> 永远不要交代 见 [国家预防机制(MDF)](https://npmcn.com/package/%40fast-simon/NPM_AUTH.md) 如何为私人获得只读的符号 `@fast-simon` 范围并导出为 `NPM_TOKEN`。 。 。 .

### 所需资源

-   商店
-   氢应用
-   在您的 Shopify 商店安装的 Simon 快速应用程序
-   使用 Storefront 访问符设置自定义应用程序

### 配置氢应用配置

更新 Hydro.config.js 与您的商店域名和 Storefront API 令牌.

### 展览商店元场

Fast Simon Search and Discovery使用Metafields来自定义基于Fast Simon No-code编辑器配置的UI. Metafields需要被曝光,以便被你的氢应用取回.

不幸的是,Shoppify没有办法通过他们的管理员UI来揭露Shop Metafields.

我们强烈建议联系快门支援 我们会为你揭发梅塔菲尔德公司.

# 在您的氢应用中如何使用快通

#### 安装

1.  在您的氢应用目录中运行

```shell
npm install @fast-simon/shopify-hydrogen
```

2.  创建 `fastsimon.config.json` 在您根目录中的文件并填入您的快通 UUID & store id:

```json
{
    "UUID": "",
    "storeID": 0
}
```

3.  打开 `vite.config.ts` 并导入快通插件 :

```typescript
import fastSimonPlugin from "@fast-simon/shopify-hydrogen/plugin";
```

4.  添加 `fastSimon()`转到插件列表:

```typescript
  /// <reference types="vitest" />
  import {defineConfig} from 'vite';
  import hydrogen from '@shopify/hydrogen/plugin';
  import fastSimonPlugin from "@fast-simon/shopify-hydrogen/plugin";
  
  export default defineConfig({
      plugins: [hydrogen(), fastSimonPlugin()],
      resolve: {
          alias: [{find: /^~\/(.*)/, replacement: '/src/$1'}],
      },
      optimizeDeps: {
          include: ['@headlessui/react', 'clsx', 'react-use', 'typographic-base'],
      },
      test: {
          globals: true,
          testTimeout: 10000,
          hookTimeout: 10000,
      },
      server: {
          port: 5000
      },
  });
```

5.  打开 App.server.tsx 并导入 `FastSimonProviderServer`数字 :

```typescript
import fastSimonPlugin from "@fast-simon/shopify-hydrogen/plugin";
```

6.  包含 `FastSimonProviderServer`,通过请求对象,UUID和存储您 `fastsimon.config.json file`数字 :

```jsx
  function App({request}) {
      const pathname = new URL(request.normalizedUrl).pathname;
      const localeMatch = /^\/([a-z]{2})(\/|$)/i.exec(pathname);
      const countryCode = localeMatch ? localeMatch[1] : undefined;
      const isHome = pathname === `/${countryCode ? countryCode + '/' : ''}`;
  
      return (
          <Suspense fallback={<HeaderFallback isHome={isHome} />}>
              <ShopifyProvider countryCode={countryCode}>
                  <FastSimonProviderServer storeID={fastConfig.storeID} uuid={fastConfig.UUID} request={request}>
                      <CartProvider countryCode={countryCode}>
                          <Suspense>
                              <DefaultSeo />
                          </Suspense>
                          <Router>
                              <FileRoutes
                                  basePath={countryCode ? `/${countryCode}/` : undefined}
                              />
                              <Route path="*" page={<NotFound />} />
                          </Router>
                      </CartProvider>
                      <PerformanceMetrics />
                      {import.meta.env.DEV && <PerformanceMetricsDebug />}
                      <ShopifyAnalytics />
                  </FastSimonProviderServer>
              </ShopifyProvider>
          </Suspense>
      );
  }

```

您也可以直接提供您的 UUID 和 storeID 而不是创建 `fastsimon.config.json`

### 使用量

##### 收藏:

1.  打开 `src/routes/collections/[handle].server.jsx` 导入 `FastSimonAppServer`数字 :

```typescript
import {FastSimonAppServer} from "@fast-simon/shopify-hydrogen";
```

2.  添加到收藏处理器函数中 `fastSimonProps` 参数 :

```jsx
export default function Collection({params, fastSimonProps}) {...}
```

3.  将 Shopify 网格组件替换为 `FastSimonAppServer`,通过 `collectionID` 财务报告和审定财务报表 `fastSimonProps` 如下所示.

```jsx
    <Layout>
        <Suspense>
            <Seo type="collection" data={collection} />
        </Suspense>
        <PageHeader heading={collection.title}>
            {collection?.description && (
                <div className="flex items-baseline justify-between w-full">
                    <div>
                        <Text format width="narrow" as="p" className="inline-block">
                            {collection.description}
                        </Text>
                    </div>
                </div>
            )}
        </PageHeader>
        <Section>
            <FastSimonAppServer collectionID={collection.id} fastSimonProps={fastSimonProps}/>
        </Section>
    </Layout>
```

##### 搜索页面 :

1.  打开 `src/routes/search.server.jsx` 导入 `FastSimonAppServer`数字 :

```typescript
import {FastSimonAppServer} from "@fast-simon/shopify-hydrogen";
```

2.  添加到搜索处理器函数中 `fastSimonProps` 参数 :

```jsx
export default function Search({pageBy = PAGINATION_SIZE, params, fastSimonProps}) {...}
```

3.  将 Shopify 网格组件替换为 `FastSimonAppServer`,通过 `query` 财务报告和审定财务报表 `fastSimonProps` 如下所示.

```jsx
  return (
    <SearchPage searchTerm={decodeURI(searchTerm)}>
        <Section>
            <FastSimonAppServer query={decodeURI(searchTerm)} fastSimonProps={fastSimonProps}/>
        </Section>
    </SearchPage>
);
```

## 常见问题

### @fast-simon/shopify-hydrogen 是什么？

与Sastify Plus认证合伙人Simon建立搜索和发现经验

### 如何安装 @fast-simon/shopify-hydrogen？

在项目目录运行 npm install @fast-simon/shopify-hydrogen，或使用 pnpm add / yarn add / bun add。

### @fast-simon/shopify-hydrogen 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @fast-simon/shopify-hydrogen 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @fast-simon/shopify-hydrogen 可以商用吗？

@fast-simon/shopify-hydrogen 使用 ISC 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @fast-simon/shopify-hydrogen 的下载量有多少？

根据 npm 官方下载统计，@fast-simon/shopify-hydrogen 在 2026/10/15 – 2026/11/13 这 30 天内被下载 2,800 次，日均约 93 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @fast-simon/shopify-hydrogen 还在维护吗？

最新版本 1\.0\.21 发布于 2026/11/08（6 天前）；至今共发布 61 个版本，其中过去 12 个月发布了 56 个；首次发布于 2022/11/16。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。