前言

由於專案的需要，需要建立多重的購物步驟。原本的購物車、結帳、物流、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：）

【Drupal教學】Commerce Spgateway 金流模組介紹+使用

延伸閱讀

【Drupal Commerce】實作建立額外購物步驟Checkout Page與購物欄位Checkout Pane