Drupal 7 自定義購物流程以及用戶界面

前言

這是2015年的一個項目，基於Drupal7+Commerce模塊進行開發。因爲Commerce自帶的購物流程比較複雜，並且界面簡陋，用起來也不方便，因此須要進行完全的從新設計。過程當中遇到很多問題，不少是之前沒有遇到過的，後來經過大量的Google搜索以及閱讀API文檔，才得以所有解決。

準備

因爲頁面多處使用了AJAX操做，爲了方便，引入了AngularJS 1.x版本。另外使用了部分Semantic UI組件。Drupal部分爲了保持性能以及代碼簡介，儘可能少用模塊。頁面所有使用定製模版，爲了避免和Commerce自帶的頁面衝突，購物車以及結帳頁面URL也須要修改。

開始

HTML頁面製做的時候也遇到了一些問題，要求必須保持等比縮放，可是因爲各類平臺以及瀏覽器兼容性問題，也折騰了好久，嘗試過rem和viewport，最終選擇了viewport，這裏就不細說了，另外寫一篇文章再說。

主要講Drupal，從商品頁面開始提及，先上一張圖。

商品屬性選擇，Commerce默認的屬性選擇界面太醜，因而從新作成這樣。方法是先把載入的商品屬性和相應的商品ID保存在隱藏域裏，而後用AngularJS的方式把屬性列表綁定在彈出框裏，當用戶點擊「放入購物袋」按鈕時（這裏須要用JS判斷當前的添加到購物車按鈕有沒有被禁用），彈出屬性供用戶選擇，用戶選擇並點擊肯定後，從隱藏域中取出商品ID，把添加到購物車表單內相應的值修改，並模擬用戶點擊添加到購物車按鈕。這樣就完成了加入購物車的操做。

由於AngularJS須要配合HTML工做，因此這裏的代碼並不通用，就不貼上來了。

購物車表單，這裏把URL修改成 /bag ，購物袋。使用 hook_menu 定義頁面。

function mymodule_menu() {
  //重寫購物車頁面
  'bag' => array(
    'type' => MENU_NORMAL_ITEM,
    'title' => '購物袋',
    'page callback' => 'mymodule_commerce_cart',
    'access callback' => TRUE
  ),
}

/**
 * 重寫購物車頁面
 * 返回購物車內的行項
 */
function ajax_plug_commerce_cart() {
  global $user;
  $order = commerce_cart_order_load($user->uid);

  $line_items = array();
  if(!empty($order)) 
    $line_items = entity_metadata_wrapper('commerce_order', $order)->commerce_line_items->value();
  // 這裏的custom_commerce_cart是使用 hook_theme 自定義的模板，傳遞購物車訂單內的行項
  return theme('custom_commerce_cart', array('vars' => array('rows' => $line_items)));
}

這裏自定義一個頁面（hook_menu）和一個模板（hook_theme），而後提取用戶的購物車訂單（commerce_cart_order_load）內的行項（entity_metadata_wrapper('commerce_order', $order)->commerce_line_items->value()），交給模板來渲染，最終就是新的購物車頁面。這個頁面的商品數量部件修改值之後自動以AJAX的方式提交到後臺，而後返回從新計算後的商品價格以及訂單總價。

AJAX提交的方式就不講了，這裏講一下PHP更新商品數量的方法。數據提交地址一樣適用 hook_menu 定義，接受JSON數據，傳遞的數據包括行項ID還有修改後的數量。具體調用到的方法，首先根據UID載入購物車訂單，commerce_cart_order_load方法， 而後根據傳遞的行項ID找到須要更新的行項，把行項的quantity屬性設置成傳遞過來的數量，調用 commerce_line_item_save 方法保存行項，而後調用 commerce_order_save 保存訂單，最後獲取訂單的 commerce_order_total 屬性，獲取訂單總價，返回JSON 數據。

結算頁面。這個頁面添加地址和優惠券稍微複雜一點。地址也是經過AJAX的方式提交到後臺保存的，獲取用戶全部收穫地址，使用 commerce_customer_profile_load_multiple 方法，添加一個新的地址，使用 commerce_customer_profile_new 方法，選擇好地址後，修改訂單的 commerce_customer_billing 屬性，設置收貨地址。

使用優惠券的原理和地址相似，使用 commerce_coupon_redeem_coupon 應用優惠券到訂單，這個網站的優惠券還設置了某些商品不容許使用優惠券等，這裏就不贅述了。

還有一個比較複雜的地方就是微信支付，因爲沒有現成的模塊，因而根據這個網站的需求從新開發了一個，調用微信的JSAPI支付功能（僅支持微信端），大體思路就是進入結算頁面的時候，檢查用戶的瀏覽器類型，若是是微信內，則調用微信支付SDK的下單功能生成相應金額的訂單，而後在頁面加入調用JSAPI的代碼，當用戶點擊提交訂單時，調用支付方法。用戶操做完成支付後，更新訂單狀態。

最後是用戶中心頁面，這個頁面有幾個部分，主要是訂單列表、餘額、修改密碼以及郵箱等等。

訂單列表是使用AngularJS讀取後臺數據生成的，一次讀取幾條，點擊 更多 繼續載入其餘訂單。餘額是使用 userpoints 模塊積分模擬的，配合Commerce Userpoints 以及 Commerce Userpoints Payment method 模塊實現積分支付功能。

結束

這個項目最主要的問題是對Drupal各種的API不熟悉，因此查閱大量的API文檔才得以解決問題。過程當中也遇到一些坑，例如折扣優惠券和定額優惠券的不一樣行爲，總之解決問題的過程是比較痛苦的，解決完了以後又頗有成就感。經過這個項目對Drupal以及Commerce的理解也深刻了很多。不過Drupal8已經出來了，還有更多的坑在等着呢。