使用Shopify，我们不仅可以建立在线商店，而且还可以借助其Storefront API，创建自定义客户端应用程序来连接到它。在这篇文章使用Nextjs14和shopify store front api创建自定义在线商城中，您将学习如何设置 Shopify 商店并获取 Storefront API 令牌。获取令牌后，您将创建一个 Next.js 应用程序，使用虚拟数据列出和显示您的产品。最后，您将把 Next.js 应用程序连接到 Shopify 应用程序以获取您的真实产品。
一、创建一个nextjs项目
首先，让我们创建一个新的 Next.js 应用程序，并命名为shopify-nextjs
npx create-next-app@latest --ts --tailwind shopify-nextjs
其中的 --ts 为应用程序使用ts语法，--tailwind 意思为预先配置 Tailwind CSS 以进行样式设置。 然后回答这些问题
Would you like to use ESLint? … **No** / Yes
Would you like to use Tailwind CSS? … No / **Yes**
Would you like to use `src/` directory? … No / **Yes**
Would you like to use App Router? (recommended) … No / **Yes**
Would you like to customize the default import alias? … **No** / Yes
稍等一会,程序就安装好了。进入项目目录运行查看一下
cd shopify-nextjs
npm run dev
现在还是nextjs的默认安装成功页面,我们要稍微修改一下页面样式。 到HyperUI或者 tailwindui或者你喜欢的tailwindcss模板网站上复制一下漂亮的样式:
如果你不知道有哪些免费的tailwindcss样式参考网站,可以参考我的这篇文章
下面是简单修改过的首页。
二、使用git管理项目
创建一个github项目，把你的代码推送到远程 repo。
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin <https://github.com/YOUR_USERNAME_HERE/GIT_LINK_HERE>
git push -u origin main
三、Shopify 创建应用并开启Storefront API
1.创建 Shopify 合作伙伴帐户。
Shopify 合作伙伴计划可免费加入，并可让您通过无限的测试商店试用 Shopify 平台。
2.创建 Shopify 开发商店。
登陆你的Shopify 后台创建一个测试商店。
三、商店添加虚拟商品
手动添加商品或者使用这个githubrepo中的数据.导入一些测试数据。
将一些产品或其他数据添加到您的新商店后，您现在就可以从 Storefront GraphQL API 检索这些数据了。
四、配置Shopify store front API
1.创建应用
在 Shopify 管理员中，选择>应用和销售渠道。单击“开发应用”。
阅读提供的警告和信息，然后单击“允许自定义应用程序开发”, 创建应用。
2.选择 API 范围
单击配置管理 API 范围。 在管理 API 访问范围部分，选择要分配给应用程序的 API 范围。 对于此演示，至少选择“产品”下的write_products 和 read_products
3. 测试商店安装应用
在你的商店中安装刚才创建的应用
点击“保存”,单击“安装应用程序”.然后到api凭证项,你将看到api token 稍后我们会用到。
五、配置环境变量
回到代码中，在根级别创建一个文件.env.local并添加以下内容：
NEXT_PUBLIC_ACCESS_TOKEN="你的api token"
六、Shopify GraphiQL 应用程序设置
点击此处安装GraphQL API 应用,在本页面 ,输入您的商店网址
要获取您的商店网址，请在管理页面中点击主页 URL 应该是这样的：
https://admin.shopify.com/store/STORE_NAME_HERE
复制并粘贴您的 STORE_NAME_HERE,选择权限
单击“安装”,完成后，你应该可以在 GraphiQL 中使用以下查询
我们来测试一下，所以让我们创建一个 ProductsQuery。让我们从简单的获取产品标题开始：
query ProductsQuery {
products(first: 2) {
edges{
node{
title
}
}
}
}
返回结果
{
"data": {
"products": {
"edges": [
{
"node": {
"title": "7 Shakra Bracelet"
}
},
{
"node": {
"title": "Anchor Bracelet Mens"
}
}
]
}
}
}
应用程序正常。
六、环境变量添加api url
在.env.local 文件中添加api url
NEXT_PUBLIC_API_URL=https://{你的商店名}.myshopify.com/api/2024-07/graphql.json
2024-07为我写这篇文章的最新版本,shopfiy一年发布四个版本,后面可能版本不同,您可以在你的GraphiQL 后台页面中查看,你可以把他修改为最新版本。
我们已经准备了好nextjs 项目请求的必要条件,下面我们在shopify-nextjs 项目中中来请求 Storefront API获取数据。
未完待续