🔧 阿川の電商水電行

Shopify 顧問、維護與客製化

💡

小任務 / 單次支援方案

單次處理 Shopify 修正／微調

⭐️

維護方案

每月 Shopify 技術支援 + 小修改 + 諮詢

🚀

專案建置

Shopify 功能導入、培訓 + 分階段交付

👉 瞭解詳情 / 免費諮詢

站長阿川 · 10月22日

Ymq Product Options & Variants 這種 app 的背後技術原理是什麼呀？

我試用一下覺得這個 app 真的很強大

https://apps.shopify.com/ymq-options

可以增加很多變體之外不同選項還可以有額外價格

注意看畫面上的 tooltip 文字 -> 所謂的 add-on price 還可以針對不同市場、設定不同數字

這實在是很神這到底怎麼做到的？

首先 shopify 原生變體系統 vs 這種 app 提供的變體系統

核心差異可以看 app 廠商的這份文件

https://ymq-app.gitbook.io/ymq-product-options-app/getting-started/difference-between-shopify-options-and-virtual-options

主要 ux 差異是：原生變體才能有原生庫存管理、點擊變體切圖片

第一個知識點

size 跟 color 是我用 app 創的 virtual option

內容會真的出現在購物車

以及結帳頁面

這邊是使用 shopify 官方的 line item property 觀念

普通的購物車內容 property 就是 {}

使用到 virtual option 的內容會出現在 property 內

以上兩張圖是 shopify 官方 cart.js 回傳的 ajax 內容

詳細的規格可以看官方文件

https://shopify.dev/docs/api/liquid/objects/line_item#line_item-properties

也就是說 shopify 官方以及各種 theme 的開發者

在條列購物車內容的時候使用的 unique key 不是 variant id 而是 variant id + property 真的很酷！

然後官方以及各種 theme 都會記得把 line item property 給列出來！

下一個知識點

其中一個 line item property 叫做 _YmqItemPrice 這個就是實際的 add-on price 所在地

另外要知道 line item property 支援的是 key/value pair 都是字串而已

如您所見那個價格也是字串不是數字

然後呢 app 再根據 cart.js 內容動態去修改購物車 DOM 的內容！

老實說這種做法我覺得很暴力這 app 等於是預設大多數的 theme 會用同樣的 DOM 結構

然後 app 再根據 market 不同在前端根據 currency 動態運算去修改

實在是很暴力的寫法感覺超容易有 bug 不過這 app 評價很高所以可能也還好

我觀察了一下幾個 theme -> 在 DOM 價格的地方的確就是 .cart-item .price 這樣查詢就會找到！

下一個知識點

我觀察 ajax 內容只有出現代表原價的 3400 還有 _YmqItemPrice 的值

我沒看到最後的訂單金額動態算出來去更新購物車 DOM 我可以理解

但最終金額是怎麼出現在結帳頁面的？

觀察發現購物車前往結帳頁之前

會先呼叫一個 api 對象不是 shopify 而是 app 廠商！

然後在裡面會使用 graphql 協定呼叫 mutation draftOrderCreate

裡面有出現 priceOverride amount 43.29 這些值！

官方文件在這裡

https://shopify.dev/docs/api/admin-graphql/2025-01/input-objects/DraftOrderLineItemInput#fields-priceOverride

https://shopify.dev/changelog/set-custom-prices-in-draft-orders

這功能 2017 就上線了

https://www.shopify.com/partners/blog/introducing-shopify-s-draft-orders-api

然後在 /settings/apps/app_installations/app/ymq-options 頁面也的確會看到有權限

最後，Draft Order 建立成功後，Shopify 會回傳一個可用的 invoiceUrl（Draft checkout URL） -> 前端最後跳轉到 invoiceUrl 就進入結帳頁面了！

1️⃣ 用戶選選項（前端）
   ↓
2️⃣ App 把 options 寫進 line item properties（_YmqItemPrice）
   ↓
3️⃣ 抽屜顯示時，JS 改畫面顯示加價後的小計（還沒真的改價）
   ↓
[User clicks "Checkout"]
   ↓
[Frontend JS] → POST https://api.ymq.cool/api/checkout
   ↓
[YMQ Server] → Calls Shopify Admin GraphQL draftOrderCreate()
   ↓
[Shopify] → Returns invoiceUrl (with priceOverride applied)
   ↓
[YMQ Server → Browser] → Redirect to invoiceUrl
   ↓
✅ Checkout page (shows final total 43.29)

雖然我覺得廠商 app 實作上有點暴力但好像也是廣泛被接受

心得：shopify 生態系真的很強大

站長阿川

每週二 YT 直播問答，DC 可 Call-in，一起討論技術、職涯發展。
YT 👇👇👇
https://www.youtube.com/@codelove_tw
DC 👇👇👇
https://discord.gg/fvCF2whZ9D

提供 Shopify 接案服務：阿川の電商水電行 - 專修 Shopify 網店 👇👇👇
https://job.turn.tw/shopify-services

管理台灣 Shopify 開發者 LINE 群組（非官方）👇👇👇
https://line.me/ti/g2/YUasX5K3CJ4QdIx76zppjHlh3-q8w-xkSyK1LA