hook – 小豬日常

Blocksy 主題 WooCommerce 產品頁新增下載與預覽彈窗實作筆記

小豬 — Thu, 13 Feb 2025 17:14:35 +0000

前言

在 WooCommerce 產品頁面中，若產品包含可下載或預覽的檔案，提供使用者直覺的預覽與下載介面能提升購買體驗。本文適合熟悉 WordPress 主題開發與 WooCommerce 的工程師或自學者，說明如何利用 Blocksy 主題的特定 Hook，在產品頁購物車按鈕下方新增一個彈窗，顯示預覽與下載連結。

新增功能程式碼

透過 blocksy:woocommerce:product-single:add_to_cart:after Action Hook，將彈窗 HTML 結構插入產品頁。以下為關鍵程式碼片段：

add_action('blocksy:woocommerce:product-single:add_to_cart:after', function() {
  global $post;
  echo '';
  echo '';
  echo '';
  echo '';
  echo '×';

  // 預覽連結
  $preview_links = get_post_meta($post->ID, '_preview_links', true);
  if (!empty($preview_links)) {
    echo '';
    foreach ($preview_links as $link) {
      echo '
';
      echo '
';
      echo '
';
      echo '
';
      echo '';
    }
    echo '' . esc_html($link['name']) . ' ' . esc_html($link['date']) . ' Preview';
  } else {
    echo '
No preview files available.';
  }

  // 下載連結（限已購買且登入用戶）
  if (is_user_logged_in() && wc_customer_bought_product('', get_current_user_id(), $post->ID)) {
    echo '
Download file';
    $download_links = get_post_meta($post->ID, '_download_links', true);
    if (!empty($download_links)) {
      echo '';
      foreach ($download_links as $index => $link) {
        echo '
';
        echo '
';
        echo '
';
        echo '
';
        echo '';
      }
      echo '' . esc_html($link['name']) . ' ' . esc_html($link['date']) . ' ';
        echo "";
        echo '';
    } else {
      echo '
No download links available.';
    }
  }

  echo '';
});

此段程式碼會在產品頁購物車按鈕下方插入一個按鈕，點擊後彈出包含預覽與下載連結的彈窗。下載連結僅對已購買且登入的用戶顯示。

新增前端樣式與行為

為了讓彈窗視覺與互動更友善，需要加入 CSS 與 JavaScript。

CSS – 彈窗樣式

.ks_modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.ks_modal-content {
  background-color: #fff;
  padding: 20px;
  margin: 15% auto;
  width: 50%;
  border-radius: 10px;
}

.ks_close {
  float: right;
  font-size: 24px;
  cursor: pointer;
}

JavaScript – 彈窗開關控制

jQuery(document).ready(function($) {
  $('#ks_show_links_modal').on('click', function() {
    $('#ks_links_modal').fadeIn();
  });

  $('.ks_close').on('click', function() {
    $('#ks_links_modal').fadeOut();
  });
});

這段 JS 透過 jQuery 綁定按鈕事件，控制彈窗的顯示與隱藏。

測試與調整

確認產品頁購物車按鈕下方是否出現「Datasheet >」按鈕。
點擊按鈕，檢查彈窗是否正常顯示預覽連結。
測試下載連結顯示條件：
- 未登入或未購買用戶不應看到下載連結。
- 已購買且登入用戶可看到並使用下載按鈕。

完整程式碼

// 在 WooCommerce 產品頁購物車按鈕區塊的下方新增彈窗顯示下載和預覽連結
add_action('blocksy:woocommerce:product-single:add_to_cart:after', function() {
  global $post;
  echo '';
  echo '';
  echo '';
  echo '';
  echo '×';

  // 顯示預覽連結
  echo '
Preview file';
  $preview_links = get_post_meta($post->ID, '_preview_links', true);
  if (!empty($preview_links)) {
    echo '';
    foreach ($preview_links as $link) {
      echo '
';
      echo '
';
      echo '
';
      echo '
';
      echo '';
    }
    echo '' . esc_html($link['name']) . ' ' . esc_html($link['date']) . ' Preview';
  } else {
    echo '
No preview files available.';
  }

  // 顯示下載連結（僅限已購買並登入的用戶）
  if (is_user_logged_in() && wc_customer_bought_product('', get_current_user_id(), $post->ID)) {
    echo '
Download file';
    $download_links = get_post_meta($post->ID, '_download_links', true);
    if (!empty($download_links)) {
      echo '';
      foreach ($download_links as $index => $link) {
        echo '
';
        echo '
';
        echo '
';
        echo '
';
        echo '';
      }
      echo '' . esc_html($link['name']) . ' ' . esc_html($link['date']) . ' ';
        echo "";
        echo '';
    } else {
      echo '
No download links available.';
    }
  }

  echo '';
});

/* 彈窗樣式 */
.ks_modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.ks_modal-content {
  background-color: #fff;
  padding: 20px;
  margin: 15% auto;
  width: 50%;
  border-radius: 10px;
}

.ks_close {
  float: right;
  font-size: 24px;
  cursor: pointer;
}

// 控制彈窗開關
jQuery(document).ready(function($) {
  $('#ks_show_links_modal').on('click', function() {
    $('#ks_links_modal').fadeIn();
  });

  $('.ks_close').on('click', function() {
    $('#ks_links_modal').fadeOut();
  });
});

結論

透過 Blocksy 主題提供的 Hook，結合 WooCommerce 產品頁面，我們能輕鬆新增一個彈窗介面，提供使用者預覽與下載檔案的功能，提升產品資訊的呈現與使用者體驗，特別適合販售技術文件或數位內容的商店。

使用 PHP 記錄 WooCommerce 訂單更新資料結構技術筆記

小豬 — Thu, 09 Jan 2025 12:49:56 +0000

前言

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

需求情境

監聽 WooCommerce 訂單更新事件。
獲取訂單的完整詳細資料。
將資料儲存為 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);
}

程式碼解說

監聽訂單狀態更新事件 使用 WooCommerce 的 woocommerce_order_status_changed 鉤子，當訂單狀態變更時觸發 log_order_data 函數。
```
add_action('woocommerce_order_status_changed', 'log_order_data', 10, 4);
```
獲取訂單詳細資料 透過 WC_Order 物件的 get_data() 方法取得完整訂單資料，包含客戶資訊、商品清單、付款方式等。
```
'order_data' => $order->get_data()
```
記錄資料至 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);
}