本指南将引导你设置 Shopify 商业的 Next.js 店面。我们将使用由 Blazity 开发的开源 企业电子商务 入门，它附带一个 CLI，可以让你快速上手。

概述

下图概述了我们应用程序的架构。

Architecture of an application developed with Enterprise Ecommerce start

应用程序堆栈由 4 个关键组件组成

  • 数据源 — Shopify 管理员、个性化工具等。
  • 搜索引擎 — Meilisearch
  • 全栈应用程序 — Next.js 应用程序
  • 第三方集成 — 分析、CRM 等。

在此架构中，Meilisearch 数据库聚合来自多个来源的数据，使其可供 Next.js 应用程序访问。

我们的最终应用程序将如下所示：实时预览 ✨

先决条件

本指南需要

安装

此安装阶段为你提供应用程序与 Meilisearch 和 Shopify 商店交互所需的凭据。

这些凭据与安装阶段所需的環境变量相匹配。为清晰起见，本指南将使用“✅”表情符号来指示这些变量中的每一个。

💡
感谢 Blazity 提供的说明。如果你遇到问题，请咨询 Blazity 文档。

创建 Shopify 商店

如果你还没有 Shopify 商店，请访问 Shopify 并创建一个新商店。Shopify 为每个名为“商店域名”的商店关联一个唯一 ID。

要查找你的 Shopify 商店域名，请转到“设置”>“域名”。你的商店域名如下所示：your-domain.myshopify.com。

✅ Shopify 商店域名

安装 Shopify Headless

在 Shopify 应用市场中，找到 Headless 应用程序 并安装它。安装完成后，点击“创建店面”。

然后，我们将更新 API 访问权限。在“管理 API 访问权限”部分，点击“管理 API 访问权限”旁边“店面 API”。

编辑店面 API 权限以添加以下内容

  • unauthenticated_read_product_inventory
  • unauthenticated_read_customer_tags

保存权限后，你可以复制私有访问令牌。

✅ Shopify 应用店面 API 令牌

创建 Shopify 应用

现在，我们将为我们的商店创建一个 Shopify 应用。Shopify 应用允许你为你的商店构建自定义集成。此应用将允许我们获取 API 密钥以读取和管理 Shopify 商店中的数据。

要创建 Shopify 应用

  • 导航到你的商店的 Shopify 管理员仪表板
  • 打开商店的“设置”，然后导航到“应用和销售渠道”选项卡
  • 点击“开发应用”
  • 如果需要，请按照步骤允许你的商店进行自定义应用开发
  • 创建一个应用并输入一个名称，例如“Next.js 应用”

创建应用后，导航到“API 凭据”选项卡以查找 Shopify 应用的 API 密钥（不是 API 密钥！）。

✅ Shopify 应用 API 密钥

配置 Shopify 管理员 API 密钥

Shopify 应用使用两组密钥

  • 管理员 API 密钥 — 用于管理 Shopify 管理员，例如编辑产品目录
  • 店面 API 密钥 — 用于读取产品目录、创建购物车等。

我们可以在 Shopify 应用的“配置”选项卡中配置这些 API 密钥的访问范围。在本节中，我们将为管理员 API 密钥启用所需的范围。

要配置管理员 API 密钥的范围，请按照以下步骤操作

  • 在“管理员 API 集成”部分，点击“配置”
  • 启用以下范围
    • write_product_listings
    • read_product_listings
    • read_products
    • write_products
  • 在“Webhook 订阅”下，选择 2024-01 API 版本
  • 保存 :)
⚠️
自本指南发布以来，API 版本可能已更改。我们建议查看 Blazity 文档。

定义了我们的令牌 API 范围后，我们可以返回到“API 凭据”选项卡并安装我们的应用。点击“安装应用”以生成你的 API 访问令牌。

安装 Shopify 应用后，你将可以访问你的管理员 API 访问令牌。出于安全原因，此令牌仅会显示给你一次 - 请确保保存它。

✅ Shopify 应用管理员 API 令牌

创建你的 Meilisearch 数据库

Meilisearch 是一款开源搜索引擎，它提供全文本、向量和混合搜索功能。我们的 Shopify 产品数据将与 Meilisearch 同步，使前端应用能够为最终用户获取快速、相关的搜索结果。

如果你还没有 Meilisearch 帐户，请创建一个 Meilisearch Cloud 帐户。如有必要，你可以先学习如何 开始使用 Meilisearch Cloud。

💡
更喜欢自托管？学习如何 在本地安装 Meilisearch。

首先，创建一个新的“项目”，例如 Shopify 商店。这将创建一个新的 Meilisearch 数据库，并且需要几秒钟才能完成。

