快速 Simon 集成和商店化

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

正在获取指南

氢App

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

正在获取指南

快速 Simon 用于购买氢

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

"快通"是什么来着?

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

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

安装指南

该文件将指导您:

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

先决条件

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

# 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) 如何为私人获得只读的符号 @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. 在您的氢应用目录中运行

npm install @fast-simon/shopify-hydrogen

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

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

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

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

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

  /// <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数字 :

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

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

  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数字 :

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

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

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

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

    <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数字 :

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

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

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

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

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