jquery Woocommerce结帐-如何使select 2和xhr更新一起工作?

igetnqfo  于 2023-01-25  发布在  jQuery
关注(0)|答案(1)|浏览(84)

我使用城市列表作为选择

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(
         '' => __( 'Select 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;
}

我还更新了结帐表单数据

add_action( 'wp_footer', 'awoohc_add_script_update_shipping_method' );
function awoohc_add_script_update_shipping_method() {
    if ( is_checkout() ) {
        ?>
        <script>
            jQuery(document).ready(function ($) {

                $(document.body).on('updated_checkout updated_shipping_method', function (event, xhr, data) {
                    
                    $('input[name^="shipping_method"]').on('change', function () {
                        
                        $('.woocommerce-billing-fields__field-wrapper').block({
                            message: null,
                            overlayCSS: {
                                background: '#fff',
                                'z-index': 1000000,
                                opacity: 0.3
                            }
                        });
                        $('select#billing_city').select2();     
                    });
                    var first_name = $('#billing_first_name').val(),                      
                        phone = $('#billing_phone').val(),
                        email = $('#billing_email').val(),
                        city = $('#billing_city').val(),                        
                        address_1 = $('#billing_address_1').val(),                                              

                    $(".woocommerce-billing-fields__field-wrapper").html(xhr.fragments[".woocommerce-billing-fields"]);
                    $('select#billing_city').select2(); /*THERE IS THE PROBLEM!!!!!*/   
                    $(".woocommerce-billing-fields__field-wrapper").find('input[name="billing_first_name"]').val(first_name);                  
                    $(".woocommerce-billing-fields__field-wrapper").find('input[name="billing_phone"]').val(phone);
                    $(".woocommerce-billing-fields__field-wrapper").find('input[name="billing_email"]').val(email);  
                    $(".woocommerce-billing-fields__field-wrapper").find('input[name="billing_city"]').val(city);  
                    $(".woocommerce-billing-fields__field-wrapper").find('input[name="billing_address_1"]').val(address_1);                                                 
                    $('.woocommerce-billing-fields__field-wrapper').unblock();                                  
                });
            });
        
        </script>
        <?php
    }
}

我注意到如果不粘贴select 2,问题出在哪里()中,select看起来像是简单的select,而不是select 2。但如果我尝试更改或删除地址,例如当它是一个错误的字母时,all表单开始更新,不会保存50%的新值,并在页面顶部显示另一个城市select,不允许更改任何内容。我测试了代码的许多部分,冲突就在这里-在购物车的select 2和xhr更新之间。如何修复它?我们需要地址更新和select 2

uxhixvfz

uxhixvfz1#

试试看

$('select#billing_city').selectWoo();

相关问题