為WooCommerce商店建立統計報告應用

WordPress 的 WooCommerce 外掛可讓您高效地建立和管理電子商務平臺，並提供內建通知功能，提醒您新訂單或已完成訂單、庫存量不足以及付款成功等資訊。這些功能非常重要，但對 WooCommerce 收集到的寶貴資料的深入瞭解卻非常有限。

這些限制是在 WordPress 環境中執行的傳統外掛的特性。另一方面，託管應用程式（基於外部伺服器的網路操作）的可擴充套件性要強得多。

通過與 WooCommerce API 整合並使用外部資源，託管應用程式可以提供高階報告、自定義警報以及對電子商務交易的詳細瞭解。

在本指南中，您將瞭解如何為WooCommerce商店建立一個應用程式，利用全面的交易資料生成電子郵件警報，從而超越標準外掛的功能。

現有報告和通知功能

WooCommerce 的內建警報和狀態更新有助於進行基本的店鋪管理，但可能無法滿足所有業務需求。因此，許多使用者轉而使用第三方外掛來增強他們的通知和報告功能。

其中最受歡迎的外掛包括：

• WooCommerce Admin – 提供一個直觀的儀表板，包含關鍵的商店指標和報告。
• WooCommerce PDF Invoices and Packing Slips – 可自定義發票和裝箱單模板，通過電子郵件自動傳送給客戶，並提供已生成發票和裝箱單的記錄。
• WooCommerce Google Analytics Integration（WooCommerce 谷歌分析整合）- 使用谷歌分析工具生成有關客戶人口統計和流量來源的詳細報告。

通過這些外掛，WooCommerce 可提供報告和警報選項，包括訂單摘要、低庫存警報、庫存管理，以及通過與 Google Analytics 等工具的整合進行深入分析。

當前報告系統的侷限性

當前的報告系統雖然有益，但功能有限，並存在一些侷限性，例如：

• 定製：通用的報告工具和外掛限制了貴公司從資料中獲得深入而具體的見解。您可能需要專門的指標、獨特的視覺化、與專有分析工具的整合或某些通用報告工具和外掛無法提供的資料過濾器。
• 可擴充套件性：現有的報告系統在處理大型資料集時可能會面臨可擴充套件性問題。緩慢的效能和資料處理瓶頸會阻礙高效的資料分析，導致決策和響應時間的延遲。
• 依賴 WordPress：由於與 WordPress 的整合限制了獨立性、自定義和可擴充套件性，您可能會面臨與伺服器資源、外掛相容性和安全漏洞相關的限制。這種整合還可能阻礙企業採用更先進的技術和解決方案。

相比之下，定製的報告應用程式可以提供詳細的交易和客戶資訊。您可以利用這些資料預測市場趨勢，並相應地優化您的產品。

此外，您還可以快速擴充套件定製報告應用程式，以適應不斷增長的資料量，確保隨著業務增長實現無縫運營。

高階報告應用程式

本指南中設想的高階報告應用程式具有以下功能：

• 當客戶下新訂單時，會通過電子郵件向店主傳送詳細的交易提醒。該應用程式還有一個儀表板，顯示所有訂單及其詳細資訊。
• 庫存更新會在儀表板上顯示商店庫存詳情。在這裡，您可以輕鬆跟蹤每種產品的庫存水平。
• 總銷售額報告可讓您分析一段時間內的收入趨勢。

與通用外掛或預設的 WooCommerce 通知和警報系統不同，該應用程式提供有關剩餘庫存和總銷售額的詳細和可定製的警報。

託管該應用程式還具有以下優勢：

• 可擴充套件性：獨立託管可最大限度地減少資料處理瓶頸，確保您能在不受資源限制的情況下擴充套件業務。
• 定製化：獨立託管使您可以定製如何使用收集的資料，例如通過整合第三方服務（如預測分析引擎）和實施獨特的資料視覺化技術，以更好地滿足貴公司的要求和目標。
• 自主性：將您的應用程式從 WordPress 環境中移除，可讓您擺脫伺服器資源有限和各種外掛之間潛在衝突等限制。

如何開發高階報告應用程式

在本節中，讓我們使用 Node.js 與 WooCommerce REST API 和 webhooks 一起構建一個報告應用程式，以檢索商店資料。

要求：

• 本地執行的 WooCommerce 商店，並設定了一個或多個產品。
• 用於傳送電子郵件的免費 Mailgun 賬戶。
• 已安裝 Node.js 和 ngrok。
• 專案的啟動模板。
• 程式碼編輯器。

配置啟動模板

按照以下步驟配置啟動模板：

1. 記下你的 Mailgun API 金鑰和沙盒域，並將它們的值與相應的變數一起貼上到 .env 檔案中。對於 MAILGUN_SENDER_EMAIL 變數，請提供用於建立 Mailgun 賬戶的電子郵件作為值。

