iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 30
1
自我挑戰組

Wordpress 外掛開發系列 第 30

「Wordpress 外掛開發」代客下單最終章,觀察經手人

加入 Autocomplete

原本是打算做email與公司的匹配,不過覺得在這個的邏輯上打轉,基本上是在寫JS,這一點我就只寫出輸出客人該拿到的資料filter代替js的輸出,而autocomplete可以藉由jquery Autocomplete來達到。

我們設定filter可以對應撰寫來做list的資料取得,並且將我們的料locaization到我們的script之中,就可以獲得,而我們也在users之中,將不必要的資訊給拿掉,只留我們需要的Id,company name與 email。


add_filter('go_ranger_retreive_shop_client','go_ranger_shop_client_list',10);

function go_ranger_shop_client_list(){
  if(false === current_user_can('god-mode')) return array();
  $users = get_users();
  $result = array();
  foreach($users as $user){
    $_temp = array(
      'id' => $user->id,
      'email' => $user->user_email,
      'company' => $user->company,
    );
    array_push($result,$_temp);
  }
  return $result;
}

enququ script

而我們對應的的list,只需要將我們的資料藉由wp_localize_script做引入即可,而如果資料是動態的,可以藉由ajax的功能來做到動態autocomplete,而我們也設定了gr_do_script_init將全部外掛需要註冊的script都統一由這個action來達成。

add_action('init','go_ranger_script_init');

function go_ranger_script_init(){
  do_action('gr_do_script_init');
}

add_action('gr_do_script_init','gr_do_regist_script_init' , 10 , 0);

function gr_do_regist_script_init(){
    wp_register_script(
        'go-ranger-autcomplete',                
        plugin_dir_url( __FILE__ ) . '/assets/autcomplete.min.js',  
        array(),                                
        '4.11.2',                                
        true                                  
  );
}

add_filter('woocommerce_after_checkout_billing_form','before_go_ranger_bill_fileds',10,1);

function before_go_ranger_bill_fileds($user){
    wp_enqueue_script( 'go-ranger-autcomplete' );
    $users = apply_filters('go_ranger_shop_client_list');
    wp_localize_script( 'go-ranger-autcomplete', 'user_name', $users );

}

替你的客人下訂單

那我們重頭戲,就是將autocomplete後的選擇,在選擇之後寫入,而我們最先就是將輸入的選擇寫進我們的metakey之中,而我們在點擊後,可以直接將項目的值設定成ID,則可以較容易做sanitize並且做好處理。


add_filter('woocommerce_after_checkout_billing_form','go_ranger_bill_fileds',9999,1);

function go_ranger_bill_fileds(){
  if(false === page_role_permission()) return;
    $fields['billing_god_mode'] = array(
				'label'		=> '上帝模式?',
				'required'	=> true,
				'class'		=> array( 'form-row-wide' ),
				'clear'		=> true,
				'priority'	=> 150,
				'type'		=> 'select',
				'options'	=> array(
					'yes'	=> '好',
					'no'	=> '先不用',
				),
				'default'	=> 'yes',
      );
  $fields['shop_for_whom'] = array(
				'label'		=> '顧客名稱',
				'required'	=> true,
				'class'		=> array( 'form-row-wide' ),
				'clear'		=> true,
				'priority'	=> 150,
				'type'		=> 'autocomplete',
      );
      
}

add_filter( 'woocommerce_checkout_customer_id', 'go_ranger_set_user_id' );

function go_ranger_set_user_id( $user_id ) {
  if ( page_role_permission() ) {
    if ( 'yes' === $_POST['billing_god_mode'] && isset($_POST['shop_for_whom']) ) {
      if(user_id_exists($_POST['shop_for_whom'])) return $_POST['shop_for_who,']
      else return 0;
    }
  }
  return $user_id;
}

function user_id_exists($user_id){
    if(false === is_integer($user_id)) return false;
    $user = get_userdata( $user_id ); 
    if (false === $user) return false;
    return true;
}

正確顯示在後台的訂單之中

