在開發基於 WordPress 的 WooCommerce 網站時，了解訂單資料結構對於客製化功能非常重要。當訂單狀態或詳細資料更新時，能夠即時記錄這些資料有助於除錯與後續分析。本文針對 WooCommerce 訂單更新事件，說明如何使用 PHP 透過鉤子（hook）將訂單資料以 JSON 格式記錄到檔案中。

需求情境

1. 監聽 WooCommerce 訂單更新事件。
2. 獲取訂單的完整詳細資料。
3. 將資料儲存為 JSON 格式，方便後續分析或除錯。

解決方案

利用 WooCommerce 提供的 woocommerce_order_status_changed 鉤子，在訂單狀態變更時觸發自訂函數，取得訂單資料並寫入檔案。

add_action('woocommerce_order_status_changed', 'log_order_data', 10, 4);

function log_order_data($order_id, $old_status, $new_status, $order) {
    $data = [
        'order_id' => $order_id,
        'old_status' => $old_status,
        'new_status' => $new_status,
        'order_data' => $order->get_data() // 獲取訂單詳細資料
    ];

    write_to_log_file($data, 'order_update_log.json');
}

function write_to_log_file($data, $filename = 'meta_data.json') {
    $log_dir = __DIR__ . '/logs'; // 指定記錄檔存放目錄
    if (!file_exists($log_dir)) {
        mkdir($log_dir, 0755, true); // 如果目錄不存在，創建目錄
    }
    $log_file = $log_dir . '/' . $filename;

    // 將資料轉換為 JSON 格式
    $json_data = json_encode($data, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);

    // 將 JSON 資料寫入文件（直接覆寫內容）
    file_put_contents($log_file, $json_data);
}

程式碼解說

1. 監聽訂單狀態更新事件 使用 WooCommerce 的 woocommerce_order_status_changed 鉤子，當訂單狀態變更時觸發 log_order_data 函數。

   add_action('woocommerce_order_status_changed', 'log_order_data', 10, 4);

2. 獲取訂單詳細資料 透過 WC_Order 物件的 get_data() 方法取得完整訂單資料，包含客戶資訊、商品清單、付款方式等。

   'order_data' => $order->get_data()

3. 記錄資料至 JSON 檔案 將資料轉換為 JSON 格式，並寫入指定的 logs 目錄下的檔案中，若目錄不存在則自動建立。

   write_to_log_file($data, 'order_update_log.json');

範例輸出

假設訂單狀態從 processing 更新為 completed，記錄的 JSON 資料範例如下：

{
  "order_id": 1234,
  "old_status": "processing",
  "new_status": "completed",
  "order_data": {
    "id": 1234,
    "status": "completed",
    "currency": "USD",
    "total": "99.99",
    "customer_id": 5678,
    "billing": {
      "first_name": "John",
      "last_name": "Doe",
      "email": "john.doe@example.com"
    },
    "line_items": [
      {
        "name": "T-Shirt",
        "quantity": 2,
        "total": "49.99"
      }
    ]
  }
}

適用場景

• 除錯需求：快速了解 WooCommerce 訂單資料結構，協助定位問題。
• 數據分析：將記錄的 JSON 資料用於訂單數據分析。
• 客製化功能開發：根據訂單詳細資料設計特定邏輯。

完整程式碼

add_action('woocommerce_order_status_changed', 'log_order_data', 10, 4);

function log_order_data($order_id, $old_status, $new_status, $order) {
    $data = [
        'order_id' => $order_id,
        'old_status' => $old_status,
        'new_status' => $new_status,
        'order_data' => $order->get_data() // 獲取訂單詳細資料
    ];

    write_to_log_file($data, 'order_update_log.json');
}

function write_to_log_file($data, $filename = 'meta_data.json') {
    $log_dir = __DIR__ . '/logs'; // 指定記錄檔存放目錄
    if (!file_exists($log_dir)) {
        mkdir($log_dir, 0755, true); // 如果目錄不存在，創建目錄
    }
    $log_file = $log_dir . '/' . $filename;

    // 將資料轉換為 JSON 格式
    $json_data = json_encode($data, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);

    // 將 JSON 資料寫入文件（直接覆寫內容）
    file_put_contents($log_file, $json_data);
}

在前端開發中，常遇到表單欄位眾多，但後端資料庫只設計一個欄位存放所有資料的情況。這時候如何有效整理並傳送這些資料成為一個重要課題。本文適合有基礎程式能力的工程師或自學者，說明如何利用 JavaScript 將多個表單欄位資料組合成字串或 JSON 格式，並存入隱藏欄位，方便後端存取。

將表單欄位值組合成字串的做法

1. 隱藏欄位設定：先在表單中加入一個隱藏欄位，用來存放組合後的字串。

2. 取值並組合：使用 JavaScript 取得各個欄位的值，存成變數後，依需求拼接成想要的字串格式。

3. 寫入隱藏欄位：利用 jQuery 的 .val() 方法，將組合好的字串寫入隱藏欄位。

var val1 = $('#field1').val();
var val2 = $('#field2').val();
var result = val1 + '-' + val2; // 自訂組合格式
$('#hiddenField').val(result);

這樣送出表單時，隱藏欄位就會帶著組合好的字串，後端可直接存取。

使用 JSON.stringify 將表單資料轉成 JSON 格式

1. 隱藏欄位設定：同樣先準備一個隱藏欄位。

2. 建立物件與陣列：宣告一個空陣列 jsonObj，再建立一個物件 item，將各欄位值存入物件屬性。

3. 推入陣列並序列化：使用 jsonObj.push(item) 將物件放入陣列，接著用 JSON.stringify(jsonObj) 將陣列轉成 JSON 字串。

4. 寫入隱藏欄位：同樣用 jQuery .val() 將 JSON 字串寫入隱藏欄位。

var jsonObj = [];
var item = {};
item.name = $('#name').val();
item.email = $('#email').val();
jsonObj.push(item);
$('#hiddenField').val(JSON.stringify(jsonObj));

這樣後端收到的欄位即為 JSON 格式字串，方便後續解析與呈現。

實際應用與延伸

• 資料庫設計彈性：將多欄位資料存成 JSON，資料庫欄位設計更簡潔，且方便擴充。
• 前端動態欄位：動態新增欄位時，只需更新物件結構，序列化流程不變。
• 後端解析：後端可直接解析 JSON 字串，減少欄位對應錯誤。

常見坑點

• 忘記將隱藏欄位設為 name 屬性，導致資料無法送出。
• JSON 格式錯誤，導致後端解析失敗。
• 未同步更新隱藏欄位值，送出資料不完整。

完整程式碼

// 假設有兩個輸入欄位與一個隱藏欄位
$(document).ready(function() {
  $('#submitBtn').click(function(e) {
    e.preventDefault();
    var jsonObj = [];
    var item = {};
    item.name = $('#nameInput').val();
    item.email = $('#emailInput').val();
    jsonObj.push(item);
    $('#hiddenField').val(JSON.stringify(jsonObj));
    // 這裡可繼續送出表單或其他處理
    console.log($('#hiddenField').val());
  });
});