WooCommerce Cat 外掛開發 (三) - 加入購物車
前情提要：上一篇文章我們把開發環境的建立流程走過了一遍，也介紹了 ValetPress、Wpackio、Master CSS 以及 Alpine.js，接下來進入實際開發的環節。
之前我們規劃會用以下三個短碼來設計不同需求的購物流程：
[one_page_checkout]- 一頁式結帳頁[one_page_product]- 一頁式商品列表 + 商品說明頁[one_page_cart]- 一頁式購物車
因為考量到與既有網站的相容性，我先從影響層面比較小卻是最關鍵的一頁式購物車這個短碼進行開發，這個短碼會在同一頁面中顯示購物車表格、會員登入註冊、結帳資訊、付款與運送資訊等區塊，最終完成的畫面可以參考下圖：
 |
這個頁面會包含許多資料取得以及判斷的邏輯，它雖然只有一個畫面看起來很單純，但背後需要處理龐大的程式碼，所以我們先從它來下手，搞定結帳頁後剩下的就相對單純許多。第一步我們先來處理購物車表格，預計會完成的功能如下：
- 設計一個短碼名為
[one_page_cart] - 短碼內顯示購物車表格以及臨時的加入購物車按鈕
- 使用 Store API 把商品加入購物車
- 從 Store API 取得目前購物車內的商品
- 點擊完成結帳後輸出要傳送的購買資料
本篇會牽涉到許多 JavaScript 的部分，如果你對它不熟的話就先看過有印象就好，把重心放在程式碼的邏輯以及最後實現的效果即可，讓我們開始吧！
| 閱讀全文 |
WordPress 開發日常
過去我一直覺得，接收管理員通知用 Email 就夠了。如果訂單量不大，靠主機或第三方發信服務，其實也能運作得很順利。但後來與客戶訪談時發現，很多老闆根本不會用 Email，就算有，也常被廣告信和雜訊淹沒。 我自己試過很多收信軟體，試圖藉由工具來過濾重要訊息，但過不了多久，「重要信件」又變得滿天飛。雖然我會每天安排時間檢查，但有些緊急事件，例如新訂單通知，我希望能即時知道。 手機上的 App 通常只能根據「有新郵件」來推播，還找不到能針對「特定寄件者」推播的服務。因此我預設會把 App 的通知功能關掉，避免不緊急的訊息干擾我。 用 LINE 收通知也一樣，目前沒辦法只針對特定對象推播，只能全開或全關。這讓我想過是不是該換個沒那麼常用的通訊軟體來接收通知，但又懶得裝新 App，只好……自己開發一個外掛來解決了（？） 實機展示 要能在手機上接收到訂單通知，有三個關鍵技術：Web Push、Service Worker，以及 Progressive Web App，這邊先跳過他們，如果你也想在手機上收到訂單通知可以參考以下步驟： 1. 下載 DWP 網站助理...
創業的時光真是飛快得不可思議。明明才剛寫完第一個月的回顧，怎麼一下子又到了第二個月。這個月我全力投入開發新產品，原以為靠 AI 協助，兩週內就能搞定，沒想到一弄就是一整個月，還卡關連連，導致原本預定的行銷工作停滯不前。但我真的很喜歡開發產品的過程，彷彿在解謎闖關，每解開一個難題就多學一點新知，形成一種自我成長的良性循環。 工作佔比 四月份總工作時數為 65.64 小時，比三月增加了 24 小時。各類工作佔比如下： 行銷：30% 產品更新：7% 產品研發：63% 其中一個週末我整整兩天都在工作，有幾天甚至加班到晚上七點多。比較難統計的是晚上洗完澡到就寢前，還是會用平板跟 AI 討論白天卡住的問題，甚至請它幫我先寫好隔天要用的功能。若將這些時數也納入，總工時應該超過 70 小時。 我覺得比較理想的工作狀態是一個月大約 50 小時。像加班的那個週末，一直卡關讓我很煩躁，為了突破瓶頸逼自己解完才能休息，結果越急越解不開。後來乾脆休息一天，結果回來上工十分鐘就解決了。 所以還是得適時讓自己充電，給大腦一點空白，真正需要動腦時才有空間處理複雜問題。 行銷 內容行銷...
最近剛完成第一個完全由 AI 協助我開發的 WordPress 外掛，想說應該可以來整理一下這次開發的工作流程以及用到的工具，整體的心得是有 AI 實在是快超多，開發的速度跟飛的一樣，尤其是邊做邊想到新功能時，問一下複製貼上就能搞定，就像在裝外掛。 但不變的是 AI 跟我一樣會卡關，雖然每次它的解釋都好像解決了，但實際上測試就是無法，一直回饋給它後丟出新的解法，結果還是不行，這時候就要停下來自己看程式碼，然後思考是哪一行可能會出問題。 發現有可能造成問題的地方，再拿回去問 AI，這時候它就會說：「沒錯，你發現到問題的關鍵了！」我心裡想的是這應該是你要告訴我的啊 🤣，但整體而言這樣的開發節奏讓我可以很快的進入心流，不用擔心程式碼細節而是產品的方向，真的是回不去沒有 AI 協助的日子了～ 以下我從企劃、開發以及除錯階段，來說明我是如何用 AI 來設計這支外掛的。 企劃階段 這支外掛的主要功能是延續我上一個產品的概念，契機是因為 LINE Notify...