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

使用Shopify，我们不仅可以建立在线商店，而且还可以借助其Storefront API，创建自定义客户端应用程序来连接到它。在本文中，您将学习如何设置 Shopify 商店并获取 Storefront API 令牌。获取令牌后，您将创建一个 Next.js 应用程序，使用虚拟数据列出和显示您的产品。最后，您将把 Next.js 应用程序连接到 Shopify 应用程序以获取您的真实产品。

一、创建一个nextjs项目

首先，让我们创建一个新的 Next.js 应用程序，并命名为shopify-nextjs

npx create-next-app@latest --ts --tailwind shopify-nextjs

然后回答这些问题

✔ 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模板网站上复制一下漂亮的样式: alt text

如果你不知道有哪些免费的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中的数据.导入一些测试数据。 alt text

将一些产品或其他数据添加到您的新商店后，您现在就可以从 Storefront GraphQL API 检索这些数据了。

四、配置Shopify store front API

1.创建应用

在 Shopify 管理员中，选择>应用和销售渠道。单击“开发应用”。创建开发应用 alt text

阅读提供的警告和信息，然后单击“允许自定义应用程序开发”, 创建应用。

alt text

2.选择 API 范围

单击配置管理 API 范围。在管理 API 访问范围部分，选择要分配给应用程序的 API 范围。对于此演示，至少选择“产品”下的write_products 和 read_products

alt text

3. 测试商店安装应用

在你的商店中安装刚才创建的应用安装应用

点击“保存”,单击“安装应用程序”.然后到api凭证项,你将看到api token 稍后我们会用到。复制api

五、配置环境变量

回到代码中，在根级别创建一个文件.env.local并添加以下内容：

NEXT_PUBLIC_ACCESS_TOKEN="你的api token"

六、Shopify GraphiQL 应用程序设置

点击此处安装GraphQL API 应用,在本页面 ,输入您的商店网址

安装GraphQL API 应用

要获取您的商店网址，请在管理页面中点击主页 URL 应该是这样的： https://admin.shopify.com/store/STORE_NAME_HERE

复制并粘贴您的 STORE_NAME_HERE,选择权限

alt text

单击“安装”,完成后，你应该可以在 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获取数据。

未完待续