php - Add select2 javascript and css in Woocommerce variable subscription

Question

I am trying to add my select2 js library and css in Woocommerce variable subscriptions.

Its adding if I do view:source but my select box or dropdown doesnt convert as select2 dropdown .. which is working for other pages with same js and css using class mindesk_select2 .. Here is my code / try.

<?php

// Showing fields for variable subscriptions 
add_action('woocommerce_product_after_variable_attributes', 'show_WC_Product_Variable_Subscription_Variation_Custom_Fields', 10, 3);

// Saving fields for variable subscriptions 
add_action('woocommerce_save_product_variation', 'save_WC_Product_Variable_Subscription_Variation_Custom_Fields', 10, 2);


function show_WC_Product_Variable_Subscription_Variation_Custom_Fields($loop, $variation_data, $variation) {
    

    // Mindesk Licence
    $mindesk_license = get_post_meta($variation->ID, 'mindesk_license', true);
    woocommerce_wp_select([
        'id'       => "mindesk_license{$loop}",
        'name'     => "mindesk_license[{$loop}]",
        'wrapper_class' => 'product_custom_field form-row ',
        'class' => 'mindesk_select2',
        'label'    => __('Mindesk License', 'woocommerce'),
        'value'    => $mindesk_license,
        'options' => [
            '' => __('Select a value', 'woocommerce'),
            'fixed' => __('Fixed', 'woocommerce'),
            'floating' => __('Floating', 'woocommerce'),
            'network' => __('Network', 'woocommerce')
        ]
    ]);


    
}



function add_admin_scripts($hook) {

    global $post;

    if ($hook == 'post-new.php' || $hook == 'post.php') {
        if ('product' === $post->post_type) {

            wp_register_style('mindeskselect2csss', MINDESK_PLUGIN_URL . 'assets/css/select2.min.css');

            wp_enqueue_script('mindeskselect22', MINDESK_PLUGIN_URL . 'assets/js/select2.min.js', array('jquery'), null, true);

            wp_enqueue_style('mindeskselect2csss');
            //wp_enqueue_script('mindeskselect22');


            wp_register_style('mindeskwcvariablesubscriptionstyle', MINDESK_PLUGIN_URL . 'assets/css/custom.css');
            wp_enqueue_script('mindeskwcvariablesubscriptionscript', MINDESK_PLUGIN_URL . 'assets/js/custom.js', array('jquery'), null, true);


            wp_enqueue_style('mindeskwcvariablesubscriptionstyle');
        }
    }
}
add_action('admin_enqueue_scripts', 'add_admin_scripts', 10, 1);

As you can see i have enqued css and js files and trying to use mindesk_select2 and here is my custom.js file.

custom.js

jQuery(document).ready(function ($) {
  $(".mindesk_select2").select2({
    allowClear: true,
    placeholder: "",
  });
});

I have checked all the css and js are called and executed but my dropdown box doesnt work as select2 ...

I have also checked if any js console error there but there are no errors there as well..

Can someone guide me how can I achieve this from here. ..

Any guidance will be so appreciated.

Thanks

question from:https://stackoverflow.com/questions/66058479/add-select2-javascript-and-css-in-woocommerce-variable-subscription

Answer 1

Waitting for answers