How to add a dropdown list with a search option to the Woocommerce Checkout page-CodePudding

Please help: I want to add a dropdown list of our marketers on the checkout page of our Woocommerce site. How can I change my current code to: 1) Add a search option, where someone can either start typing the name or city for a quick selection and 2) to return the value and not the keys? Currently, the output on our order form is: My Marketer: mariaMarais instead of My Marketer: Maria Marais - Natal.

Also, I need to add about 200 marketers, will the code work like this or is it too bulky?

    // add marketer list

//* Add select field to the checkout page
add_action('woocommerce_before_order_notes', 'wps_add_select_checkout_field');
function wps_add_select_checkout_field( $checkout ) {

  echo '<br><br>';

  woocommerce_form_field( 'myquestion', array(
      'type'          => 'select',
      'class'         => array( 'wps-drop' ),
      'label'         => __( 'Please select your Argilla marketer.' ),
      'required'      => true,
      'options'       => array(
          'headoffice'   => __( 'Head Office', 'wps' ),
          'mariaMarais' => __( 'Maria Marais - Natal', 'wps' )
      )
 ),

  $checkout->get_value( 'myquestion' ));

}

//* Update the order meta with field value
 add_action('woocommerce_checkout_update_order_meta', 'wps_select_checkout_field_update_order_meta');
 function wps_select_checkout_field_update_order_meta( $order_id ) {

   if ($_POST['myquestion']) update_post_meta( $order_id, 'myquestion', esc_attr($_POST['myquestion']));

 }

 //* Display field value on the order edition page
add_action( 'woocommerce_admin_order_data_after_billing_address', 'wps_select_checkout_field_display_admin_order_meta', 10, 1 );
function wps_select_checkout_field_display_admin_order_meta($order){

  echo '<p><strong>'.__('Found by').':</strong> ' . get_post_meta( $order->id, 'myquestion', true ) . '</p>';

}

//* Add selection field value to emails
add_filter('woocommerce_email_order_meta_keys', 'wps_select_order_meta_keys');
function wps_select_order_meta_keys( $keys ) {

  $keys['My Marketer:'] = 'myquestion';
  return $keys;

}

CodePudding user response：

This will add select2 (selectWoo) to your dropdown. Select2 is already enqueued on the checkout page as selectWoo.

//* Add select field to the checkout page
add_action('woocommerce_before_order_notes', 'dd_add_select_two_checkout_field');
function dd_add_select_two_checkout_field( $checkout ) {
    woocommerce_form_field( 'myquestion', array(
        'type'          => 'select',
        'class'         => array( 'select2-wrapper' ),
        'label'         => __( 'Please select your Argilla marketer.' ),
        'required'      => true,
        'input_class'   => array( 'add-select2' ),
        'options'       => array( // added extra for effect.
            'headoffice'    => __( 'Head Office', 'wps' ),
            'mariaMarais'   => __( 'Maria Marais - Natal', 'wps' ),
            '7headoffice'   => __( 'Head Office', 'wps' ),
            '2mariaMarais'  => __( 'Maria Marais - Natal', 'wps' ),
            '2headoffice'   => __( 'Head Office', 'wps' ),
            '4mariaMarais'  => __( 'Maria Marais - Natal', 'wps' ),
            '4headoffice'   => __( 'Head Office', 'wps' ),
            '6mariaMarais'  => __( 'Maria Marais - Natal', 'wps' ),
            '6headoffice'   => __( 'Head Office', 'wps' ),
            '8mariaMarais'  => __( 'Maria Marais - Natal', 'wps' ),
        )
    ),
    $checkout->get_value( 'myquestion' ));
    wc_enqueue_js( "$( '.add-select2' ).selectWoo(); ");
}