ที่มาที่ไปของความต้องการนี้คือ ต้องการเก็บ google uid พ่วงไปในแต่ละออร์เดอร์ เพื่อให้ทราบว่าออเดอร์นั้นๆเป็นของ uid ไหน ตอนหลังเมื่อรายการออเดอร์นั้นๆเปลี่ยนสถานะเป็นสำเร็จ จะยิงข้อมูลส่งไปให้ google analytic

ยัดฟิลด์ลงไปในหน้าออเดอร์ พอตอนสร้างออเดอร์ก็เอาฟิลด์ที่เพิ่มเข้าไปลงไปเก็บในดาต้าเบส

พาร์ทนี้ผมจะแสดงวิธีเพิ่มฟิลด์เข้าไปในฟอร์มหน้าจ่ายเงิน ผลลัพธ์หน้าตาแบบนี้

เริ่มที่ WooCommerce เขามี hook ชื่อ woocommerce_after_order_notes ให้ใช้งาน hook ตัวนี้จะทำงานหลังจากสร้างฟิลด์ order note เสร็จแล้ว เขียนโค้ดงี้

/**
 * Add the field to the checkout page
 */
add_action( 'woocommerce_after_order_notes', 'add_uid_field' );

function add_uid_field( $checkout ) {
	echo '<div id="add_uid_field"><h2>' . __( 'Extras' ) . '</h2>';
	woocommerce_form_field( 'uid', array(
		'type'        => 'text',
		'class'       => array( 'my-field-class form-row-wide' ),
		'label'       => __( 'uID' ),
		'placeholder' => __( 'google analytics uID' ),
		'required'    => true,
	), $checkout->get_value( 'uid' ) );
	echo '</div>';
}

โค้ดนี้จะเป็นการบอกว่า หลังจากที่สร้างฟิลด์ order notes เสร็จแล้วเนี่ยให้มารันฟังก์ชั่น add_uid_field ของเราด้วย

ในฟังก์ชั่น add_uid_field ให้พ่นคำว่า Extras ออกมา และพ่นเท็กฟิลด์ uid ออกมา การพ่นเท็กฟิลด์ uid จะใช้คำสั่ง woocommerce_form_field เข้ามาช่วย จริงๆแล้วเราจะเขียนโดยใช้แท็ก <input type=text /> ธรรมดาๆก็ได้

ตอนที่ผมทำงานจริงๆ ฟังก์ชั่น add_uid_field นั้นผมใช้ hidden field เพื่อไม่ให้ยูสเซอร์เห็น เพราะว่าฟิลด์นี้ค่ามันจะถูกป้อนด้วย javascript อัตโนมัติ แต่ในบทความนี้ผมใช้ text field เพื่อให้ท่านๆที่ผ่านมาอ่านมองเห็น ผลลัพธ์

ถัดจากนั้น เมื่อมีฟิลด์ที่ต้องการแล้ว เราก็เอาค่าจากในฟิลด์นั้นเก็บลงฐานข้อมูลตอน WooCommerce สร้างใบออเดอร์

/**
 * Update the order meta with field value
 */
add_action( 'woocommerce_checkout_update_order_meta', 'update_uid_order_meta' );

function update_uid_order_meta( $order_id ) {
	if ( ! empty( $_POST['uid'] ) ) {
		update_post_meta( $order_id, 'uid', sanitize_text_field( $_POST['uid'] ) );
	}
}

โค้ดด้านบนเป็นการบอกว่า ตอนที่ WooCommerce เอาข้อมูลลงไปเก็บในดาต้าเบส ให้รันฟังก์ชั่น update_uid_order_meta ของเราด้วย

ในฟังก์ชั่น update_uid_order_meta ก็จะบอกว่าถ้าหากมีข้อมูลในช่องป้อน uid ให้เอามันไปเก็บไว้ที่ตาราง wp_postmeta โดยตั้งชื่อว่า uid

จบ

เมื่อต้องการนำค่า uid มาใช้งานก็ให้ใช้ฟังก์ชั่น get_post_meta เข้ามาช่วยดึง

โค้ดทั้งหมดเป็นดังนี้

/**
 * Add the field to the checkout page
 */
add_action( 'woocommerce_after_order_notes', 'add_uid_field' );

function add_uid_field( $checkout ) {
	echo '<div id="add_uid_field"><h2>' . __( 'Extras' ) . '</h2>';
	woocommerce_form_field( 'uid', array(
		'type'        => 'text',
		'class'       => array( 'my-field-class form-row-wide' ),
		'label'       => __( 'uID' ),
		'placeholder' => __( 'google analytics uID' ),
		'required'    => true,
	), $checkout->get_value( 'uid' ) );
	echo '</div>';
}


/**
 * Update the order meta with field value
 */
add_action( 'woocommerce_checkout_update_order_meta', 'update_uid_order_meta' );

function update_uid_order_meta( $order_id ) {
	if ( ! empty( $_POST['uid'] ) ) {
		update_post_meta( $order_id, 'uid', sanitize_text_field( $_POST['uid'] ) );
	}
}

ความรู้เพิ่มเติม

คำสั่ง update_post_meta เป็นคำสั่งสำหรับนำข้อมูลไปเก็บไว้ในตาราง wp_postmeta
คำสั่ง get_post_meta เป็นคำสั่งสำหรับดึงข้อมูลออกจากตาราง wp_postmeta ออกมาใช้งาน
คำสั่ง add_post_meta เป็นคำสั่งสำหรับนำข้อมูลไปเก็บไว้ในตาราง wp_postmeta คล้ายกับ update_post_meta ต่างกันตรงที่คำสั่ง update_post_meta ก่อนเอาข้อมูลไปเก็บจะเช็กดูว่ามีข้อมูลเก่าหรือไม่ ถ้ามีก็จะไม่เพิ่มแต่ใช้วิธีอัปเดตแทน ส่วน add_post_meta นั้นเพิ่มทุกกรณี

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