部落格已搬家
部落格搬家到 http://chaneswin.idv.tw/
EMAIL請寄到以下地址:chaneswin [at] chaneswin.idv.tw

目前日期文章:201411 (2)

瀏覽方式: 標題列表 簡短摘要
為了簡化成容易理解,
在此就不使用變數,強制跑1~10列來當例子,
請在D槽準備好檔案 D:\test99.xls
文章標籤

Chaneswin 發表在 痞客邦 PIXNET 留言(1) 人氣()

記錄使用 WooCommerce Delivery Slots 的問題
這次的要求是把外掛在結帳頁面的顯示位置改掉
雖然我是在改Slots 這個外掛,不過元素位置的改法應該在很多外掛上道理都是相同的
也就是使用Hook,這個名詞直譯成鉤子,我總算多多少少可以體會了

利用檢查元素找到 id="jckwds_fields"搜尋其所在的PHP頁面以及程式碼位置
( id="你要換位置的元素",不要傻傻照抄哦!)
再由包住它的函式 wds_field_output找到
// Checkout Fields
add_action( 'woocommerce_after_order_notes', array( &$this, 'wds_field_output' ) );

嗯!藉此機會了解一下 add_action 與 hook,
就簡單理解成 add_action 與 do_action要成對使用,
add_action 只是添加動作,do_action才是實際做動作,
這不難理解與記憶

因此接下來就是用 woocommerce_after_order_notes 來搜尋plugins資料夾裡面的全部檔案
看看哪裡有do_action
這才找到 woocommerce 外掛裡面的 do_ation
(plugins\woocommerce\templates\checkout\form-checkout.php)
說起來也蠻妙的,在 Slots 外掛添加動作,卻在woocommerce 外掛做動作
懂了以後覺得沒什麼,不懂的時候應該會頭很大吧

裡面有幾個常用位置可以放,譬如
woocommerce_before_checkout_form
woocommerce_checkout_before_customer_details
woocommerce_checkout_after_customer_details(後來是用這個先頂著)
一直到...
woocommerce_after_checkout_form

因此只要把 wp-content\plugins\jck_woo_deliveryslots\jck_woo_deliveryslots.php 裡面
// Checkout Fields
add_action( 'woocommerce_after_order_notes', array( &$this, 'wds_field_output' ) );
裡面的woocommerce_after_order_notes改掉成要對應的hook就可以了
所以我改成這樣
add_action( 'woocommerce_checkout_after_customer_details', array( &$this, 'wds_field_output' ) );

雖然可惜,事實上我要放的正好都不是這些常用位置...
但常用位置如何放置還是記錄一下

而我就繼續用訂單表格中我所要的運費位置 class="shipping" 去找我的答案,
不能用hook以後,有兩種思維方式,
一種是變更woocommerce裡面可以加hook的地方或直接在 class="shipping"裡面用html動手腳
第二種是變更Slots外掛,
想當然,既然是為了處理這個外掛,用第二種才比較合理

雖然不能輕鬆用hook去改變,但當初輸出html內容是使用echo,
於是我回到輸出內容的函式wds_field_output,
寫在輸出的html之前,利用 jQuery的append把位置調動了
/*更改位置 BEGIN*/
echo '';
echo '';
/*更改位置 END*/

當然如果原本就引入了jQuery的話不用加第一行,不過我的沒抓到jQuery應有的效果,只好多加上去了
卻造成.原本「配送到不同的地址?」控制顯示隱藏的核取方塊失效了
其js行為不起效果,於是我再搜尋「jquery」檢查一遍原始碼,
看到 wp-includes/js/jquery/jquery.js?ver=1.11.0
發覺WordPress裡面引用的應該是 http://code.jquery.com/jquery-1.11.0.min.js
1.11.0這個版本沒有我要的效果,我用的是 http://code.jquery.com/jquery-1.5.min.js
我換掉jQuery,不過...依然失效,
最後我把所有檔案還原回去...還是失效
唯獨漏掉了...jquery.js
討論時說了,先換回去原本版本吧
於是把版本換回去...
原來...WordPress 的 jQuery不能亂換版本...
亂換版本會出事,至少Woocommerce 會出事


原本想說同理可以做隱藏顯示,我的方法是加上onCLick動作

配合


但是
在Woocommerce 裡面
不想動 Woocommerce 所以作罷
另外一個問題是,其實舊版的jQuery也無法讓我做到這個效果
至此,在js方面先打住

參考資料:
WordPress的Hook機制與原理
文章標籤

Chaneswin 發表在 痞客邦 PIXNET 留言(0) 人氣()

找更多相關文章與討論