八月 16, 2018 | 後端和Drupal
【Drupal Commerce】實作建立額外購物步驟Checkout Page與購物欄位Checkout Pane
由於專案的需要,需要建立多重的購物步驟。原本的購物車、結帳、物流、Review、結帳的流程需要再增加新的Step與裡面的Commerce Pane。在Commerce Checkout API裡面,其實有提供了很完善的文件說明,這篇將會簡單演示如何實作。
前言
由於專案的需要,需要建立多重的購物步驟。原本的購物車、結帳、物流、Review、結帳的流程需要再增加新的Step與裡面的Commerce Pane。在Commerce Checkout API裡面,其實有提供了很完善的文件說明,這篇將會簡單演示如何實作。
建立購物步驟
如果要建立額外的購物步驟,可以參考下面程式碼
/**
* Implements hook_commerce_checkout_page_info().
*/
function mymodule_commerce_checkout_page_info() {
// Define an additional checkout page.
$checkout_pages['OwerData'] = array(
'title' => t('訂購人資料'),
'weight' => 0,
'back_value' => t('Go back'),
'submit_value' => t('Next steps'),
);
$checkout_pages['ReseiveData'] = array(
'title' => t('到貨日期'),
'weight' => 1,
'back_value' => t('Go back'),
'submit_value' => t('Next steps'),
);
return $checkout_pages;
}
以上我將原本的購物流程加入了兩個步驟,一個叫做訂購人資料的步驟,另外一個則是到貨日期的步驟。
建立Checkout Pane
建立了步驟之後,再來需要的就是加入對應的欄位到這個步驟之中,而這在Commerce裡面就叫做Checkout Pane。同樣在Checkout的API裡面有詳細的描述,若你想要直接寫程式碼,也可以直接複製以下的Code,將對應的資訊改成你們的即可。
建立Checkout Pane程式碼
/**
* Implements hook_commerce_checkout_pane_info().
*/
function mymodule_commerce_checkout_pane_info() {
$checkout_panes['receive_date_pane'] = array(
'title' => t('到貨日期'),
'base' => 'receive_date_pane',
'page' => 'ReseiveData', //顯示在到貨日期
'weight' => -5,
'name' => t('填寫到貨日期'),
'collapsible' => FALSE,
'collapsed' => FALSE,
'enabled' => TRUE, // 預設就是啟用狀態
'review' => TRUE, // 在Review頁面要看到這個資訊
'file' => 'includes/receive.checkout_pane.inc', //函數可以在這個檔案裡找到
);
return $checkout_panes;
}
建立Checkout Pane後台設定欄位
function receive_date_pane_settings_form($checkout_pane){
$form['chooseDefault'] = array(
'#type' => 'select',
'#title' => '選擇',
'#options' => array(
'All' => '請選擇',
'One' => 'One'
),
'#default_value' => variable_get('chooseDefault','All'),
);
return $form;
}
建立Checkout Pane的欄位
要建立對應的Form,需要注意上面Checkout Pane的base,這裡的Base為receive_date_pane,因此照Checkout API規則,要建立Form就是以這個Base為開頭,就可以完成
/*
* 建立Form欄位
* 可以參考Form API:
* https://api.drupal.org/api/drupal/developer%21topics%21forms_api_reference.html/7.x
*/
function receive_date_pane_checkout_form($form, &$form_state, $checkout_pane, $order){
$pane_form['test_field']=array(
'#type' => 'textfield',
'#title'=>t('測試欄位'),
'#description'=>t('請填寫測試內容'),
);
return $pane_form;
}
//撰寫驗證程式
function receive_date_pane_checkout_form_validate($form, &$form_state, $checkout_pane, $order){
//如果沒有問題
return true;
}
//撰寫送出程式
function receive_date_pane_checkout_form_submit($form, &$form_state, $checkout_pane, $order){
}
結論
照上面的步驟在購物流程之中,加入自己喜歡的步驟與欄位,算是非常的方便囉。另外可以考慮搭配Commerce Checkout Progress一起製作,會有說不出開心的效果,Enjoy:)