在woocommerce网站的产品列表上的快速编辑选项中添加自定义产品字段

Question

如何在woocommerce商店的产品列表中的快速编辑屏幕上添加自定义产品字段？

Answer 1

我不确定这是否是最好的方法,但它对我来说很有用

基本上我的总体目标是为产品添加自定义字段,我设法在这些有用的tuts的帮助下(将自定义字段添加到单个产品页面).

http://www.remicorson.com/mastering-woocommerce-products-custom-fields/ http://www.remicorson.com/woocommerce-custom-fields-for-variations/

我建议在继续之前先检查这些链接.

现在,我想要做的是将这些自定义字段添加到产品列表中的快速添加选项.

这就是资源稀缺的地方.

基本上这就是我做的.

1. 将自定义字段(html表单)添加到快速编辑选项.我迷上了'woocommerce_product_quick_edit_end'动作来实现这一目标.这个钩子可以在第195行的woocommerce-> includes-> admin-> views-> html-quick-edit-product.php找到

2. 保存自定义字段.我迷上了'woocommerce_product_quick_edit_save'动作来实现这一目标.这个钩子可以在第929行的'quick_edit_save'函数中的woocommerce-> includes-> admin-> class-wc-admin-post-types.php中找到

前面的两个步骤可以解决问题,它会保留值,但是在通过快速编辑选项更新自定义字段后,数据会保留在后端,但不会填充到UI上的自定义字段.这就是为什么我们需要第三步.

3. 在产品列表列中添加自定义字段元数据,然后使用js提取元数据,然后将其填充到自定义字段

我迷上了'manage_product_posts_custom_column'动作来添加自定义HTML标签(div或其他)以保存我的自定义字段元数据

然后我使用javascript从元数据中提取数据并将其填充到自定义字段中

第3步只是WooCommerce如何完成此过程的副本.

对于referrence,看看功能'render_product_columns'的woocommerce->包括- >管理- >类-WC-管理-后types.php

另请查看位于woocommerce-> assets-> js-> admin的quick-edit.js

示例代码:请注意,下面的代码用于说明和指导目的,我的实际代码非常冗长和复杂.

步骤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没有提供方便的钩子来轻松完成这项任务(至少还没有)

如果你有比这更好的方法,请分享.