WooCommerce Store API 實戰(六)- 新增運送資訊

前情提要:透過 Store API 的 ExtendSchema 可以在既有的請求路徑中很方便的新增回傳資料,這樣就不用建立新的端點來處理額外的需求,我們用這個機制完成了付款方式的回傳,但卻在運送方式這邊碰到了瓶頸,目前解法是請開發團隊新增勾點來加入運送方式的其他資料。

本以為 WooCommerce Block 開發團隊應該忙到沒空理我的建議,想不到隔兩天後就收到回覆,當下覺得他們的工作量好大,要開發這種給全世界使用的外掛真不是蓋的,回覆的內容下:

You can experiment with rate meta, while we won’t add such filter the API, you can use woocommerce_shipping_method_add_rate if you don’t own the code to that rate, or simply add them to meta_data when calling WC_Shipping_Method::add_rate().
The reason we don’t add filters to API responses is that it risks creating unpredictable responses that will have cascading effects on the UI, if not from you, then from other plugins and other people.

大意是說為了確保 Store API 回傳結果的可預測性,他們不提供勾點讓開發者加入新的回傳欄位,取而代之的可以使用 rate meta 來加入我們所需的資料。Rate meta 在請求 /cart 的時候就可以看到:

https://oberonlai.blog/wp-content/uploads/woocommerce-store-api-practice-5/woocommerce-store-api-practice-01.jpg

目前有兩筆資料在 meta_data 這個欄位裡面,根據開發團隊的建議,我們可以用 woocommerce_shipping_method_add_rate 或是 WC_Shipping_Methodadd_rate() 方法來加入所需的資料,研究過後我決定使用前者來處理。

新增還差多少金額免運費顯示

先說明一下我們的目標:我希望可以在結帳的時候可以顯示差多少免運費,當滿足金額的條件時,會出現免運的提示,因此為了計算還差多少錢免運,必須先取得免運的門檻,然後用購物車金額 – 免運門檻就來得到這個數字。

目前該功能已實作在 WooCommerce 好用版擴充之中,具體的設定方式與顯示畫面如下:

一、設定免運條件

在運送方式設定找到「如果要免運費的話需要..」的選項,並選擇「最小訂購金額」,這樣下方就會多出最下訂購金額的設定欄位,這邊先隨便設定一個數字 300,這代表如果購物車總金額超過 300 元的話單一費率的運費就會是 0 元。

https://oberonlai.blog/wp-content/uploads/woocommerce-store-api-practice-5/woocommerce-store-api-practice-02.jpg

二、前台顯示效果

接下來我們到前台去進行結帳,選擇一個不到 300 元的商品,這樣就會在結帳的時候看到還需要多少金額才能免運:

https://oberonlai.blog/wp-content/uploads/woocommerce-store-api-practice-5/woocommerce-store-api-practice-03.jpg

由於要滿購物車金額不含運費要超過 300 元才能達標,因此免運門檻 300 – 購物車金額 100 = 200 元,因此購物車要再加入 200 元的商品才能讓單一費率的運送方式變成免運費,我們把商品數量再加兩個湊三百元:

https://oberonlai.blog/wp-content/uploads/woocommerce-store-api-practice-5/woocommerce-store-api-practice-04.jpg

滿足購物車金額 300 元的條件後就變成免運了,這就是我們要在 Store API 裡面達成的效果,藉此我們需要獲得以下資料:

  1. 購物車金額
  2. 免運費條件
  3. 最小訂購金額
  4. 實際運費

其中第一和第四點都可以透過 /cart 來取得,在 total 的區塊可抵看到 total_items 購物車金額以及 total_shipping 所選擇運送方式的運費:

https://oberonlai.blog/wp-content/uploads/woocommerce-store-api-practice-5/woocommerce-store-api-practice-05.jpg

因此我們需要把免運費條件以及最小訂購金額加到 shipping meta 裡面,這樣我們才能在前端計算出還差多少免運金額。