而我們成功將資料傳入後,我們的後台還是會顯示原本的資訊,所以我們需要一點更動才能來完整我們的程式碼,而我們需要有個註記是這一筆訂單是由哪個使用者完成的,所以我們先將woocommerce_checkout_update_order_meta來處理當錢頁面的post,也可以取得我們的order_ud,加入我們的處理meta,在woocommcer三代之後,meta_data有做更新,一率都要做save,不然他並不會改變。

  add_action( 'woocommerce_checkout_update_order_meta', 'go_ranger_add_proccess_man', 10, 2 );
  
	function go_ranger_add_proccess_man( $order_id, $data ) {
		if ( page_role_permission() ) {
			if ( 'yes' == $_POST['billing_god_mode'] ) {
        $order = wc_get_order( $order_id );
        $order->update_meta_data( 'go_ranger_procees_man', get_current_user_id() );
        $order->save();
			}
		}
	}

加入處理男子的問題後,我們就來將我們後台可以顯示我們的經手人的資訊來做顯示

add_action( 'woocommerce_admin_order_data_after_order_details', 'gr_add_prcoess_man_admin' );
function gr_add_prcoess_man_admin( $order ) {
  $procees_man_id = $order->get_meta( 'go_ranger_procees_man' )
  if ( isset($procees_man_id)) {
    $user = get_user_by( 'ID', $procees_man_id );
    ?>
    <p class="flex f-1">
      <label>此單為代客下單</label>
    </p>
    <?php 
    if(isset($user)){
      echo '此單由'.$user->display_name.'所負責。';
    }}
  }
}

如此,我們又可以省49元去買這個小外掛了XD

後記

三十天內,共寫了四個小外掛,之後還是會在公司的其他地方繼續更新,感謝公司Formosa Screens讓我可以在上班的一些時間準備鐵人賽的東西,還拿了一些小side project改成文章來講解。

Wordpress的外掛相信很有競爭力,世界23%的佔有率,是個非常可觀的數字,相對應大型的外掛會有相對應的擴充,而我覺得很可惜的是很多台灣的傳統產業(澳洲傳產也是不e化),是非常適合走wordpress的路線來經營線上化,而不是唯一的電子化只有使用line而已。

之前跟客戶的it聊過天,他們訝異說計算庫存這些東西,與零售業者不依樣,傳產的IT因為沒辦法做到精準(可以,但是你不能想像做磚頭的是好幾個產線的機械手臂吧),只能用估算值加上offset來做到,而在耗材管理是可以與印表機伺服器這些連接,看看1998年netflix的成立初秋,網路下單印表機就可以啪嗒啪嗒的印了,怎麼我訂個一噸的六邊鋁擠型還得要email個好幾封來做確認,流程都需要被簡化的(尤其是那些窗口像是鬼打牆完全無法溝通),不過我們都知道問題不是出在這些上,是出在經營者的想法之中,我們能做的就是盡力推廣,等到他們發現周圍的人都開始使用,他們或許會考慮花個幾千塊做個簡單的線上系統試試。

之前某個客戶,買下了約300坪的小工廠,砸錢不手軟,花了十萬要來做耗材的管理這電子化,不過現在還沒聽到完成了多少,傳產在邁向下一代需要的事情,還是得先把MVP做好,再來談你要多炫砲的功能,不然什麼都沒有,我從2018年就聽到了,現在還是沒有聽到他們上線,幫這一家公司加油。

對了,明天終於可以不用每天操文章了,爽啦!

reference

woocommerce_form_field()
Shop as a Customer for WooCommerce
shop as a customer for woo - docs
cxthemes - Shop as Customer for WooCommerce Documentation
creativelittledots/woocommerce-shop-as-customer-discount


上一篇
「Wordpress 外掛開發」替你的上帝下訂單,上帝模式撰寫
系列文
Wordpress 外掛開發30

1 則留言

1
leopan
iT邦新手 5 級 ‧ 2020-10-14 21:04:34

恭喜完賽

我要留言

立即登入留言