八月 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:)