新增運送方式資料

勾點 woocommerce_shipping_method_add_rate 帶有三個參數,分別是 $rate$args、以及$shipping,最後要返回 $rate$rate 是運送方式的費率資料,包含運費、稅等欄位,$args 是指定 $rate 欄位的值,而 $shipping 是運送方式類別本身。

而免運費條件的欄位叫做 cost_requires、最小訂購金額叫做 min_amount,有了這些認識後我們就可以來實作 shipping meta 的新增,程式碼如下:

add_action( 'woocommerce_shipping_method_add_rate', function( $rate, $args, $shipping ) {
    if ( $shipping->cost_requires && $shipping->min_amount ) {
        if ( $shipping->cost_requires === 'min_amount' || $shipping->cost_requires === 'min_amount_or_coupon' ) {
            $rate->add_meta_data( 'free_min_amount', $shipping->min_amount );
        }
    }
    return $rate;
}, 10, 3 );

首先我們先檢查該運送方式是否有設定 cost_requires 以及 min_amount,也就是對應到下圖中的兩個地方:

https://oberonlai.blog/wp-content/uploads/woocommerce-store-api-practice-5/woocommerce-store-api-practice-06.jpg

有的話再去判斷 cost_requires 選擇的是否為「最小訂購金額」或是「每筆訂單的最小金額或使用折價碼」,是的話使用 $rateadd_meta_data() 方法去新增一組資料,資料的 key 值為 free_min_amount,value 則為 min_amount 欄位的設定值也就是最小訂購金額。

完成後再次請求 /cart,就可以看到我們所需的資料出現在裡面了:

https://oberonlai.blog/wp-content/uploads/woocommerce-store-api-practice-5/woocommerce-store-api-practice-07.jpg

至於達到免運門檻的運費計算 Store API 都幫我們處理好了,這樣我們要做的就是計算還差多少免運就可以,這部分之後會在前端進行實作。透過 shipping meta 的方式就可以不用為了取得更詳細的運送資料而採用 ExtendSchema 加入重複的資料結構,也不用再新增自己的端點只靠同一支 API 就能搞定。

小結

WooCommerce Store API 的研究先到此告一段落,不足的部分就等到開始實作前端時再來處理,另一方面由於 Store API 並未處理顧客登入註冊的行為,它是使用 Cookie 來紀錄目前的顧客身份,而這身份並不會跟既有的會員資料綁定,而且在結帳時也無法傳送 user id 來設定該訂單屬於哪位顧客。

這會造成一些困擾,目前能找到的解法是先取得 user id,然後在勾點 woocommerce_store_api_checkout_update_order_from_request$order->set_customer_id( $user_id ) 來寫入該訂單屬於哪位顧客,如果是新顧客的話可以採用 WC REST API 來建立,此外之後遇到需要使用 API 來取得訂單資訊的情境時,WC REST API 都能派上用場。

因此接下來我們把焦點放在 WC REST API 身上,學習取得 API 授權以及建立新的顧客,我們下週見!

文章標籤Store API

目錄

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

賴俊吾 / Oberon Lai
賴俊吾 / Oberon Lai

現為全職 WordPress 工程師,網站開發經歷 11 年,專攻前端工程與 WordPress 佈景主題、外掛客製化開發

訂閱電子報

Hi,我是 Oberon,我會固定在每週五早上發送接案心得以及與 WordPress 相關的電子報,同時也會分享一些實用的開發知識,讓你在 WordPress 的接案路上不孤單!

專注於分享 WordPress 開發、接案技巧、專案管理等自由工作者必備知識與心得

© 2024 想點創意科技有限公司

想點創意科技有限公司 | 統一編號 90516823
Designed by Hend Design | 隱私權政策

訂閱電子報

Hi,我是 Oberon,我會固定在每週五早上發送接案心得以及與 WordPress 相關的電子報,同時也會分享一些實用的開發知識,讓你在 WordPress 的接案路上不孤單!