WooCommerce 是用于构建电子商务应用程序的最流行的 WordPress 插件之一。除了在传统的 WordPress 应用程序中使用 WooCommerce 外，您还可以将其用作无头解决方案。
本文将教你如何使用部署的 React 构建无头 WooCommerce 应用程序。
无头 WooCommerce 简介
术语 “无头电子商务” 是指电子商务应用程序的后台（头）与前台（体）分离。无头架构通过 API 在电子商务解决方案的展示层（前端）和应用层（后端）之间传递请求。
应用程序接口（API）定义了中间层之间的交互，允许企业在不影响应用层功能的情况下更改表现层，并更新、编辑或添加产品到多个应用层。
在无头 WooCommerce 应用程序中，WooCommerce API 就是一个中介，提供前台和后台之间的通信。除了上述优点外，这还支持灵活、可扩展的前端开发，使您能够专注于使用 React 或 Vue 等现代技术栈制作引人入胜的动态用户界面。
此外，使用无头 WooCommerce 还能帮助您适应不断变化的客户需求和技术进步，从而使电子商务基础架构面向未来。您可以毫不费力地更新前端组件，同时确保后台 WooCommerce 平台的稳定性和可靠性。
传统的电子商务应用程序和无头 WooCommerce 应用程序。
与传统的 WordPress 电子商务设置相比，这种现代方法具有众多优势。
既然你已经了解了什么是无头 WooCommerce 应用程序及其优势，那么是时候为自己创建一个了。使用 WordPress、React 和 WooCommerce 插件，您将创建一个电子商务应用程序并将其部署到服务器上。
先决条件
在开始之前，请确保您具备以下条件：
- 了解 React 和 WordPress
- 安装了 Node.js
- 一个正在运行的 WordPress 网站
- 一个云服务器账号（以 Kinsta 为例）
无头 WooCommerce 的优势
当您为自己的 WooCommerce 应用程序选择无头路径时，您将获得一系列好处，尤其是让一个后台支持您应用程序的各种前端的灵活性。
以下是无头 WooCommerce 的其他一些优势：
- 增强了定制功能 – 您可以使用任何网络框架，随心所欲地构建您的 WooCommerce 应用程序。
- 提高网站性能 – 您可以利用 React 和 Vue 等快速网络框架来显著提高网站性能。
- 搜索引擎优化优势 – 您可以更灵活地控制搜索引擎优化策略，从而实现业务目标。
- 更好的可扩展性 – 您的网站可以更有效地扩展，即使在高流量期间也能确保性能流畅。
- 创造独特客户体验的能力 – 您可以摆脱传统模板的束缚。您可以为客户打造创新的个性化体验。
设置无头 WooCommerce 网站
以下是设置 WooCommerce 网站的分步指南：
安装 WordPress 和 WooCommerce 插件。
激活 WooCommerce 插件
激活 WooCommerce 插件。
注：如果您使用的是 Kinsta，安装过程中不会要求您提供文件传输协议（FTP）的详细信息。但是，如果您使用本地安装的 WordPress，则必须提供 FTP 详细信息。继续为无头操作配置 WooCommerce 插件。
为无头操作配置 WooCommerce
配置 WooCommerce 为无头操作：
在继续之前，请为您的 WooCommerce 商店添加一些产品。导航至 WordPress 面板中的 WooCommerce 部分，点击产品，然后根据提示添加产品。您也可以为您的商店导入这些示例产品。
安装好 WordPress 和 WooCommerce 后，你就可以专注于无头电子商务应用的前端了。
设置 React 项目
下面介绍如何创建 React 项目：
# Remember to replace <app-name> with your preferred name # With npx npx create-react-app <app-name> && cd <app-name> # With yarn yarn create react-app <app-name> && cd <app-name>
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
## 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 产品。
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 ? (
<div className="loaderText">
<h2>Just a moment. Fetching products...</h2>{' '}
</div>
) : (
<ul>
{products ? (
products.map((product) => (
<li key={product.id}>
<Link to={`/product/${product.id}`}>
<img src={product.images[0].src} alt="Product banner"/>
<h2>{product.name}</h2>
<p>Sale price: {product.sale_price}</p>
<strong>
{product.stock_status === 'instock'
? 'In stock'
: 'Out of stock'}
</strong>
<button>Add to Cart</button>
</Link>
</li>
))
) : (
<li>No products found</li>
)}
</ul>
);
}
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 内容）、库存状态和一个按钮。
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(
<React.StrictMode>
<div className="container">
<header>
<h1>Kinsta Store</h1>
</header>
<BrowserRouter>
<Routes>
<Route exact path="/" element={<App />} />
</Routes>
</BrowserRouter>
</div>
</React.StrictMode>,
document.getElementById("root")
);
当浏览器调用 / 路由时，它会渲染 App 组件。
## With npm npm start ## With yarn yarn start
React 应用程序现在可以显示 WooCommerce 商店的产品列表。
创建动态产品页面
现在，为了增强用户体验，请使用 WooCommerce API 创建动态产品页面。该 API 提供了一个用于获取单个产品数据的端点： wp-json/wc/v3/products/<id>。要使用该端点获取并显示商店中单个产品的数据，请按照以下步骤操作：
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 (
<div className="loaderText">
<h2>Fetching product details...</h2>
</div>
);
}
return (
<div className="product-detail">
<h2>{product.name}</h2>
<h4>Original Price: {product.regular_price}</h4>
<h4>Sale price: {product.sale_price}</h4>
<img src={product.images[0].src} alt="Product banner"/>
<strong>
{product.stock_status === 'instock' ? 'In stock' : 'Out of stock'}
</strong>
</div>
);
}
export default ProductDetail;
ProductDetail 组件。此代码片段在 index.js 中创建一个新路由，并为其分配 ProductDetail 组件。这样，当用户点击产品链接时，就会被引导到相应的产品页面。
// index.js
…
import ProductDetail from "./ProductDetail";
ReactDOM.render(
<React.StrictMode>
…
<Router>
<Routes>
<Route exact path="/" element={<App />} />
{/* the new route */}
<Route path="/product/:id" element={<ProductDetail />} />
</Routes>
</Router>
</div>
</React.StrictMode>,
document.getElementById("root")
);
通过这些修改，点击应用程序中的任何产品都会将用户重定向到一个页面，显示该特定产品的详细信息。服装产品的详细信息：
您可以访问 GitHub 代码库中的完整代码。
在无头设置中集成关键的 WooCommerce 功能
您可以在无头 WooCommerce 应用程序中列出产品的基础上，集成以下基本功能：
- 购物车 – 在客户端管理购物车数据，或使用本地存储，让用户可以无缝添加、删除和更新商品。
- 结账流程 – 使用 React 组件设计简化的结账流程，收集必要信息，验证用户输入，确保流畅的结账体验。
- 用户身份验证 – 使用 JSON Web Token (JWT) 或 Open Authorization 2.0 (OAuth2) 实现安全身份验证，通过注册、登录和密码重置功能增强用户体验。
- 支付处理 – 使用安全的支付网关 API（如 Stripe 或 PayPal）进行交易和退款。
- 订单管理 – 使用 WooCommerce API 高效管理订单和状态。为订单历史、跟踪、退货和退款提供用户友好的功能，并使用网络钩子或事件驱动架构实现流程自动化。
在服务器上部署您的无头 WooCommerce 网站
一旦您开发了无头 WooCommerce 网站，将其部署到服务器上就变得简单易行了。以 Kinsta 为例：
此外，您还可以免费将您的 React 应用程序部署到 Kinsta 的静态网站托管服务上，您只需将代码推送到您喜欢的 Git 提供商（Bitbucket、GitHub 或 GitLab）即可。
推送代码后，请按照以下步骤部署网站：
您已经成功部署了无头 WooCommerce 应用程序！
小结
本文介绍了通过建立无头 WooCommerce 网站来创建动态和高性能在线商店的众多优势和新的可能性。
通过将前端与后台解耦，您可以自定义网站，为客户提供更具吸引力和个性化的购物体验，并从高性能、强大的安全性和可扩展性中获益。
