如何构建一个无头WooCommerce电商网站Kinsta Store

登录 WordPress 管理仪表板。在侧边栏上，单击 WooCommerce > Settings。
在 “Settings” 页面上，单击 “Advanced” 选项卡。然后，单击 Rest API。
现在点击 Add key。为 REST API 添加密钥：
单击 Create an API key。给新的 REST API 添加描述，将 Permissions 字段设置为 “Read/Write“，然后单击 “Generate API key“。生成 WooCommerce API 密钥：
复制消费者密钥和秘密，并将它们安全地保存起来，以便在 React 应用程序中使用。
最后，调整固定链接结构，确保在请求 API 时返回 JSON 数据。在 WordPress 管理仪表板上，单击”设置“>”固定链接“，然后选择 “文章名“。

在继续之前，请为您的 WooCommerce 商店添加一些产品。导航至 WordPress 面板中的 WooCommerce 部分，点击产品，然后根据提示添加产品。您也可以为您的商店导入这些示例产品。

安装好 WordPress 和 WooCommerce 后，你就可以专注于无头电子商务应用的前端了。

设置 React 项目

下面介绍如何创建 React 项目：

在首选目录中，使用以下命令创建 React 项目：

# Remember to replace  with your preferred name
# With npx
npx create-react-app  && cd 
# With yarn
yarn create react-app  && cd

创建项目后，在项目根目录下创建一个 .env 文件，并添加以下内容：
```
REACT_APP_CONSUMER_KEY=your_Woocommerce_consumer_key
REACT_APP_CONSUMER_SECRET=your_Woocommerce_consumer_secret
```
将其替换为之前生成的 WooCommerce 消费者密钥和私钥。

接下来，使用下面的命令安装用于管理路由的包：

## With npm
npm i react-router-dom
## With yarn
yarn add react-router-dom

最后，使用以下命令启动 React 项目：
```
## With npm
npm start
## With yarn
yarn start
```

为您的无头 WooCommerce 网站开发前端

一个成功的电子商务商店应展示产品并方便购买。首先要在前端显示 WooCommerce 商店中的产品。这需要向 WooCommerce API 发起请求。

列出所有产品的端点是 wp-json/wc/v3/products 。必须将此端点添加到主机 URL 中。在您的 .env 文件中为基础 URL 添加此变量，基础 URL 就是附加了 products 端点的主机 URL。使用您的 WooCommerce 网站域名更新 http://example.com。

REACT_APP_BASE_URL=http://example.com/wp-json/wc/v3/products

在进行 API 请求时，必须在 URL 中包含用户密钥和秘密。合并后的 URL 如下：

https://yourdomain.com/wp-json/wc/v3/products?consumer_key=your_consumer_key&consumer_secret=your_consumer_secret

让我们在 React 应用程序中使用 Fetch API 发起 API 请求，以获取 WooCommerce 产品。

在 React 应用程序中，打开 src 目录中的 App.js 文件，并用下面的代码替换其内容：
```
import {Link} from 'react-router-dom';
import {useEffect, useState} from 'react';
function App() {
const BASE_URL = process.env.REACT_APP_BASE_URL;
const CONSUMER_KEY = process.env.REACT_APP_CONSUMER_KEY;
const CONSUMER_SECRET = process.env.REACT_APP_CONSUMER_SECRET;
const [products, setProducts] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchProducts = async () => {
const response = await fetch(`${BASE_URL}?consumer_key=${CONSUMER_KEY}&consumer_secret=${CONSUMER_SECRET}`);
const data = await response.json();
setProducts(data);
setLoading(false);
};
fetchProducts();
}, [BASE_URL, CONSUMER_KEY, CONSUMER_SECRET]);
return loading ? (

Just a moment. Fetching products...{' '}

) : (
```
- {product.name}
  
  Sale price: {product.sale_price}
  
  {product.stock_status === ‘instock’
  ? ‘In stock’
  : ‘Out of stock’}
- No products found
);
}
export default App;

这段代码会在组件挂载（useEffect 钩子）时使用 Fetch API 从 WooCommerce API 端点获取产品列表。端点 URL 是使用之前设置的环境变量构建的。

