给 WooCommerce 商店创建高级报告应用程序-光子波动网 | 专业WordPress修复服务，全球范围，快速响应

WordPress 的 WooCommerce 插件可以高效地创建和管理电子商务平台，并提供内置通知功能，提醒你新订单或已完成订单、库存量不足以及付款成功等信息。这些功能非常重要，但对 WooCommerce 收集到的宝贵数据的深入了解却非常有限。

这些限制是在 WordPress 环境中运行的传统插件的特性。通过与 WooCommerce API 集成并使用外部资源，托管应用程序可以提供高级报告、定制警报以及对电子商务交易的详细了解。

现有的报告和通知功能

WooCommerce 的内置警报和状态更新有助于进行基本的店铺管理，但可能无法满足所有业务需求。因此，许多用户转而使用第三方插件来增强通知和报告功能。

其中最受欢迎的插件包括：

WooCommerce Admin — 提供一个直观的仪表板，其中包含关键的商店指标和报告。
WooCommerce PDF Invoices and Packing Slips — 可自定义发票和装箱单模板，通过电子邮件自动发送给客户，并提供已生成发票和装箱单的记录。
WooCommerce Google Analytics Integration — 使用 Google Analytics 工具生成有关客户人口统计和流量来源的详细报告。

借助这些插件，WooCommerce 可提供报告和警报选项，包括订单摘要、低库存警报、库存管理，以及通过与 Google Analytics 等工具的集成进行深入分析。

当前报告系统的局限性

当前的报告系统虽然有益，但功能有限，并引入了一些限制：

定制：通用报告工具和插件限制了从数据中获得深入而具体的见解。需要专门的指标、独特的可视化、与专有分析工具的集成，或某些通用报告工具和插件无法提供的数据过滤器。
可扩展性： 现有的报告系统在处理大型数据集时可能会面临可扩展性问题。缓慢的性能和数据处理瓶颈会阻碍高效的数据分析，导致决策和响应时间的延迟。
对 WordPress 的依赖：由于与 WordPress 的集成限制了独立性、自定义和可扩展性，可能会面临与服务器资源、插件兼容性和安全漏洞相关的限制。这种集成还可能阻碍企业采用更先进的技术和解决方案。

高级报告应用程序

本指南中设想的高级报告应用程序具有以下功能：

当客户下新订单时，会通过电子邮件向店主发送详细的交易提醒。该应用程序还有一个仪表板，显示所有订单及其详细信息。
库存更新会在仪表盘上显示商店库存详情。在这里，可以轻松跟踪每种产品的库存水平。
总销售额报告可让分析一段时间内的收入趋势。

与通用插件或默认的 WooCommerce 通知和警报系统不同，该应用程序提供有关剩余库存和总销售额的详细和可定制的警报。

如何开发高级报告应用程序

在本节中，让我们使用 Node.js 以及WooCommerce REST API 和Webhook一起构建一个报告应用程序，以检索商店数据。

要求：

本地运行的 WooCommerce 商店，包含一组或多组产品。
用于发送电子邮件的免费Mailgun 帐户。
安装了Node.js 和ngrok 。
项目的入门模板。
代码编辑器。

配置入门模板

按照下面步骤配置入门模板：

记下你的 Mailgun API 密钥和沙箱域，并将它们的值与相应的变量一起粘贴到.env文件中。对于MAILGUN_SENDER_EMAIL变量，提供用于创建 Mailgun 帐户的电子邮件作为值。
在 WordPress 管理仪表板上，选择WooCommerce >设置 >高级 > REST API。

单击添加密钥 创建 API 密钥以对来自应用程序的请求进行身份验证。
打开密钥详细信息 部分并提供说明和用户，选择读/写 权限，然后单击生成 API 密钥。

确保从结果页面复制消费者密钥 和消费者密钥，因为无法再次看到它们。
打开.env 文件并将在上一步中复制的值分配给各自的变量。提供变量的商店 URL WOOCOMMERCE_STORE_URL （类似于http://localhost/mystore/index.php）。
通过在终端中执行以下命令来安装所有项目依赖项：

npm i express @woocommerce/woocommerce-rest-api dotenv ejs mailgun.js

npm i -D nodemon

这些依赖关系的作用如下：

express：用于创建 API 的 Node.js 框架。
@woocommerce/woocommerce-rest-api：对WooCommerce REST API进行网络调用。
dotenv：从.env文件加载环境变量。
ejs：创建 JavaScript 模板。
mailgun.js：使用 Mailgun 发送电子邮件。
nodemon：检测到文件更改时自动重新启动服务器。

实现应用功能

起始模板包含用于呈现视图文件夹中的嵌入式 JavaScript (EJS) 模板的代码。这样，可以专注于服务器逻辑，该逻辑从 WooCommerce API 获取必要的数据并将其传递到 EJS 模板以显示在用户界面 (UI) 上。

要实现应用程序的功能，请执行以下步骤：

在项目的根文件夹中创建一个名为server.js 的文件。该文件充当 Express 服务器的入口点。
server.js 文件中粘贴以下代码：

const express = require('express')
const WooCommerceRestApi = require("@woocommerce/woocommerce-rest-api").default;
require('dotenv').config();

const app = express()
const port = 3000

const WooCommerce = new WooCommerceRestApi({
 url: process.env.WOOCOMMERCE_STORE_URL,
 consumerKey: process.env.WOOCOMMERCE_CONSUMER_KEY,
 consumerSecret: process.env.WOOCOMMERCE_SECRET_KEY,
 version: "wc/v3"
});

