【道勤網(wǎng)】- bmrsportswear.com 軟件視頻自學(xué)教程|免費(fèi)教程|自學(xué)電腦|3D教程|平面教程|影視動(dòng)畫(huà)教程|辦公教程|機(jī)械設(shè)計(jì)教程|網(wǎng)站設(shè)計(jì)教程！【道勤網(wǎng)】

標(biāo)題: 給WooCommerce變量產(chǎn)品添加屬于變量的自定義字段 [打印本頁(yè)]
作者: 論文    時(shí)間: 2024-4-8 20:52
標(biāo)題: 給WooCommerce變量產(chǎn)品添加屬于變量的自定義字段
WooCommerce二次開(kāi)發(fā)中，我們經(jīng)常需要根據(jù)業(yè)務(wù)需要，給產(chǎn)品添加自定義字段，如果需要為其每個(gè)變量（很多人喜歡稱(chēng)作SKU）各自添加自定義字段，以下這篇文章能教你如何實(shí)現(xiàn)。

(, 下載次數(shù): 19)
如上圖，這是一個(gè)可變產(chǎn)品下的一個(gè)變量，我為其添加了一個(gè)名為“New Custom Meta”的字段。同時(shí)這個(gè)字段框會(huì)出現(xiàn)在這個(gè)產(chǎn)品的所有變量下供店主編輯。WooCommerce默認(rèn)已經(jīng)為可變產(chǎn)品提供了價(jià)格、尺寸、重量、庫(kù)存、描述等一系列字段，但它仍然無(wú)法滿(mǎn)足所有要求，比如我的每個(gè)SKU都會(huì)有不同的材質(zhì)、保質(zhì)期等等，我就需要添加新的字段去描述它們。
首先添加如下代碼，這樣后臺(tái)產(chǎn)品變量的編輯欄就能出現(xiàn)上面圖片中的字段了，用到woocommerce_product_after_variable_attributes這個(gè)勾子。
  1. //add custome field for variations  - https://blog.brain1981.com
  2. add_action( 'woocommerce_product_after_variable_attributes', 'brain1981_add_custom_field_to_variations', 10, 100 );
  3. function brain1981_add_custom_field_to_variations( $loop, $variation_data, $variation ) {
  4.         $new_custom_meta = get_post_meta( $variation->ID, 'new_custom_meta', true );
  5.         woocommerce_wp_text_input( array(
  6.         'id' => 'new_custom_meta[' . $loop . ']',
  7.         'name' => 'new_custom_meta[' . $loop . ']',
  8.         'class' => 'short',
  9.         'label' => __( 'New Custom Meta', 'woocommerce' ),
  10.         'value' => $new_custom_meta
  11.         ) );
  12. }
復(fù)制代碼
可以看到前文的“woocommerce_wp_text_input”這個(gè)函數(shù)在這里仍然適用。那么woocommerce_wp_select、woocommerce_wp_textarea_input、 woocommerce_wp_checkbox等自然也都可以用在這里，就不贅述了。
通過(guò)woocommerce_save_product_variation這個(gè)勾子保存字段。
  1. //save this field for variations  - https://blog.brain1981.com
  2. add_action( 'woocommerce_save_product_variation', 'brain1091_save_variation_settings_fields', 10, 2 );
  3. function brain1091_save_variation_settings_fields( $variation_id, $loop ) {
  4.         $text_field = $_POST['new_custom_meta'][ $loop ];
  5.         if ( ! empty( $text_field ) ) {
  6.                 update_post_meta( $variation_id, 'new_custom_meta', esc_attr( $text_field ));
  7.         }
  8. }
復(fù)制代碼
把保存的字段放到變量的數(shù)組中，供前端調(diào)用
  1. //load this field for variations to frontend  - https://blog.brain1981.com
  2. add_filter( 'woocommerce_available_variation', 'brain1981_load_variation_settings_fields' );
  3. function brain1981_load_variation_settings_fields( $variation ) {     
  4.     $variation['new_custom_meta'] = get_post_meta( $variation[ 'variation_id' ], 'new_custom_meta', true );
  5.     return $variation;
  6. }
復(fù)制代碼
至此后端的工作就完成了，下面介紹前端如何調(diào)用這個(gè)字段。
通常，一個(gè)產(chǎn)品會(huì)有自己的product id，產(chǎn)品下的變量也會(huì)有自己的變量id，如果知道這個(gè)變量id，那么就和調(diào)用普通的自定義字段一樣就行了：
  1. echo get_post_meta( $variation_id, 'new_custom_meta', true );
復(fù)制代碼
但大部分情況下我們是不知道這個(gè)variation_id的，能調(diào)到變量的自定義字段關(guān)鍵就需要知道這個(gè)變量的variation_id。在WooCommerce的產(chǎn)品頁(yè)面上，我們可能需要遍歷當(dāng)前產(chǎn)品的每一個(gè)variation_id，更有可能需要找到當(dāng)前所選定的這個(gè)變量的variation_id。
這時(shí)候可以通過(guò)頁(yè)面上的一個(gè)隱藏input元素獲取到當(dāng)前變量的variation_id。這個(gè)隱藏元素就在產(chǎn)品詳情頁(yè)中，HTML在WooCommerce的默認(rèn)主題文件”/single-product/add-to-cart/variation-add-to-cart-button.php”中，前端可以這樣取值：
  1. $("input.variation_id").val()
復(fù)制代碼
要獲取當(dāng)前變量的new_custom_meta值，就需要一些前后端混寫(xiě)的代碼了：
  1. //load this field in current variations - https://blog.brain1981.com
  2. global $product;
  3. if ( $product->is_type('variable') ) {
  4.         $new_custom_meta =[]; //create an array to store new_custom_meta values
  5.         // Loop through variations data
  6.         foreach($product->get_available_variations() as $variation ) {
  7.                 $new_custom_meta[$variation['variation_id']] = $variation['new_custom_meta'];
  8.         }
  9.         ?>
  10.         <script>
  11.         var v_custom_meta= '';
  12.         $(function($) {
  13.                 var inputVID = 'input.variation_id';
  14.                 var jsonData = <?php echo json_encode($new_custom_meta); ?>;
  15.                 console.log("jsonData ",jsonData );//此JSON格式: {"1234":"value 1", "1235":"value 2", ...}
  16.                 $('input').change( function(){
  17.                         if( '' != $(inputVID).val() ) {
  18.                                 var vid = $(inputVID).val(); //variation ID
  19.                                 v_custom_meta = jsonData[vid];
  20.                                 console.log("v_custom_meta",v_custom_meta);
  21.                                 //do something to use this meta value...
  22.                         }
  23.                 });
  24.         });
  25.         </script>
  26.         <?php
  27. }
復(fù)制代碼
總結(jié)：基本思路還是很簡(jiǎn)單的，之所以這里前后端混寫(xiě)了，就是因?yàn)樾枰鶕?jù)用戶(hù)操作去讀取當(dāng)前變量的字段值。





歡迎光臨 【道勤網(wǎng)】- bmrsportswear.com 軟件視頻自學(xué)教程|免費(fèi)教程|自學(xué)電腦|3D教程|平面教程|影視動(dòng)畫(huà)教程|辦公教程|機(jī)械設(shè)計(jì)教程|網(wǎng)站設(shè)計(jì)教程！【道勤網(wǎng)】 (http://bmrsportswear.com/) Powered by Discuz! X3.4