Добавить настраиваемое поле продукта в опции быстрого редактирования в списке товаров на сайте woocommerce

Question

Как я могу добавить пользовательские поля продукта на экране быстрого редактирования в списке товаров в магазине WooCommerce?

Answer 1

Я не совсем уверен, что это лучший способ сделать это, но он прекрасно работает для меня

По сути, моя общая цель - добавить настраиваемые поля для продукта, мне удалось это сделать (добавление настраиваемых полей на отдельные страницы продукта) с помощью этих полезных элементов.

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', чтобы выполнить это. Этот хук находится в строке woocommerce->includes->admin->views->html-quick-edit-product.php в строке 195

2. Сохраните свое настраиваемое поле. Я подключился к действию 'woocommerce_product_quick_edit_save', чтобы выполнить это. Этот хук находится в woocommerce->includes->admin->class-wc-admin-post-types.php внутри функции 'quick_edit_save' в строке 929

Предыдущие 2 шага делают свое дело, они сохраняют значения, однако после обновления настраиваемого поля с помощью опции быстрого редактирования данные сохраняются в бэкэнде, но не заполняются в настраиваемое поле в пользовательском интерфейсе. Вот почему нам нужен третий шаг.

3. Добавьте метаданные настраиваемого поля в столбец списка продуктов, затем используйте js для извлечения метаданных и заполнения их в настраиваемом поле.

Я подключился к действию manage_product_posts_custom_column, чтобы добавить собственные теги HTML (div или что-либо еще) для хранения метаданных моего настраиваемого поля.

Затем я использовал JavaScript, чтобы извлечь данные из метаданных и заполнить их в пользовательских полях.

Шаг 3 является лишь копией того, как WooCommerce выполняет этот процесс.

Для справки взгляните на функцию render_product_columns woocommerce->includes->admin->class-wc-admin-post-types.php

Также взгляните на quick-edit.js, расположенный по адресу 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 не предоставляет удобного хука для легкого выполнения этой задачи (по крайней мере, пока)

Если у вас есть лучший подход, чем этот, пожалуйста, поделитесь.