WooCommerce 中的 Custom JavaScript Event

WooCommerce 有豐富的 javascript 指令碼，你可知這些指令碼中也留有像 php hooks 一樣的自定義事件呢？利用這些 custom javascript event，修改 js 指令碼變得容易了。

不得不知的 jQuery.trigger()

jQuery 的 trigger() 是一種用程式碼啟用事件的方法，可以是預定義的事件，例如 click，submit 等，也可以是自定義事件。這些自定義事件標誌著某些事件的發生，之後用 bind 方法將一些功能繫結到這個事件上，就可以確保指令碼的執行順序，做定製化修改。

WooCommerce 中的 Custom Event

WooCommerce 的前臺指令碼在 WooCommerce/assets/js/frontend 目錄下，帶有 min 的是真實使用的指令碼，不帶 min 的是原始碼版。開啟原始碼版，搜尋.trigger 就可以找到自定義事件。

例如在 add-to-cart-variation.js 檔案中可以找到

// Custom event for when variations have been updated
$variation_form.trigger('WooCommerce_update_variation_values');

再往下看，還有 show_variation 事件，看名字就知道這是顯示產品屬性的標誌性事件。

$single_variation_wrap.slideDown('200')
.trigger( 'show_variation', [ variation ] );

下面就用 show_variation 事件演示一下 WooCommerce Custom Event 的使用方法。

程式碼示例：改變產品屬性價格的顯示位置

在帶有屬性的產品頁面，修改產品屬性時，價格變化顯示在 add to cart 按鈕旁邊，如下圖所示

現在，我希望把這個價格變化放到標題正下方的價格那裡，即替換"From: ~~£35~~ £30 "，並隱藏 add to cart 旁邊的那個價格，變成下面這樣

所用到的程式碼如下：

/**
 * 利用 jquery custom event 修改價格
 *
 * 用 is_product() 確保指令碼只在產品頁載入
 * 用 action: wp_footer 將指令碼載入到 footer 區域
 */
 function theme_custom_wc_script(){
	if( !is_product() ) return;
?>
<script type="text/javascript">
  jQuery( document ).bind( 'show_variation', function() {
	var price = jQuery( '.single_variation .price' ).html();
	jQuery( '.single_variation' ).hide();
	jQuery( '.entry-summary .price' ).html( price );
  } );
</script>
<?php
}
add_action( 'wp_footer', 'theme_custom_wc_script' );

注意程式碼中用 bind 方法繫結了 show_variation 時間，跟繫結 click 等事件沒有差別。

擴充套件閱讀

另一個使用 custom event 的示例：Add 『Sold Out』 to WooCommerce Variable Product Dropdown，
使用了 WooCommerce_update_variation_values 事件

WooCommerce 中的 Custom JavaScript Event