将woocommerce中的自定义管理员图像上传元数据字段添加到产品类别

时间：2016-11-11 16:28:08

标签： woocommerce hook-woocommerce

我正在使用自定义主题，并希望在woocommerce管理部分添加自定义上传字段。特别是类别部分。我想添加另一个字段，就像存储信息的缩略图上传一样。 Image of illustrates what i want to achieve

raunak-gupta中的{p> Adding custom field to product category in WooCommerce分享了我前进的方式，并将其制作出来。 HELP ???

添加了uploader.js 

jQuery(document).ready( function($){

    var mediaUploader_woo;

    $('#upload-button-woo').on('click',function(e) {
        e.preventDefault();
        if( mediaUploader_woo ){
            mediaUploader_woo.open();
            return;
        }

        mediaUploader_woo = wp.media.frames.file_frame = wp.media({
            title: 'Choose an Image',
            button: { text: 'Choose Image'},
            multiple: false
        });

        mediaUploader_woo.on('select', function(){
            attachment = mediaUploader_woo.state().get('selection').first().toJSON();
            $('#meta-woo').val(attachment.url);
        });

        mediaUploader_woo.open();
    });    

});

我在functions.php中调用了媒体上传器

function my_admin_scripts() {
    wp_enqueue_media();

    wp_register_script( 'wina_classic-uadmin-js', get_template_directory_uri() . '/js/uploader.js', array('jquery','media-upload','thickbox'), '20130115', true );
    wp_enqueue_script( 'wina_classic-uadmin-js');
}

add_action('admin_print_scripts', 'my_admin_scripts');
瞧，那么瞧.. 

/*-------------------------------------------------------------------
    Add Custom metabox for woocommerce Category page
---------------------------------------------------------------------*/

function product_cat_add_video_field_rj() {

    ?>
    <div class="form-field">
        <label for="term_meta[video_link]"><?php _e( 'Video Link', 'flatsome' ); ?></label>
        <input type="text" name="term_meta[video_link]" id="term_meta[video_link]" value="">
        <p class="description"><?php _e( 'Enter a Video Link','flatsome' ); ?></p>
    </div>
<?php
}
function product_cat_edit_video_field_rj($term) {


    $t_id = $term->term_id;

    $term_meta = get_option( "taxonomy_$t_id" ); ?>
    <tr class="form-field">
    <th scope="row" valign="top"><label for="term_meta[video_link]"><?php _e( 'Video Link', 'flatsome' ); ?></label></th>
        <td>            
            <input type="text" name="term_meta[video_link]" id="meta-woo" value="<?php echo esc_attr( $term_meta['video_link'] ) ? esc_attr( $term_meta['video_link'] ) : ''; ?>" style="margin-left: 0px; margin-right: 0px; width: 50%;" />
            <input type="button" class="button button-secondary" value="Upload Image" id="upload-button-woo" />
            <p class="description"><?php _e( 'Enter a Video Link','flatsome' ); ?></p>
        </td>
    </tr>
<?php
}

// this action use for add field in add form of taxonomy 
add_action( 'product_cat_add_form_fields', 'product_cat_add_video_field_rj', 10, 2 );
// this action use for add field in edit form of taxonomy 
add_action( 'product_cat_edit_form_fields', 'product_cat_edit_video_field_rj', 10, 2 );

function product_cat_video_link_save( $term_id ) {
    if ( isset( $_POST['term_meta'] ) ) {
        $t_id = $term_id;
        $term_meta = get_option( "taxonomy_$t_id" );
        $cat_keys = array_keys( $_POST['term_meta'] );
        foreach ( $cat_keys as $key ) {
            if ( isset ( $_POST['term_meta'][$key] ) ) {
                $term_meta[$key] = $_POST['term_meta'][$key];
            }
        }
       update_option( "taxonomy_$t_id", $term_meta );
    }
}


// this action use for save field value of edit form of taxonomy 
add_action( 'edited_product_cat', 'product_cat_video_link_save', 10, 2 );  
// this action use for save field value of add form of taxonomy 
add_action( 'create_product_cat', 'product_cat_video_link_save', 10, 2 );

PS：此代码不会在文本字段中存储或复制已保存的数据。

1 个答案:

答案 0 :(得分：0)

几个小时后，我想出了下面的代码

将功能添加到functions.php 

var vectorOfStrings:Vector.<String> = Vector.<String>([["a","b","c"],["d","e","f"]]);
// this works and Your Vector contains only Strings so OK.
trace("");
trace("length of the Vector = " + vectorOfStrings.length);
trace("vectorOfStrings.toString() = " + vectorOfStrings.toString());
trace("vectorOfStrings[0] = " + vectorOfStrings[0]);
trace("vectorOfStrings[1] = " + vectorOfStrings[1]);

var vectorOfArrays:Vector.<Array> = Vector.<Array>([["a","b","c"],[1,2,3]]);
// this works but this is tricky an total nonsense
// use the Array Class instead!
trace("\n   NEVER DO THIS! Use the Array Class instead!");
trace(" NONSENSE!");
trace("length of the Vector = " + vectorOfArrays.length);
trace("vectorOfArrays.toString() = " + vectorOfArrays.toString());
trace("vectorOfArrays[0] = " + vectorOfArrays[0]);
trace("vectorOfArrays[1] = " + vectorOfArrays[1]);

在js / uploader.js中添加媒体上传器Javascript 

//call for woocommerce custom admin image code    
require get_template_directory() . '/inc/woo-meta-category.php';

/*--------------------------------------------------------------------------------------
    Uploader JS
----------------------------------------------------------------------------------------*/
function my_admin_scripts() {
    wp_enqueue_media();

    wp_register_script( 'wina_classic-uadmin-js', get_template_directory_uri() . '/js/uploader.js', 
                                        array('jquery','media-upload','thickbox'), '20130115', true );
    wp_enqueue_script( 'wina_classic-uadmin-js');
}

add_action('admin_print_scripts', 'my_admin_scripts');

最后添加/inc/woo-meta-category.php文件，其代码如下

jQuery(document).ready( function($){

    var mediaUploader_woo;

    $('#upload-button-woo').on('click',function(e) {
        e.preventDefault();
        if( mediaUploader_woo ){
            mediaUploader_woo.open();
            return;
        }

        mediaUploader_woo = wp.media.frames.file_frame = wp.media({
            title: 'Choose an Image',
            button: { text: 'Choose Image'},
            multiple: false
        });

        mediaUploader_woo.on('select', function(){
            attachment = mediaUploader_woo.state().get('selection').first().toJSON();
            $('#category-meta-woo').val(attachment.url);
            $('#category-header-preview').attr('src', ''+ attachment.url + '' );
        });

        mediaUploader_woo.open();
    });    

});

在前端

<?php

/*-------------------------------------------------------------------
    Add Custom metabox for woocommerce Category page
---------------------------------------------------------------------*/

function product_cat_add_cat_head_field_rj() {  ?>
    <div class="form-field">
        <label for="term_meta[cat_head_link]"><?php _e( 'Category Page Image', 'wina-classic' ); ?></label>
        <input type="text" name="term_meta[cat_head_link]" id="term_meta[cat_head_link]" value="">
        <p class="description"><?php _e( 'Upload Category Page Image','wina-classic' ); ?></p>
    </div>
<?php }

function product_cat_edit_cat_head_field_rj($term) {
    $t_id = $term->term_id; $term_meta = get_option( "taxonomy_$t_id" ); ?>

    <tr class="form-field">
    <th scope="row" valign="top"><label for="term_meta[cat_head_link]"><?php _e( 'Category Page Image', 'wina-classic' ); ?></label></th>
        <td>
            <img src="<?php echo esc_attr( $term_meta['cat_head_link'] ) ? esc_attr( $term_meta['cat_head_link'] ) : ''; ?>" height="60" width="120" id="category-header-preview" />
            <input type="hidden" name="term_meta[cat_head_link]" id="category-meta-woo" value="<?php echo esc_attr( $term_meta['cat_head_link'] ) ? esc_attr( $term_meta['cat_head_link'] ) : ''; ?>" style="margin-left: 0px; margin-right: 0px; width: 50%;" />
            <input type="button" class="button button-secondary" value="Upload Image" id="upload-button-woo" />
            <p class="description"><?php _e( 'Upload Category Page Image','wina-classic' ); ?></p>
        </td>
    </tr>
<?php
}

// this action use for add field in add form of taxonomy 
add_action( 'product_cat_add_form_fields', 'product_cat_add_cat_head_field_rj', 10, 2 );
// this action use for add field in edit form of taxonomy 
add_action( 'product_cat_edit_form_fields', 'product_cat_edit_cat_head_field_rj', 10, 2 );

function product_cat_cat_head_link_save( $term_id ) {
    if ( isset( $_POST['term_meta'] ) ) {
        $t_id = $term_id;
        $term_meta = get_option( "taxonomy_$t_id" );
        $cat_keys = array_keys( $_POST['term_meta'] );
        foreach ( $cat_keys as $key ) {
            if ( isset ( $_POST['term_meta'][$key] ) ) {
                $term_meta[$key] = $_POST['term_meta'][$key];
            }
        }
       update_option( "taxonomy_$t_id", $term_meta );
    }
}

// this action use for save field value of edit form of taxonomy 
add_action( 'edited_product_cat', 'product_cat_cat_head_link_save', 10, 2 );  
// this action use for save field value of add form of taxonomy 
add_action( 'create_product_cat', 'product_cat_cat_head_link_save', 10, 2 );
相关问题
最新问题