app.set('view engine', 'ejs')

// endpoint to check if the application is up and running
app.get('/', (req, res) => {
   res.send('The application is up and running!')
})

// retrieve all products in the store
app.get('/products', (req, res) => {
   WooCommerce.get("products")
       .then((response) => {
           res.render('pages/inventory', {
               products: response.data,
               currentPage: req.originalUrl
           });
       })
       .catch((error) => {
           console.log(error.response.data);
       });
})

app.listen(port, () => {
 console.log(`App listening on port ${port}`)
})

上面的代码使用 Express.js 创建一个 Web 服务器。首先需要导入所需的软件包，配置 WooCommerce 客户端以与WooCommerce REST API交互，并将应用程序设置为使用 EJS 模板。

首先，定义一个/ 端点，用于检查应用程序是否正常运行。然后，定义一个/products 从 WooCommerce 商店检索所有产品的路由。如果成功，此路由将inventory 使用获取的数据呈现模板。

注意，代码还将currentPage所有路由的模板传递给模板，这有助于识别仪表盘上的活动页面。

运行命令npm run dev 并http://localhost:3000/products 在浏览器中打开查看结果：

商店库存页面显示商店中的所有产品及其详细信息。这些信息可帮助跟踪可用产品并进行相应的库存管理。

要处理销售报告，请在 server.js 文件中添加以下路由：

// retrieve monthly sales report
app.get('/sales', (req, res) => {
   WooCommerce.get("reports/sales", {
       		period: "month"
   })
       .then((response) => {
           res.render('pages/sales', {
               sales: response.data,
               currentPage: req.originalUrl
           })
       })
       .catch((error) => {
         console.log(error.response.data);
       });
})

此代码定义一个/sales 端点，用于从 WooCommerce 销售报告 API 检索每月销售报告。 API 调用包含period 值为的参数month，该参数指定当月的销售报告。请求成功后，代码会使用获取的数据渲染销售 EJS 模板。

在浏览器中导航至http://localhost:3000/sales 查看结果：

本页显示全面的销售总额报告，帮助分析每月收入趋势。

实施订单管理

将以下路由添加到server.js 文件中。

// retrieve all orders
app.get('/orders', (req, res) => {
   WooCommerce.get("orders")
       .then((response) => {
           res.render('pages/orders', {
               orders: response.data,
               currentPage: req.originalUrl
           })
       })
       .catch((error) => {
           console.log(error.response.data);
       });
})

这段代码将检索 WooCommerce 商店中的所有订单，并使用获取的数据渲染订单模板。

在浏览器中导航至http://localhost:3000/orders 查看结果。此页面显示订单管理信息：

自定义综合交易报告的警报

要实现当客户在网站上订购时向你发送定制电子邮件提醒的功能，按照下面步骤操作：

打开终端窗口并运行ngrok http 3000 以建立 Web 服务器连接的隧道。该命令生成一个 HTTPS 链接，WooCommerce 可使用该链接发送 webhook 数据。复制生成的转发链接。
在 server.js 文件中添加以下路由：

app.post('/woocommerce-webhook/new-order', (req, res) => {
   const data = req.body; // Received data from the WooCommerce webhook
   console.log('New order:', data);

   if(data?.id){
       mg.messages.create(process.env.MAILGUN_SANDBOX_DOMAIN, {
           from: `WooCommerce Store <${process.env.MAILGUN_SENDER_EMAIL}> `,
           to: [process.env.MAILGUN_SENDER_EMAIL],
           subject: "New Order Created",
           html: newOrderEmail(data.order_key, `${data.billing.first_name} ${data.billing.last_name}`, data.billing.email, data.total, data.status, data.payment_method_title, data.line_items)
       })
       .then(msg => console.log(msg)) // logs response data
       .catch(err => console.log(err)); // logs any error
   }

   res.status(200).send('Webhook received successfully'); // Send a response to WooCommerce
});

这段代码定义了一个路由，用于处理客户创建新订单时触发的 WooCommerce 网络钩子传入的数据。如果接收到的数据包含 id 属性（表示订单有效），它就会使用 Mailgun API 向指定的电子邮件地址发送电子邮件通知。

电子邮件包括各种订单详细信息，如客户姓名、电子邮件、总金额、状态、付款方式和已购商品列表。

代码使用 utils/new-order-email.js 文件中定义的 newOrderEMail() 函数编写电子邮件，该函数会返回一个自定义电子邮件模板。处理数据并发送电子邮件后，服务器会响应状态代码 200，表示成功收到网络钩子和相应的消息（”成功收到网络钩子”）。

添加以下语句来导入newOrderEmail() 函数：

const { newOrderEmail } = require('./utils/new-order-email');

运行命令npm run start 来启动服务器。
在 WordPress 管理仪表板上，选择WooCommerce >设置 >高级 > Webhooks。

单击添加 Webhook并在Webhook 数据表单中提供以下信息：

名称: 新订单提醒
状态：活跃
主题：订单已创建
传送 URL：粘贴您在步骤 1 中复制的 ngrok 转发 URL。确保附加/woocommerce-webhook/new-order 到 URL。这是新定义的用于接收 Webhook 负载的端点。

秘密（Secret）：留空。默认为当前 API 用户的消费者秘密。该秘密会在请求头中生成已交付网络钩子的哈希值。接收方可使用该秘密验证传入数据的真实性。如果签名与预期值相符，就能确认数据是由 WooCommerce 发送的，从而提供信任和安全性。
API 版本：WP REST API 集成 v3。