Как правильно поставить select2 на интерфейс?

При оформлении заказа мне нужно выпадающее меню CITIES. Я не использую поля страны и региона, поэтому они вообще не установлены. Чтобы сделать поле города выпадающим, а не текстовым, я использовал этот код.

add_filter( 'woocommerce_checkout_fields' , 'override_checkout_city_fields' );
function override_checkout_city_fields( $fields ) {
    // Define here in the array your desired cities (Here an example of cities)
    $option_cities = array(
         '' => __( 'Choose your city' ),
        'City1' => 'City1', 
        'City2' => 'City2',  
        );
    $fields['billing']['billing_city']['type'] = 'select';
    $fields['billing']['billing_city']['options'] = $option_cities;
    $fields['shipping']['shipping_city']['type'] = 'select';
    $fields['shipping']['shipping_city']['options'] = $option_cities;
    return $fields;
}

Меня устраивает. Но мне нужен не простой select, а select2. Я думал, что это уже включено в checkkout, но просто

jQuery('select#billing_city').select2();

не работает. Я попробовал этот известный фрагмент

function enqueue_select2_jquery() {
    wp_register_style( 'select2css', '//cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2.css', false, '1.0', 'all' );
    wp_register_script( 'select2', '//cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2.js', array( 'jquery' ), '1.0', true );
    wp_enqueue_style( 'select2css' );
    wp_enqueue_script( 'select2' );
}
add_action( 'admin_enqueue_scripts', 'enqueue_select2_jquery' );
function select2jquery_inline() {
    ?>
<style type = "text/css">
.select2-container {margin: 0 2px 0 2px;}
.tablenav.top #doaction, #doaction2, #post-query-submit {margin: 0px 4px 0 4px;}
</style>
<script type='text/javascript'>
jQuery(document).ready(function ($) {
    if ( $( 'select' ).length > 0 ) {
        $( 'select' ).select2();
        $( document.body ).on( "click", function() {
             $( 'select' ).select2({
                  theme: "classic"
             });
          });
    }
});
</script>
    <?php
 }
add_action( 'admin_head', 'select2jquery_inline' );

Тоже не помогло. Как правильно сделать мой выбор синим цветом с опцией поиска?

В вашем фрагменте используется admin_enqueue, который добавит на передний план не скрипт, а администратора. Кроме того, выберитеWoo уже поставлен в очередь WooCommerce, поэтому вы можете просто вызвать его с помощью jQuery.

— 19.03.2022 01:16

Я не знаю, почему jQuery('select#billing_city').select2(); не работает. Вручную не отключал, тема моя, плагинов очень мало. Значит, это должно работать только с добавлением класса?

— 19.03.2022 02:45

jquery wordpress woocommerce woocommerce-theming

18.03.2022 23:36

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Поскольку selectWoo, который является заменой WooCommerce для Select2, уже поставлен в очередь с WooCommerce, вы можете просто использовать wc_enqueue_js и вызывать его.

add_action( 'woocommerce_before_checkout_form', 'add_select2_to_city' );
function add_select2_to_city(){
    wc_enqueue_js( "$('select#billing_city').selectWoo();");
}

Добавьте это в свой functions.php.

19.03.2022 12:08