然后，你可以导航到项目的“设置”页面以查找你的“数据库 URL”（你的主机）和“默认管理员 API 密钥”。

✅ Meilisearch 主机 URL

✅ Meilisearch API 令牌

💡
我们建议在此步骤中启用 分析和监控，这样你就不需要以后再更改主机了。

配置你的 Meilisearch

创建数据库后，我们将创建索引。你可以为它们选择任何名称，但你必须相应地配置你的环境变量。让我们创建两个索引

  • 我们的产品的索引，例如products
  • 我们的产品类别的索引，例如categories

✅ Meilisearch 产品索引名称

✅ Meilisearch 类别索引名称

创建索引后，我们现在可以配置它们。Meilisearch 默认值将适用于大多数设置。对于每个索引，我们将只配置可过滤属性和可排序属性。

产品索引 — 可过滤属性

[
	"collections",
	"collections.handle",
	"collections.id",
	"flatOptions",
	"handle",
	"minPrice",
	"tags",
	"variants.availableForSale",
	"vendor",
	"hierarchicalCategories",
	"hierarchicalCategories.lvl0",
	"hierarchicalCategories.lvl1",
	"hierarchicalCategories.lvl2",
	"avgRating"
]

产品索引 — 可排序属性

[
	"minPrice",
	"updatedAtTimestamp",
	"avgRating"
]

类别索引 — 可过滤属性

[
	"handle",
	"id"
]

你可以将所有其他属性设置保留为其默认值。

安装

准备好所有凭据后，我们就可以启动安装向导了。让我们使用 Blazity 的commerce CLI 创建项目。

# with NPM
npm create commerce

# with Yarn
yarn create commerce

第一个提示将询问你选择要启用的服务。在本指南中，我们将仅启用默认值：Shopify 和 Meilisearch。

然后，CLI 将询问一系列凭据。如果你按照“设置”部分操作，则应该已经拥有所有必要的凭据。提供所有凭据后，CLI 将在新的文件夹中构建你的项目。

创建后，导航到你的项目目录。你的apps/web/.env.local 应该如下所示

# apps/web/.env.local

SHOPIFY_STOREFRONT_ACCESS_TOKEN=shpat_a-very-long-token
SHOPIFY_ADMIN_ACCESS_TOKEN=shpat_another-very-long-token
SHOPIFY_STORE_DOMAIN=your-domain.myshopify.com
SHOPIFY_APP_API_SECRET_KEY=a-32-characters-long-api-key
SHOPIFY_HIERARCHICAL_NAV_HANDLE=hierarchical-categories
MEILISEARCH_PRODUCTS_INDEX=products
MEILISEARCH_CATEGORIES_INDEX=categories
MEILISEARCH_ADMIN_KEY=your-meilisearch-admin-api-key
MEILISEARCH_HOST=https://edge.meilisearch.com
LIVE_URL=https://your-domain.myshopify.com
FLAGS_SECRET=randomly-generated-secret
CRON_SECRET=another-randomly-generated-secret

同步 Meilisearch 和 Shopify

Blazity 提供一个 CLI 用于同步 Shopify 和 Meilisearch 之间的数据。在本节中，我们将了解如何使用commerce-cli 来实现这一点。

要将你的 Shopify 数据与 Meilisearch 同步，请导航到你的项目文件夹并运行

npx commerce-cli@latest sync

此命令将从你的 Shopify 商店中提取所有必要的数据，并将其同步到你的 Meilisearch 数据库中。

💡
此外，commerce-cli 包 可以帮助你配置 webhook 以始终保持 Meilisearch 同步。

启动你的应用

初始化应用程序并将 Shopify 和 Meilisearch 之间的数据同步后，你就可以启动应用程序了。

要在开发模式下启动应用程序，请运行

# with NPM
npm run dev

# with Yarn
yarn dev

就是这样！你可以访问https://:3000 🎉 上的应用程序

你也可以在此处咨询一个实时示例：https://commerce.blazity.com/

更进一步

本指南并未涵盖 Blazity 模板中的所有可用功能。对于更高级的配置，你可以学习如何在 Blazity 文档 中设置分层类别、实施高度可扩展的重定向等。

此外，以下是一些资源，可帮助你将新的 Shopify 商店与 Meilisearch 和 Next.js 集成

订阅我们的 每月时事通讯，了解 Meilisearch 的所有最新信息。要详细了解 Meilisearch 的未来并帮助塑造它，请查看我们的 路线图 并参与我们的 产品讨论。

对于其他任何事项，请加入我们在 Discord 上的开发者社区。