使用 Blazity 构建您的 Next.js Shopify 店面

本指南将引导您为Shopify商务设置一个Next.js店面。我们将使用由Blazity开发的开源企业电商入门套件，该套件带有CLI，可让您快速启动。

概述

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

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

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

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

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

先决条件

本指南要求

• Node.js ≥ 20.x
• Yarn ≥ 4.x
• Meilisearch ≥ 1.8
• 一个Shopify商店

设置

此设置阶段为您提供了应用程序与Meilisearch和您的Shopify商店交互所需的凭据。

这些凭据与安装阶段所需的环境变量匹配。为了清晰起见，本指南将用“✅”表情符号标记每个此类变量。

创建Shopify商店

如果您还没有，请前往Shopify并创建一个新商店。Shopify为每个商店关联一个名为商店域名的唯一ID。

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

✅ Shopify商店域名

安装Shopify Headless

在Shopify应用商店中，找到并安装Headless应用程序。安装后，点击创建店面。

然后，我们将更新API访问权限。在管理API访问权限部分，点击Storefront API旁边的管理。

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

• unauthenticated_read_product_inventory
• unauthenticated_read_customer_tags

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

✅ Shopify应用店面API令牌

创建Shopify应用

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

要创建Shopify应用

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

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

✅ Shopify应用API密钥

配置Shopify Admin API密钥

Shopify应用使用两组密钥

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

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

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

• 在Admin API集成部分，点击配置
• 启用以下范围
  • write_product_listings
  • read_product_listings
  • read_products
  • write_products
• 在Webhook订阅下，选择2024-01 API版本
• 保存 :)

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

安装Shopify应用程序后，您将可以访问您的Admin API访问令牌。出于安全原因，此令牌只会向您显示一次 — 请务必保存它。

✅ Shopify应用管理API令牌

创建您的Meilisearch数据库

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

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

首先，创建一个新的项目，例如“Shopify store”。这将创建一个新的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数据库。

启动您的应用程序

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

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

# with NPM
npm run dev

# with Yarn
yarn dev

就是这样！您可以通过https://:3000访问您的应用程序 🎉

您也可以在此处查看实时示例：https://commerce.blazity.com/

进一步学习

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

此外，这里有一些资源可以帮助您将新的Shopify商店与Meilisearch和Next.js集成

• Meilisearch文档
• Next.js文档
• 将 Meilisearch Cloud 与 Vercel 集成

订阅我们的月度新闻通讯，随时了解Meilisearch的所有动态。要了解更多关于Meilisearch的未来并帮助塑造它，请查看我们的路线图并参与我们的产品讨论。

如有其他问题，请在Discord上加入我们的开发者社区。