七爪源码:如何使用 Next.js 构建 Shopify 店面

我喜欢 Shopify 和他们的平台，一切都非常简单和干净，几乎他们拥有经营电子商务业务所需的一切。 如果您是一名 JavaScript 开发人员并且像我一样喜欢 React，那么您可能一直在考虑如何使用 React 和 JavaScript 框架并将 Shopify 用作无头 CMS。

今天我将向您展示如何从 Shopify 构建和激活店面 API，如何将您的 React 项目连接到您的商店，最后从他们的 API 中获取数据并将其显示在您的网站上。 谢谢，Shopify 有关于他们的 API 和 SDK 的非常好的文档。

技术：

1. Next.js：我最喜欢的 React 框架，它的所有功能让你的生活更轻松。 你想知道更多吗？ 点击链接
2. Shopify Buy SDK：JS Buy SDK 是一个轻量级库，可让您将电子商务构建到任何网站中。 它基于 Shopify 的 Storefront API，并提供从您的商店检索产品和收藏、将产品添加到购物车以及结帐的功能。
3. Semantic UI React：Semantic 是一个开发框架，可帮助使用人性化的 HTML 创建漂亮的响应式布局。

让我们开始用 Next js 创建一个项目

nxp create-next-app shopify-storefront

此命令将使用 Next js 启动一个干净的项目，并且您需要开始在 pages 目录中编辑 index.js。 像往常一样，我很想删除额外的东西并为本教程创建我的目录结构，我们只需要添加两个目录，一个为我们的组件，我们将称之为组件，第二个，我们称之为 utils，我们将创建所有 里面的小时助手和实用程序。 到目前为止，您必须拥有类似于下图的内容。

让我们使用以下代码安装我们需要的所有库：

yarn add shopify-buy semantic-ui-react semantic-ui-css

我们需要将 Semantic Ui CSS 文件导入到我们的应用程序中，因为我们希望整个应用程序都可以使用，所以我们将把它添加到 _app.js 中。

What _app.js：Next.js 使用 App 组件来初始化页面。 您可以覆盖它并控制页面初始化。 这使您可以做一些令人惊奇的事情，例如：

• 页面更改之间的持久布局
• 导航页面时保持状态
• 使用 componentDidCatch 自定义错误处理
• 将附加数据注入页面
• 添加全局 CSS

import '../styles/globals.css'
import 'semantic-ui-css/semantic.min.css'
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}
 export default MyApp

因为 Next 非常棒，它会为您加载该文件，而您无需在项目中添加任何额外的加载器。

现在让我们创建一个名为 Shopify-client.js 的文件并将我们的应用程序连接到 Shopify 商店。

import Client from "shopify-buy";
export const client = Client.buildClient({
  storefrontAccessToken:
  process.env.SHOPIFY_STORE_FRONT_ACCESS_TOKEN,
  domain: process.env.SHOPIFY_STORE_DOMAIN ??
});

我假设你们知道如何开店，所以我只解释如何激活您的店面 API 并从 Shopify 获取令牌。 只需按照数字填写页面即可。

在根目录中添加 .env.local 文件并将以下键添加到该文件的时间

SHOPIFY_STORE_FRONT_ACCESS_TOKEN= your-token-from-shopify
SHOPIFY_STORE_DOMAIN=yourShopAddress.myshopify.com

您需要向您的商店添加一些产品，确保您正确填写并为您的产品添加漂亮的照片。

import { client } from '../utils/shopify-client'const HomePage = (props) => {
  console.log(props)
  return (
     <div>
      Hello World
    </div>
  )
}
export const getServerSideProps = async (context) => {  const products = await client.product.fetchAll(); // Fetch product  const infos = await client.shop.fetchInfo(); // Fetch shop Info if you think about SEO and title and ... to your page  const policies = await client.shop.fetchPolicies(); // fetch shop policy if you have any   return {   props: {   infos: JSON.parse(JSON.stringify(infos)),   policies: JSON.parse(JSON.stringify(policies)),   products: JSON.parse(JSON.stringify(products)),  }, };};

在上面的代码中，我添加了特殊的方法调用 getServerSideProps 来从服务器中的 Shopify API 获取产品

我们现在得到了我们的产品，您可以对您的产品做任何您想做的事情，并以您想要的方式在您的商店中展示它。

关注七爪网，获取更多APP/小程序/网站源码资源！