使用Nextjs14和shopify store front api创建自定义在线商城

使用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获取数据。

未完待续

我的博客原文使用Nextjs14和shopify store front api创建自定义在线商城