資訊專欄INFORMATION COLUMN
摘要：由于自帶的購物流程比較復雜，而且界面簡陋，用起來也不方便，所以需要進行徹底的重新設計。頁面全部使用定制模版，為了不和自帶的頁面沖突，購物車以及結賬頁面也需要修改。用戶操作完成支付后，更新訂單狀態。
前言
這是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已經出來了，還有更多的坑在等著呢。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/22522.html
摘要：下載以及相關模塊下載以及模塊并解壓。接著執行，即可完成編譯安裝。運行需要的配置首先需要在的上下文里增加一條這條是表示每上傳就更新進度信息。 這篇文章的目的是在編譯安裝Nginx的同時，安裝upload和uploadprogress模塊，以及運行Drupal 8所需要的配置。由于使用的是Raspberry pi 3B，所以系統用的Raspbian，Debian/Ubuntu應該也是差不多...
摘要：自帶的上傳進度功能，需要擴展支持。于是想到利用的模塊來實現上傳進度。接下來使用模塊替代的文件上傳功能，目的是提高文件上傳的性能。而且可以避免上傳大文件時執行超時引起錯誤。新建一個對象，把設置成剛上傳的文件。 Drupal 8 自帶的上傳進度功能，需要PECL uploadprogress library擴展支持。安裝后發現效果還是不太好，不知道什么原因，進度條不能正常顯示，而且上傳較大...
摘要：自帶的上傳進度功能，需要擴展支持。于是想到利用的模塊來實現上傳進度。接下來使用模塊替代的文件上傳功能，目的是提高文件上傳的性能。而且可以避免上傳大文件時執行超時引起錯誤。新建一個對象，把設置成剛上傳的文件。 Drupal 8 自帶的上傳進度功能，需要PECL uploadprogress library擴展支持。安裝后發現效果還是不太好，不知道什么原因，進度條不能正常顯示，而且上傳較大...
摘要：測試運行多次并取平均值。文章數量測試的基準測試基準測試結果基準測試結果基準測試結果基準測試結果基準測試結果基準測試結果不支持再次成為冠軍請注意的運行環境需要或以上。同時，再次不能正常工作并拋出錯誤。 showImg(https://segmentfault.com/img/remote/1460000013690286); 我們每年都會嘗試深入了解不同版本的 PHP 和 HHVM 在各...
閱讀 796·2021-11-24 09:38
閱讀 998·2021-11-11 11:01
閱讀 3236·2021-10-19 13:22
閱讀 1524·2021-09-22 15:23
閱讀 2828·2021-09-08 09:35
閱讀 2766·2019-08-29 11:31
閱讀 2119·2019-08-26 11:47
閱讀 1563·2019-08-26 11:44
