Блог

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

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

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

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->включает->>администратор->>>просмотры->>>>html-quick-edit-product.php>>>> на линии 195
2. Сохраните свое пользовательское поле. Для этого я подключился к действию «woocommerce_product_quick_edit_save». Этот крючок можно найти в woocommerce->включает в себя->>администратор->>>class-wc-admin-post-types.php>>> внутри функции «quick_edit_save» в строке 929

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

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

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

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

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

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

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

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