在 Woocommerce 变量订阅中添加 select2 javascript 和 css

Question

我正在尝试在 Woocommerce 变量订阅.

中添加我的 select2 js 库和 css

它添加如果我做 view:source 但我的 select 框或下拉列表不会转换为 select2 下拉列表.. 这适用于具有相同 js 和 [=42 的其他页面=] 使用 class mindesk_select2 .. 这是我的代码/尝试。

<?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);

如您所见，我已经查询了 css 和 js 文件并尝试使用 mindesk_select2，这是我的 custom.js 文件。

custom.js

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

我已经检查了所有 css 和 js 都被调用和执行了，但是我的下拉框不起作用，因为 select2 ...

我也检查了那里是否有任何js控制台错误但那里也没有错误..

有人可以指导我如何从这里实现这一目标。 ..

任何指导将不胜感激。

谢谢

Answer 1

在元素中添加 CSS class wc-enhanced-select 将为字段启用 select2。它已经在 WooCommerce 核心中得到处理。

在 Woocommerce 变量订阅中添加 select2 javascript 和 css

Add select2 javascript and css in Woocommerce variable subscription

php

jquery-select2

woocommerce

woocommerce-subscriptions