![的快速编辑]( "的快速编辑")
本文介绍了在 woocommerce 网站的产品列表上的快速编辑选项上添加自定义产品字段的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何在 woocommerce 商店的产品列表的快速编辑屏幕上添加自定义产品字段?
解决方案
我不确定这是否是最好的方法，但它对我很有用
基本上，我的总体目标是为产品添加自定义字段，在这些有用的 tuts 的帮助下，我设法做到了(将自定义字段添加到单个产品页面).
http://www.remicorson.com/mastering-woocommerce-products-custom-fields/http://www.remicorson.com/woocommerce-custom-fields-for-variations/
我建议在继续之前先检查这些链接.
现在，我想做的是将这些自定义字段添加到产品列表的快速添加选项中.
这就是资源稀缺的地方.
基本上我就是这样做的.
将您的自定义字段(html 表单)添加到快速编辑选项.我使用 'woocommerce_product_quick_edit_end' 操作来完成此操作.此钩子位于 woocommerce->includes->admin->views->html-quick-edit-product.php 上的 line 195
保存您的自定义字段.我使用 'woocommerce_product_quick_edit_save' 操作来完成此操作.这个钩子可以在 woocommerce->includes->admin->class-wc-admin-post-types.php 中的 'quick_edit_save' 函数内找到 行第929话
前面的 2 个步骤可以解决问题，它确实保留了值，但是在通过快速编辑选项更新自定义字段后，数据会保留在后端，但不会填充到 UI 上的自定义字段.这就是我们需要第三步的原因.
- 在产品列表栏内添加自定义字段元数据，然后使用js提取元数据然后填充到自定义字段
我使用 'manage_product_posts_custom_column' 操作来添加自定义 HTML 标签(div 或其他)来保存我的自定义字段元数据
然后我使用javascript从元数据中提取数据并将其填充到自定义字段中
第 3 步只是 WooCommerce 如何执行此过程的副本.
参考woocommerce->includes->admin->class-wc-admin-post-types.php的'render_product_columns'函数作为参考/p>
另请查看位于 woocommerce->assets->js->admin
的 quick-edit.js示例代码:请注意，以下代码仅用于说明和指导目的，我的实际代码相当长且复杂.
第 1 步:
add_action( 'woocommerce_product_quick_edit_end', function(){/*笔记:看一下text field的名字，'_custom_field_demo'，就是自定义字段的名字，基本上就是一个post meta文本字段的值为空，是故意的*/?><div class="custom_field_demo"><label class="alignleft"><div class="title"><?php _e('自定义字段演示', 'woocommerce');?></div><input type="text" name="_custom_field_demo" class="text" placeholder="<?php _e('Custom Field Demo', 'woocommerce'); ?>"值="">
<?php});
第 2 步:
add_action('woocommerce_product_quick_edit_save', function($product){/*笔记:$_REQUEST['_custom_field_demo'] ->我们在上面添加的自定义字段仅在适当的产品类型(简单等)的快速编辑选项上保存自定义字段自定义字段只是后元*/if ( $product->is_type('simple') || $product->is_type('external') ) {$post_id = $product->id;如果 ( isset( $_REQUEST['_custom_field_demo'] ) ) {$customFieldDemo = trim(esc_attr( $_REQUEST['_custom_field_demo'] ));//在这里做卫生和验证update_post_meta( $post_id, '_custom_field_demo', wc_clean( $customFieldDemo ) );}}}, 10, 1);
第 3 步:
add_action('manage_product_posts_custom_column', function($column,$post_id){/*笔记:99 只是我的强迫症，我只想确保在 WooCommerce 之后执行此回调*/开关 ( $column ) {案例名称":?><div class="hidden custom_field_demo_inline" id="custom_field_demo_inline_<?php echo $post_id; ?>"><div id="_custom_field_demo"><?php echo get_post_meta($post_id,'_custom_field_demo',true);?></div>
<?php休息;默认 :休息;}}, 99, 2);
JS部分
jQuery(function(){jQuery('#the-list').on('click', '.editinline', function(){/*** 提取元数据并将其作为自定义字段表单的值*/inlineEditPost.revert();var post_id = jQuery(this).closest('tr').attr('id');post_id = post_id.replace("post-", "");var $cfd_inline_data = jQuery('#custom_field_demo_inline_' + post_id),$wc_inline_data = jQuery('#woocommerce_inline_' + post_id);jQuery('input[name="_custom_field_demo"]', '.inline-edit-row').val($cfd_inline_data.find("#_custom_field_demo").text());/*** 只显示适当类型产品的自定义字段(简单)*/var product_type = $wc_inline_data.find('.product_type').text();if (product_type=='simple' || product_type=='external') {jQuery('.custom_field_demo', '.inline-edit-row').show();} 别的 {jQuery('.custom_field_demo', '.inline-edit-row').hide();}});});
确保将脚本入队
再次希望这对任何人有帮助，我不确定这是否是最好的方法，但在检查 WooCommerce 来源后，似乎 WooCommerce没有提供方便的钩子来轻松完成这项任务(至少目前还没有)
如果您有比这更好的方法，请分享.
How can I add custom product field/s on quick edit screen on the product listing of a woocommerce store?
解决方案
I am not really sure if this is the best way to do it, but it works great for me
Basically my general goal is to add custom fields for a product, I managed to do it (Adding custom fields to the single product pages) with the help of these useful tuts.
http://www.remicorson.com/mastering-woocommerce-products-custom-fields/http://www.remicorson.com/woocommerce-custom-fields-for-variations/
I recommend checking those links first before proceeding.
Now, what I wanted to do is to add those custom fields to the quick add option on the product listing.
That's where the resource get scarce.
Basically this is how I did it.
Add your custom field (the html forms) to the quick edit options.I hooked into the 'woocommerce_product_quick_edit_end' action to accomplish this.This hook is found on woocommerce->includes->admin->views->html-quick-edit-product.php on line 195
Save your custom field.I hooked into the 'woocommerce_product_quick_edit_save' action to accomplish this.This hook is found on woocommerce->includes->admin->class-wc-admin-post-types.php inside the 'quick_edit_save' function on line 929
The previous 2 steps does the trick, it does persist the values, however after updating the custom field via the quick edit option, the data is persisted on the backend, but is not populated to the custom field on the UI. That's why we need the 3rd step.
- Add the custom field meta data inside the product listing column, then use js to extract the metadata out then populate it to the custom field
I hooked into the 'manage_product_posts_custom_column' action to add a custom HTML tags (div or whatever) to hold my custom field metadata
Then I used javascript to extract the data out from the meta data and populate it into the custom fields
Step 3 is just a copy of how WooCommerce does this process.
For referrence, take a look at function 'render_product_columns' of woocommerce->includes->admin->class-wc-admin-post-types.php
Also take a look at quick-edit.js located at woocommerce->assets->js->admin
Example Code:Note that the code below is used for illustration and guide purposes, my actual code is quite long and complex.
Step 1:
add_action( 'woocommerce_product_quick_edit_end', function(){
/*
Notes:
Take a look at the name of the text field, '_custom_field_demo', that is the name of the custom field, basically its just a post meta
The value of the text field is blank, it is intentional
*/
?>
<div class="custom_field_demo">
<label class="alignleft">
<div class="title"><?php _e('Custom Field Demo', 'woocommerce' ); ?></div>
<input type="text" name="_custom_field_demo" class="text" placeholder="<?php _e( 'Custom Field Demo', 'woocommerce' ); ?>" value="">
</label>
</div>
<?php
} );
Step 2:
add_action('woocommerce_product_quick_edit_save', function($product){
/*
Notes:
$_REQUEST['_custom_field_demo'] -> the custom field we added above
Only save custom fields on quick edit option on appropriate product types (simple, etc..)
Custom fields are just post meta
*/
if ( $product->is_type('simple') || $product->is_type('external') ) {
$post_id = $product->id;
if ( isset( $_REQUEST['_custom_field_demo'] ) ) {
$customFieldDemo = trim(esc_attr( $_REQUEST['_custom_field_demo'] ));
// Do sanitation and Validation here
update_post_meta( $post_id, '_custom_field_demo', wc_clean( $customFieldDemo ) );
}
}
}, 10, 1);
Step 3:
add_action( 'manage_product_posts_custom_column', function($column,$post_id){
/*
Notes:
The 99 is just my OCD in action, I just want to make sure this callback gets executed after WooCommerce's
*/
switch ( $column ) {
case 'name' :
?>
<div class="hidden custom_field_demo_inline" id="custom_field_demo_inline_<?php echo $post_id; ?>">
<div id="_custom_field_demo"><?php echo get_post_meta($post_id,'_custom_field_demo',true); ?></div>
</div>
<?php
break;
default :
break;
}
}, 99, 2);
The JS part
jQuery(function(){
jQuery('#the-list').on('click', '.editinline', function(){
/**
* Extract metadata and put it as the value for the custom field form
*/
inlineEditPost.revert();
var post_id = jQuery(this).closest('tr').attr('id');
post_id = post_id.replace("post-", "");
var $cfd_inline_data = jQuery('#custom_field_demo_inline_' + post_id),
$wc_inline_data = jQuery('#woocommerce_inline_' + post_id );
jQuery('input[name="_custom_field_demo"]', '.inline-edit-row').val($cfd_inline_data.find("#_custom_field_demo").text());
/**
* Only show custom field for appropriate types of products (simple)
*/
var product_type = $wc_inline_data.find('.product_type').text();
if (product_type=='simple' || product_type=='external') {
jQuery('.custom_field_demo', '.inline-edit-row').show();
} else {
jQuery('.custom_field_demo', '.inline-edit-row').hide();
}
});
});
Make sure to enqueue the script
Hope this helps anyone, again, I am not sure if this is the best way to do it, but upon examining WooCommerce source, it seems WooCommercedoesn't provide a convenient hook to accomplish this task with ease (at least not yet)
If you have a better approach than this please share.
这篇关于在 woocommerce 网站的产品列表上的快速编辑选项上添加自定义产品字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！