使用select2的多个选择产品用于wordpress插件选项页面

时间:2019-05-11 08:09:19

标签: wordpress jquery-select2

我正在尝试使用select2实现多种选择产品。该列表使用了我之前做过的getproductsearch这个ajax操作,但我无法保存。我之前为post-metaproduct-category做过此功能,但是插件option page却失败了。我不确定自己在做什么错。

请帮助。

 class FeatureSale {
    private $feature_sale_options;

    public function __construct() {
        add_action( 'admin_menu', array( $this, 'feature_sale_add_plugin_page' ) );
        add_action( 'admin_init', array( $this, 'feature_sale_page_init' ) );
    }

    public function feature_sale_add_plugin_page() {
        add_submenu_page(
        'exclutips-settings',
            'Feature & Sale', // page_title
            'Feature & Sale', // menu_title
            'manage_options', // capability
            'feature-sale', // menu_slug
            array( $this, 'feature_sale_create_admin_page' ) // function
        );
    }

    public function feature_sale_create_admin_page() {
        $this->feature_sale_options = get_option( 'feature_sale_option_name' ); ?>

        <div class="wrap">
        <div class="catbox-area-admin" style="width: 500px;background: #fff;padding: 27px 50px;">
            <h2>Feature & Sale</h2>
            <p></p>
            <?php settings_errors(); ?>

            <form method="post" action="options.php">
                <?php
                    settings_fields( 'feature_sale_option_group' );
                    do_settings_sections( 'feature-sale-admin' );
                    submit_button();
                ?>
            </form>
        </div>
        </div>
    <?php }

    public function feature_sale_page_init() {
        register_setting(
            'feature_sale_option_group', // option_group
            'feature_sale_option_name', // option_name
            array( $this, 'feature_sale_sanitize' ) // sanitize_callback
        );

        add_settings_section(
            'feature_sale_setting_section', // id
            '', // title
            array( $this, 'feature_sale_section_info' ), // callback
            'feature-sale-admin' // page
        );

        add_settings_field(
            'vpm_sale_product', // id
            'VPM Sale Product', // title
            array( $this, 'vpm_sale_product_callback' ), // callback
            'feature-sale-admin', // page
            'feature_sale_setting_section' // section
        );

        add_settings_field(
            'vpm_featured_product', // id
            'VPM Featured Product', // title
            array( $this, 'vpm_featured_product_callback' ), // callback
            'feature-sale-admin', // page
            'feature_sale_setting_section' // section
        );
    }

    public function feature_sale_sanitize($input) {
        $sanitary_values = array();
        if ( isset( $input['vpm_sale_product'] ) ) {
            $sanitary_values['vpm_sale_product'] = $input['vpm_sale_product'];
        }

        if ( isset( $input['vpm_featured_product'] ) ) {
            $sanitary_values['vpm_featured_product'] = $input['vpm_featured_product'];
        }

        return $sanitary_values;
    }

    public function feature_sale_section_info() {

    }

    //Output the HTML for the metabox.

    public function vpm_sale_product_callback() {
        global $post;
        // Nonce field to validate form request came from current site
        wp_nonce_field( basename( __FILE__ ), 'vpm_sale_product_nonce' );

        $html = '';

        // always array because we have added [] to our <select> name attribute
        $feature_sale_options = get_option( 'feature_sale_option_name' ); // Array of All Options
        $vpm_sale_product = $feature_sale_options['vpm_sale_product'];

        $html .= '<p><select id="vpm_sale_product" name="vpm_sale_product[]" multiple="multiple" style="width:99%;max-width:25em;">';

        if( $vpm_sale_product ) {
            foreach( $vpm_sale_product as $post_id ) {
                $title = get_the_title( $post_id );
                // if the post title is too long, truncate it and add "..." at the end
                $title = ( mb_strlen( $title ) > 50 ) ? mb_substr( $title, 0, 49 ) . '...' : $title;
                $html .=  '<option value="' . $post_id . '" selected="selected">' . $title . '</option>';
            }
        }
        $html .= '</select></p>';

        echo $html;
        //==========================================
    }


     //* Output the HTML for the metabox.

    public function vpm_featured_product_callback() {
        global $post;
        // Nonce field to validate form request came from current site
        wp_nonce_field( basename( __FILE__ ), 'vpm_featured_product_nonce' );

        $html = '';

        // always array because we have added [] to our <select> name attribute
        $feature_sale_options = get_option( 'feature_sale_option_name' ); // Array of All Options
        $vpm_featured_product = $feature_sale_options['vpm_featured_product'];

        $html .= '<p><select id="vpm_featured_product" name="vpm_featured_product[]" multiple="multiple" style="width:99%;max-width:25em;">';

        if( $vpm_featured_product ) {
            foreach( $vpm_featured_product as $post_id ) {
                $title = get_the_title( $post_id );
                // if the post title is too long, truncate it and add "..." at the end
                $title = ( mb_strlen( $title ) > 50 ) ? mb_substr( $title, 0, 49 ) . '...' : $title;
                $html .=  '<option value="' . $post_id . '" selected="selected">' . $title . '</option>';
            }
        }
        $html .= '</select></p>';

        echo $html;
        echo $vpm_featured_product;
        //==========================================
        ?>
        <script>
        (function ($) {
            'use strict';
        $(function () {
            //--------------------------------------------------------------------------
            // multiple select with AJAX search
            $('#vpm_featured_product,#vpm_sale_product').select2({
                ajax: {
                        url: ajaxurl, // AJAX URL is predefined in WordPress admin
                        dataType: 'json',
                        delay: 250, // delay in ms while typing when to perform a AJAX search
                        data: function (params) {
                            return {
                                q: params.term, // search query
                                action: 'getproductsearch' // AJAX action for admin-ajax.php
                            };
                        },
                        processResults: function( data ) {
                        var options = [];
                        if ( data ) {

                            // data is the array of arrays, and each of them contains ID and the Label of the option
                            $.each( data, function( index, text ) { // do not forget that "index" is just auto incremented value
                                options.push( { id: text[0], text: text[1]  } );
                            });

                        }
                        return {
                            results: options
                        };
                    },
                    cache: true
                },
                minimumInputLength: 3 // the minimum of symbols to input before perform a search
            });

            //----------------------------------------------------------------------------------------
        });
    })(jQuery);
    </script>   
        <?php 
    }

}
if ( is_admin() )
    $feature_sale = new FeatureSale();

1 个答案:

答案 0 :(得分:1)

问题是这些select标签未使用正确的name值:

<select id="vpm_sale_product" name="vpm_sale_product[]"...>
<select id="vpm_featured_product" name="vpm_featured_product[]"...>

正确的name值是:(基于您的register_setting()通话)

<select id="vpm_sale_product" name="feature_sale_option_name[vpm_sale_product][]"...>
<select id="vpm_featured_product" name="feature_sale_option_name[vpm_featured_product][]"...>

尽管纠正了上述问题后,表单数据将被正确保存,但传递给add_submenu_page()的第五个参数(即菜单/页面信息)应与传递给add_settings_section()的第四个参数匹配,并且add_settings_field(),以及传递给do_settings_sections()的那个。在您的add_submenu_page()调用中,菜单/页面提示为feature-sale,但使用其他三个功能,将其设置为feature-sale-admin

建议使用wp_nonce_field(),但在您的情况下,由于您要提交到wp-admin/options.php,因此不必要。当然,除非您要在WordPress保存选项之前进行检查。但是即使如此,我仍然相信一个随机数领域是好的。 :)