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

# 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

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 商店的产品列表。

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;

// 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")
);

通过这些修改，点击应用程序中的任何产品都会将用户重定向到一个页面，显示该特定产品的详细信息。服装产品的详细信息：