[Day 8] AI 幫我做模組：10 分鐘搞定 Magento Observer

2025 iThome 鐵人賽

DAY 8

Software Development

《電商修仙術：AI × Magento 開發心法》系列第 8 篇

17th鐵人賽

milton

團隊達利貓出任務

2025-09-08 21:47:59

50 瀏覽

分享至

前言：

昨天我們向大家分享了 Magento 的常見開發模式：Plugin、Preference、Observer。
雖然三者都是 Magento 用來「擴充現有功能」的方式，但它們在時機點與使用方式上截然不同。

今天，我們會先把焦點放在其中的「Observer」。

然後終於要進入我最期待的時刻啦！沒錯，就是—— AI 幫我寫模組的魔法實戰！
本篇文章將會完整帶你認識 Observer 是什麼、怎麼用，並且實戰開發一個自己的模組。
.
.

Observer 是什麼？

如果你是第一次聽到 Observer，可以這樣想：

Magento 系統裡有很多事件正在發生，就像是一場大型的活動現場。
有人加到購物車，有人下訂單，有人瀏覽商品……每一個行為都是一個「事件」。

那 Observer 呢？

Observer 就像你自己請來的一位「工作人員」，你跟他說：「嘿，只要有人下訂單，你就幫我做某件事。」

也就是說在 Magento 中，Observer（觀察者）是一種事件監聽機制，你可以把它想成：

Magento 系統裡發生了一件事（例如產品被載入、訂單被建立），而你寫的 Observer 則會「觀察」這件事，並在它發生後馬上執行你想要的程式碼。

這是一種典型的 事件驅動架構（Event-Driven Architecture），Magento 本身就內建了許多常見的事件（例如：下單後、載入產品時、加入購物車時…），你只要透過 events.xml 去註冊你想觀察的事件，當事件觸發時，就會自動呼叫你所指定的 Observer 類別。
.
.

開發角度上來說

Magento 本身就已經幫我們定義了很多「事件」，像是：

sales_order_place_after（訂單成立後）
catalog_product_load_after（產品被載入後）
checkout_cart_product_add_after（加入購物車後）
……等等

你要做的事情很簡單：

在 events.xml 裡註冊你要觀察的事件名稱
寫一個 Observer 類別去處理這件事

只要這個事件一被 Magento 系統觸發，你的程式就會自動執行。
.
.

小小註解：什麼時候適合 Observer？

通常在這幾種情況會特別適合使用 Observer：

你想在某個行為發生時執行額外動作
例：當使用者完成下單時，寫入一筆 Log、寄送通知、同步到外部系統等
你不需要改變原本方法的回傳值或流程
Observer 是被動觀察，不像 Plugin 可以攔截並改變函式行為

.
.
.
.

Observer 的技術結構

Magento 的 Observer 機制主要由兩個部分組成：

events.xml：註冊你想觀察的事件名稱（像是 catalog_product_load_after）
Observer 類別：實作 ObserverInterface，並撰寫你想在事件發生時執行的程式碼

模組基本結構

你要先建立一個 Magento 模組，基本的資料夾會長這樣：

app/code/Vendor/PromoLabel/
├── etc/
│   └── events.xml                 # 註冊你要觀察的事件
├── Observer/
│   └── YourObserverName.php # 當事件發生時執行的程式碼
├── registration.php              # 告訴 Magento 有這個模組
└── etc/module.xml                # 定義模組名稱與版本

.
.

`events.xml` 範例

我們在 etc/events.xml 中註冊想觀察的事件，像這樣：

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="catalog_product_load_after">
        <observer name="add_promo_label_to_name" instance="Vendor\PromoLabel\Observer\YourObserverName" />
    </event>
</config>

這裡我們監聽的是 catalog_product_load_after 事件，也就是「每當有產品被載入時」就會觸發這個事件。
.
.

Observer 類別範例

接著，我們撰寫 Observer/AddPromoLabelObserver.php 類別：

namespace Vendor\PromoLabel\Observer;

use Magento\Framework\Event\Observer;
use Magento\Framework\Event\ObserverInterface;

class YourObserverName implements ObserverInterface
{
    public function execute(Observer $observer)
    {
        // 當事件發生時，會執行這裡的程式碼
        // 你可以在這裡取得事件提供的資料，並執行你想做的事
    }
}

在這個例子中，我們觀察的是 catalog_product_load_after 事件，也就是：

當你進入一個產品頁時，Magento 會載入產品資料，這時候事件就會被觸發，Observer 就會出動，執行你寫在 execute() 裡的邏輯。

.
.
.
.

實戰案例：進入產品頁時，自動加上「全館優惠」

了解完 Observer 的運作機制後，接下來我們就要來實作一個簡單的範例。
這個範例的需求是：

當使用者進入產品頁時，在產品名稱後方自動加上「（全館優惠）」的字樣。

.
.

用 Claude 幫我們寫模組

今天，我們不打算「土法煉鋼」地一行一行自己刻每個檔案。

而是要試試看，請 AI（Claude）幫我們快速生成整個模組的基本架構，從 registration.php 到 Observer，通通自動生成。

這不只是為了省時間，更重要的是：

我們正在練習如何把 AI 當作一個開發助手（Co-Developer）來使用。

你會看到，我們怎麼用自然語言去描述需求、怎麼判斷 AI 給出的程式碼是否正確，並一步一步把這個功能完成。
.
.

Claude 的 Prompt 指令如下：

這裡要特別提醒：給 AI 的需求越清楚，產出的程式碼品質就越高。
模糊的敘述很容易讓 AI 發生幻覺，寫出你根本不需要的東西，甚至連事件名稱都搞錯。

這邊也可以先用Ai幫你整理好prompt，像我這邊是請 ChatGPT 整理好需求條列，再貼給 Claude Code 進行生成。

以下是我實際使用的 prompt ：

我正在開發 Magento 2.4.x，我想請你幫我建立一個完整的模組，使用 Observer 機制實現以下需求：

---

📝 需求說明：

當使用者進入產品頁時（也就是產品資料被載入的時候），在產品名稱後面加上「（全館優惠）」的字樣。

---

📦 請幫我產出這個模組所需的所有檔案（檔案名稱與內容），包含：

1. `registration.php`
2. `etc/module.xml`
3. `etc/events.xml`
4. `Observer/AddPromoLabelObserver.php`

---

📁 模組的命名如下：

- Module 名稱為：`PromoLabel`

---

📌 注意事項：

- 請使用 Magento 的 `catalog_product_load_after` 事件來觸發
- 請正確實作 `ObserverInterface` 並在 `execute()` 裡修改產品名稱
- Observer 類別請命名為 `AddPromoLabelObserver`
- 最終效果是產品名稱後面多出 `（全館優惠）`
- 請使用正確的命名空間與 class 寫法
- 請加上基礎註解，讓我知道每段程式碼的作用

---

請直接幫我輸出完整的模組檔案內容（不需說明），我會直接貼到 Magento 專案中使用。

接著就讓 Claude 開始跑囉！

這邊你可以大致瀏覽一下 Claude 回傳的內容，確認是否符合預期。