Измените порядок стран в полях стран WooCommerce Checkout, сохраняя синхронизацию состояний

Проблема
Я работаю над настройкой страницы оформления заказа WooCommerce, меняя порядок стран в раскрывающихся полях billing_country и shipping_country. Я добился этого, используя фильтр woocommerce_checkout_fields для изменения параметров полей.

Однако после внесения этих настроек я столкнулся с проблемой, из-за которой поле billing_state не обновляется правильно при изменении поля billing_country. Параметры штата/провинции остаются неизменными независимо от выбранной страны.

Текущий код (Предыдущий пост Stackoverflow)
Вот код, который я использую для изменения порядка стран и применения функции Select2 (selectWoo):

// Reorder and customize the country dropdowns
add_filter('woocommerce_checkout_fields', 'reorder_checkout_country_dropdowns');
function reorder_checkout_country_dropdowns($fields)
{
    $countries_array = array_merge(
        array(
            'DE' => 'Germany',
            'AT' => 'Austria',
            'CH' => 'Switzerland',
            '-' => '------------',
        ),
        WC()->countries->get_allowed_countries()
    );

    $fields['billing']['billing_country']['type'] = $fields['shipping']['shipping_country']['type'] = 'select';
    $fields['billing']['billing_country']['options'] = $fields['shipping']['shipping_country']['options'] = $countries_array;

    return $fields;
}

// Enqueue JavaScript to apply Select2 functionality
add_action('woocommerce_checkout_init', 'enable_back_selectWoo_on_countries_dropdowns');
function enable_back_selectWoo_on_countries_dropdowns()
{
    wc_enqueue_js("$('#billing_country,#shipping_country').selectWoo();");
}

Попытки решения
Этот код меняет порядок стран в раскрывающихся списках и применяет функциональность Select2 (selectWoo). Однако это не решает проблему, связанную с тем, что поле billing_state не обновляется правильно при изменении billing_country.

Я пробовал различные подходы, такие как добавление прослушивателя событий в поле billing_country и соответствующее обновление поля billing_state, но мне не удалось найти решение, которое работало бы стабильно.

Вопрос
Как я могу гарантировать, что поле billing_state обновляется с правильными параметрами штата/провинции при изменении поля billing_country, даже после настройки раскрывающегося списка страны?

Пример изображения, демонстрирующий проблему

Как вы можете видеть на изображении выше, когда в качестве страны выставления счета при оформлении заказа WooCommerce выбрана «Австрия — Австрия», в поле выбора штата неправильно отображаются штаты/провинции для «Германии» вместо ожидаемых штатов/провинций для Австрии. .

Проблема не возникает, когда я закомментирую вторую строку add_filter('woocommerce_checkout_fields', 'reorder_checkout_country_dropdowns');

Вы проверили, как на самом деле выглядит $countries_array после слияния массива?

CBroe 04.04.2024 10:42

Спасибо за ваш комментарий. $countries_array выглядит правильно, выводится так, как задумано. Проблема, с которой я столкнулся, связана с функциональностью внешнего интерфейса JavaScript, которая должна обновлять поле billing_state при изменении billing_country. Несмотря на то, что раскрывающийся список стран отображается правильно, поле штата/провинции не обновляется соответствующим образом.

Philipp Mochine 04.04.2024 10:57

«он выводит по назначению» - если под этим вы имеете в виду, что отображаемое поле выбора показывает названия стран так, как предполагалось... это не то, что я спрашивал. Пожалуйста, проверьте, что на самом деле содержит этот массив.

CBroe 04.04.2024 11:02

@CBroe посмотрите, это содержимое $countries_array после слияния массива snipboard.io/kuMUq4.jpg

Philipp Mochine 04.04.2024 11:06

Это выглядит нормально. Действительно ли проблема связана с этим измененным массивом - или она связана с тем, что вы добавили (?) функциональность select2/selectWoo к этому, которая раньше не применялась к этим полям?

CBroe 04.04.2024 11:16

Да, проблема связана с модифицированным массивом. Изменение массива приводит к отключению WooCommerce функции select2. В моем предыдущем посте мне помогли, как снова активировать select2. Однако теперь я изо всех сил пытаюсь активировать select2 для поля состояния выставления счета в области оформления заказа. Обычно select2 обновляет штаты одновременно с изменением стран.

Philipp Mochine 04.04.2024 11:28

«Изменение массива приводит к отключению WooCommerce функции select2». - не уверен, какой бы это имело смысл, если бы изменился только порядок ценностей страны? Вы уверены, что случайно не удалили что-то еще, что $fields содержалось ранее?

CBroe 04.04.2024 11:37

@CBroe, ты видишь мой код, я на 100% уверен, что больше ничего не удалял. Я думаю, что при изменении порядка что-то меняется внутри. Без понятия. Но, как видите, я получил ответ

Philipp Mochine 04.04.2024 11:44
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
8
130
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Замените весь свой код следующим, чтобы обеспечить синхронизацию состояний страны при смене страны:

// Reorder and customize the country dropdowns
add_filter( 'woocommerce_checkout_fields', 'reorder_checkout_country_dropdowns' );
function reorder_checkout_country_dropdowns( $fields ) {
    // Merge sorted countries, with unsorted ones
    $countries_array = array_merge( 
        array(
            'DE' => 'Germany',
            'AT' => 'Austria',
            'CH' => 'Switzerland',
            '-'  => '------------',
        ),
        WC()->countries->get_allowed_countries(), 
    );

    // Change field type from "country" to "select"
    $fields['billing']['billing_country']['type'] = $fields['shipping']['shipping_country']['type'] = 'select';
    // Set sorted countries options
    $fields['billing']['billing_country']['options'] = $fields['shipping']['shipping_country']['options'] = $countries_array;
    // Set correct input class for country field
    $fields['billing']['billing_country']['input_class'] = $fields['shipping']['shipping_country']['input_class'] = ['country_to_state country_select'];
    
    return $fields;
}

Протестировано и работает.

JavaScript больше не нужен.

Другие вопросы по теме