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。
- 单击保存 webhook。
- 访问商店并下订单。应该会看到一封如下所示的电子邮件:
总结
创建了一个高级报告应用程序,可更新剩余库存水平并提供全面的销售总额报告。它还提供详细的交易提醒,让你实时了解具体交易,包括产品详情、数量和客户信息,从而主动管理库存,了解销售趋势和收入模式。
联系我们 |
---|
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点! |
① 电话:020-2206-9892 |
② QQ咨询:1025174874 |
③ 邮件:info@361sale.com |
④ 工作时间:周一至周五,9:30-18:30,节假日休息 |
暂无评论内容