在woocommerce站点的产品清单上添加快速编辑选项上的自定义产品字段
如何在woocommerce商店的产品列表快速编辑屏幕上添加自定义产品字段/s？
回答 1
Stack Overflow用户
发布于 2014-12-03 10:39:38
我不太确定这是否是最好的方法，但这对我很有用。
基本上，我的一般目标是为产品添加自定义字段，在这些有用的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上的第195行上。
- 保存自定义字段。为了实现这一点，我加入了'woocommerce_product_quick_edit_save'操作。这个钩子是在woocommerce->includes->admin->class-wc-admin-post-types.php上'quick_edit_save'函数中第929行中找到的。
前面的两个步骤完成了这个任务，它确实将值持久化，但是在通过快速编辑选项更新自定义字段之后，数据将持久化在后端，但不会填充到UI上的自定义字段中。所以我们需要第三步。
- 在产品列表列中添加自定义字段元数据，然后使用js提取出元数据，然后将其填充到自定义字段中。
我连接到'manage_product_posts_custom_column'操作以添加一个自定义HTML标记(div或其他什么)来保存我的自定义字段元数据。
然后，我使用javascript从元数据中提取数据并将其填充到自定义字段中。
步骤3只是WooCommerce如何完成此过程的一个副本。
为了便于参考，请看一下函数'render_product_columns' of woocommerce->includes->admin->class-wc-admin-post-types.php
还请看一看位于woocommerce->assets->js->admin的woocommerce->assets->js->admin
示例代码:请注意，下面的代码用于说明和指导目的，我的实际代码是相当长和复杂的。
步骤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
} );第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);第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);JS部分
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();
}
});
});确保将脚本排成队列
希望这对任何人都有帮助，我也不确定这是否是最好的方法，但是在检查WooCommerce源代码时，WooCommerce似乎没有提供一个方便的钩子来轻松地完成这项任务(至少还没有)。
如果你有一个比这更好的方法，请分享。
https://stackoverflow.com/questions/27262032
复制相似问题
腾讯云开发者