2. 在 WordPress 管理儀表板上，選擇 WooCommerce > Settings > Advanced > REST API。

WooCommerce 高階選項卡顯示 REST API 部分。

3. 單擊 Add key 建立 API 金鑰，以驗證來自應用程式的請求。

4. 開啟 Key details 部分並提供描述和使用者，選擇 Read/Write 許可權，然後點選生成 API 金鑰。

顯示 API 金鑰詳細資訊的 WooCommerce 高階選項卡。

5. 確保從生成的頁面中複製 Consumer key 和 Consumer secret，因為您無法再次看到它們。

6. 開啟 .env 檔案，將上一步中複製的值分配到各自的變數中。為 WOOCOMMERCE_STORE_URL 變數提供商店的 URL（類似 http://localhost/mystore/index.php ）。

7. 在終端執行以下命令，安裝所有專案依賴項：

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: 檢測到檔案更改時自動重啟伺服器。

實現應用程式功能

啟動模板包含 views 資料夾中嵌入式 JavaScript (EJS) 模板的程式碼。這樣，您就可以專注於伺服器邏輯，即從 WooCommerce API 獲取必要的資料，並將其傳遞給 EJS 模板以顯示在使用者介面（UI）上。

要實現應用程式的功能，請按照以下步驟操作：

1. 在專案根資料夾中建立名為 server.js 的檔案。該檔案是 Express 伺服器的入口。

2. 在 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 建立網路伺服器。首先，你需要匯入所需的軟體包，配置 WooCommerce 客戶端以與 WooCommerce REST API 互動，並將應用程式設定為使用 EJS 模板。

首先，定義一個 / 端點，用於檢查應用程式是否正常執行。然後，定義一個 /products 路由，用於檢索 WooCommerce 商店中的所有產品。
如果成功，該路徑就會使用獲取的資料渲染 inventory 模板。

請注意，程式碼還為所有路由的模板傳遞了 currentPage，這有助於識別儀表板上的活動頁面。

3. 執行 npm run dev 命令並在瀏覽器上開啟 http://localhost:3000/products 檢視結果：

包含商品詳細資訊的商店庫存頁面。

商店庫存頁面顯示商店中的所有產品及其詳細資訊。這些資訊可幫助您跟蹤可用產品並進行相應的庫存管理。

4. 要處理銷售報告，請在 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 模板。

5. 在瀏覽器中導航至 http://localhost:3000/sales 檢視結果：

每月銷售報告頁面。

該頁面顯示全面的銷售總額報告，幫助您分析企業的月度收入趨勢。

實施訂單管理

1. 在 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 商店中的所有訂單，並使用獲取的資料渲染訂單模板。

2. 在瀏覽器中導航至 http://localhost:3000/orders 檢視結果。該頁面顯示訂單管理資訊：

訂單頁面顯示交易詳情。

自定義警報以提供全面的交易報告

要實現當客戶在網站上訂購時向您傳送定製電子郵件提醒的功能，請按照以下步驟操作：

1. 開啟一個終端視窗，執行 ngrok http 3000，對網路伺服器連線進行隧道連線。該命令會生成一個 HTTPS 連結，WooCommerce 可以用它來傳送 webhook 資料。複製生成的轉發連結。

2. 在 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，表示成功收到網路鉤子和相應的訊息（”成功收到網路鉤子”）。

3. 新增以下語句匯入 newOrderEmail() 函式：

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

4. 執行 npm run start 命令啟動伺服器。

5. 在 WordPress 管理儀表板上，選擇WooCommerce > Settings > Advanced > Webhooks。

高階頁面顯示 Webhooks 部分。

6. 單擊 Add webhook，並在 Webhook data 表中提供以下資訊：

• Name: New Order Alert
• Status: Active
• Topic: Order Created
• Delivery URL: 貼上在步驟 1 中複製的 ngrok 轉發 URL。確保在 URL 中新增 /woocommerce-webhook/new-order 。這是新定義的接收 webhook 有效負載的端點。
• Secret: 留空。預設為當前 API 使用者的消費者祕密。該祕密會在請求頭中生成已交付網路鉤子的雜湊值。接收方可使用該祕密驗證傳入資料的真實性。如果簽名與預期值相符，就能確認資料是由 WooCommerce 傳送的，從而提供信任和安全性。
• API Version: WP REST API Integration v3.

高階頁面顯示 Webhook 資料表格。

7. 單擊 Save webhook.

8. 訪問您的商店並下訂單。您應該會看到如下所示的電子郵件：

新訂單和庫存資訊的電子郵件提醒。

小結

藉助外部託管的靈活性，您建立了一個高階報告應用程式，可以更新剩餘庫存水平並提供全面的銷售總額報告。

它還提供詳細的交易警報，讓您實時瞭解具體交易，包括產品詳情、數量和客戶資訊，從而可以積極主動地管理庫存，瞭解銷售趨勢和收入模式。