七爪源码：如何使用 Next.js 构建 Shopify 店面
我喜欢 Shopify 和他们的平台，一切都非常简单和干净，几乎他们拥有经营电子商务业务所需的一切。 如果您是一名 JavaScript 开发人员并且像我一样喜欢 React，那么您可能一直在考虑如何使用 React 和 JavaScript 框架并将 Shopify 用作无头 CMS。
今天我将向您展示如何从 Shopify 构建和激活店面 API，如何将您的 React 项目连接到您的商店，最后从他们的 API 中获取数据并将其显示在您的网站上。 谢谢，Shopify 有关于他们的 API 和 SDK 的非常好的文档。
技术：
- Next.js：我最喜欢的 React 框架，它的所有功能让你的生活更轻松。 你想知道更多吗？ 点击链接
- Shopify Buy SDK：JS Buy SDK 是一个轻量级库，可让您将电子商务构建到任何网站中。 它基于 Shopify 的 Storefront API，并提供从您的商店检索产品和收藏、将产品添加到购物车以及结帐的功能。
- 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/小程序/网站源码资源！
