Select2 for geoip_detect2_shortcode_country_select_wpcf7

Sure you can add it yourself. Just add a class to the tag and add the select2-functionality via JS. The select2-Documentation should be what you need.

Hello All,

I spent some time trying to get a handle on this and learnt how to do this after some trial & error.

1A. In case you are using Woocommerce, then reuse select2 provided by Woocommerce
Copy below code into your functions.php

function enqueue_select2_jquery() {
    $assets_path = str_replace( array( 'http:', 'https:' ), '', WC()->plugin_url() ) . '/assets/';
    wp_register_script( 'select2', $assets_path . 'js/select2/select2.js', array( 'jquery' ), '', true );
    wp_enqueue_script( 'select2' );
    wp_enqueue_style( 'select2', $assets_path . 'css/select2.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_select2_jquery' );

1B. In case you are NOT using Woocommerce, then you need to enable select2 on your website.
Copy below code into your functions.php

function enqueue_select2_jquery() {
    wp_register_style( 'select2css', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css', false, '1.0', 'all' );
    wp_register_script( 'select2', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js', array( 'jquery' ), '1.0', true );
    wp_enqueue_style( 'select2css' );
    wp_enqueue_script( 'select2' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_select2_jquery' );

2. Enable select2 on select fields by copying the below code into your custom.js file

jQuery(document).ready(function($){
// 27-10-2018 Select2 on CF7
 $('.wpcf7-geoip_detect2_countries').select2();
});

Voila! You go from:

To

Hope this helps anyone else trying to use select2 for Geoip fields

P.S. In case anyone has a better idea to implement this, please do let me know

Very good! Yes, this is what I meant. Welcome to the world of WordPress development ?? Using wp_enqueue_style without wp_register_style is enough. And I wouldn’t reuse the script from Woocommerce unless you are very sure you will never deactivate it (otherwise WC() will throw an function-does-not-exist-error).

Can I copy your text into https://github.com/yellowtree/wp-geoip-detect/wiki/API-Usage-Examples ?

Thank you @benjamin4! I am still a toddler in WordPress development. Your encouragement felt good.

Using wp_enqueue_style without wp_register_style is enough.

Is this what you meant?

function enqueue_select2_jquery() {
    $assets_path = str_replace( array( 'http:', 'https:' ), '', WC()->plugin_url() ) . '/assets/';
    wp_enqueue_script( 'select2', $assets_path . 'js/select2/select2.js', array( 'jquery' ), '', true );
    wp_enqueue_style( 'select2', $assets_path . 'css/select2.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_select2_jquery' );

And I wouldn’t reuse the script from Woocommerce unless you are very sure you will never deactivate it (otherwise WC() will throw an function-does-not-exist-error).

No. I intend to continue to use Woocommerce on my website and I would never deactivate this.

Can I copy your text into https://github.com/yellowtree/wp-geoip-detect/wiki/API-Usage-Examples ?

Of course! Please go ahead! I would feel honored in contributing!

I have posted it there and made some slight ameliorations:
– Using the minified version (.min) of the files to save some bytes
– putting the javascript also in PHP so that I don’t need to explain into which file to put it
– removing the optional params of wp_enqueue_script (version number is only needed when you update the file without change of the URL, which is not possible with CDNs anyway)
– Adding .geoip_detect2_countries in case someone is using the country select without CF7

@benjamin4,

Awesome! Thank you! I shall see how I can use your cleaned up code on my website.

– putting the javascript also in PHP so that I don’t need to explain into which file to put it

Could you please review your code? I am getting a ton of errors around the javascript when I am trying to execute your code.