WooCommerce

在React中使用WooCommerce REST API

《WooCommerce REST API的使用方法》描述了如何通过Nodejs使用WooCommerce REST API，本文在此基础上，加入react、bootstrap form，做一个简单展示订单信息的react app。

安装新的依赖包

文件夹结构及配置过程请参考上一篇文章，在此基础上，打开命令行并运行如下命令

npm i react react-dom bootstrap react-bootstrap moment

react和react-dom是构建react app的核心包，bootstrap和react-bootstrap用来搭建UI，moment用来处理日期格式。

在src目录下新建一个style.css文件，并引入bootstrap样式，内容如下：

@import "bootstrap/dist/css/bootstrap.min.css";

更新index.html文件

在index.html里要引入style.css，并添加用来挂载react app的dom元素，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

更新index.js文件

index.js文件不再是简单的调用woocommerce api，而要用react的方式来写，内容如下：

import React from 'react';
import { createRoot } from 'react-dom/client';
import { Table } from "react-bootstrap";
import { useEffect, useState } from "react";
import WooCommerceRestApi from "@woocommerce/woocommerce-rest-api";
import moment from "moment";

const api = new WooCommerceRestApi({
  url: "https://testwc.local",
  consumerKey: "ck_8df9067595bb0e5cd6d12aeb844f99b5ff3c8d7e",
  consumerSecret: "cs_a46bf0f4571c6683f956af96348a8eff17175b86",
  version: "wc/v3",
});

function App() {
  const [orders, setOrders] = useState([]);

  useEffect(() => {
    fetchOrders();
  }, []);

  let fetchOrders = () => {
    api
      .get("orders", {
        per_page: 20,
      })
      .then((response) => {
        if (response.status === 200) {
          setOrders(response.data);
        }
      })
      .catch((error) => {});
  };

  return (
    <div className="App">
      <Table striped bordered hover>
        <thead>
          <tr>
            <th>#</th>
            <th>Date</th>
            <th>Amount</th>
            <th>Name</th>
            <th>Email</th>
            <th>Address</th>
          </tr>
        </thead>
        <tbody>
          {orders.map((order, index) => {
            return (
              <tr key={index}>
                <td>{order.id}</td>
                <td>{moment(order.date).format("YYYY-MM-DD")}</td>
                <td>{order.total}</td>
                <td>{order.billing && order.billing.first_name}</td>
                <td>{order.billing && order.billing.email}</td>
                <td>{order.billing && order.billing.address_1}</td>
              </tr>
            );
          })}
        </tbody>
      </Table>
    </div>
  );
}

const domNode = document.getElementById('root');
const root = createRoot(domNode);
root.render(<App />);

更新esbuild的编译指令

新加入的style.css也要一起编译，另外编译index.js需要jsx的支持,所以将package.json中的bundle命令更新成:

"bundle": "esbuild --bundle --loader:.js=jsx --sourcemap src/index.js src/style.css --outdir=build"

最终效果

在命令行里运行npm run build编译文件，在build目录下生成最终文件，并在此目录下启动python web server，使用命令py -m http.server。最终效果如下图所示：