获取数据后，它会使用 setProducts(response) 更新组件状态（products），并使用 setLoading(false) 将 loading 设置为 false。

在获取数据时，会显示一条加载信息。一旦获取数据并将 loading 设置为 false，就会映射 products 数组，并使用 JavaScript XML (JSX) 呈现产品项目列表。每个产品项目都封装在一个来自 react-router-dom 的 Link 组件中，该组件会根据 ID 生成一个指向单个产品详细信息页面的链接。

每个产品都会显示产品名称、价格、描述（使用 dangerouslySetInnerHTML 注入 HTML 内容）、库存状态和一个按钮。

在 src 目录中打开 index.js 文件，将代码替换为以下代码段：

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./index.css";
import App from "./App";
ReactDOM.render(

Kinsta Store
} />


,
document.getElementById("root")
);

当浏览器调用 / 路由时，它会渲染 App 组件。

运行应用程序查看更改。
```
## With npm
npm start
## With yarn
yarn start
```
React 应用程序现在可以显示 WooCommerce 商店的产品列表。

创建动态产品页面

现在，为了增强用户体验，请使用 WooCommerce API 创建动态产品页面。该 API 提供了一个用于获取单个产品数据的端点： wp-json/wc/v3/products/。要使用该端点获取并显示商店中单个产品的数据，请按照以下步骤操作：

在 src 目录中创建一个组件 ProductDetail.js，用于获取和显示有关单个产品的数据。该组件可获取并显示单个产品的详细信息。其操作方式与 App.js 文件中的代码类似，只是它获取的是单个产品的详细信息。

import {useState, useEffect} from 'react';
import {useParams} from 'react-router-dom';
function ProductDetail() {
const BASE_URL = process.env.REACT_APP_BASE_URL;
const CONSUMER_KEY = process.env.REACT_APP_CONSUMER_KEY;
const CONSUMER_SECRET = process.env.REACT_APP_CONSUMER_SECRET;
const {id} = useParams();
const [product, setProduct] = useState(null);
useEffect(() => {
const fetchSingleProductDetails = async () => {
const response = await fetch(
`${BASE_URL}/${id}?consumer_key=${CONSUMER_KEY}&consumer_secret=${CONSUMER_SECRET}`
);
const data = await response.json();
setProduct(data);
};
fetchSingleProductDetails();
}, [BASE_URL, CONSUMER_KEY, CONSUMER_SECRET, id]);
if (!product) {
return (

Fetching product details...

);
}
return (

{product.name}
Original Price: {product.regular_price}
Sale price: {product.sale_price}

{product.stock_status === 'instock' ? 'In stock' : 'Out of stock'}


);
}
export default ProductDetail;

在 index.js 中创建新路由，并为其分配 ProductDetail 组件。此代码片段在 index.js 中创建一个新路由，并为其分配 ProductDetail 组件。这样，当用户点击产品链接时，就会被引导到相应的产品页面。
```
// index.js
…
import ProductDetail from "./ProductDetail";
ReactDOM.render(

…
} />
{/* the new route */}
} />
```

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

无头 WooCommerce 简介

先决条件

无头 WooCommerce 的优势

设置无头 WooCommerce 网站

激活 WooCommerce 插件

为无头操作配置 WooCommerce

设置 React 项目

为您的无头 WooCommerce 网站开发前端

Just a moment. Fetching products...

{product.name}

Kinsta Store

创建动态产品页面

Fetching product details...

{product.name}

Original Price: {product.regular_price}

Sale price: {product.sale_price}

服务申明

商务合作

网站内容

扫一扫QQ客服二维码

AI智能创作问答小程序

无头 WooCommerce 简介

先决条件

无头 WooCommerce 的优势

设置无头 WooCommerce 网站

激活 WooCommerce 插件

为无头操作配置 WooCommerce

设置 React 项目

为您的无头 WooCommerce 网站开发前端

Just a moment. Fetching products...

{product.name}

创建动态产品页面

Fetching product details...

{product.name}

Original Price: {product.regular_price}

Sale price: {product.sale_price}

相关文章

极客下载VIP会员持续热卖中！