Tag: WooCommerce

I am developing a plugin for shipping and I want to implement city/area dynamically. I have added the custom field and I want to populate the area field whenever the city is selected or changed. The area dropdown is fetched from a custom API using another action

Here is the jQuery code I am using. When the city is changed, the response shows the page is populated but like this

function cities_areas_settings() {
$text_domain = 'woocommerce';

global $woocommerce;

if (isset($_POST('liveCity'))) { 
    
    $towns = (1122 =>ABA, 1123 => IBADAN, 1124>oyo );
}
       
return array($towns);

}

add_action(‘wp_footer’, ‘custom_checkout_js_script’);
function custom_checkout_js_script() {
if( is_checkout() && ! is_wc_endpoint_url() ) :
// Initializing
$text_domain = ‘woocommerce’;
$karachi_areas = array( ” => __(‘Choose your area’, $text_domain) );

$areas = cities_areas_settings(); // Load settings



?><script language="javascript">
jQuery(function($) {
    var a = 'select(name="billing_city")',
        b = 'select(name="billing_area")',
        o = <?php echo json_encode($areas); ?>,
        s = $(b).html();

    // Utility function to fill dynamically the select field options
    function dynamicSelectOptions(opt) {

        var options = '';

        for (var i = 0; i < opt.length; i++) {

            console.log(opt.length)
            options += '<option value="' + opt(i) + '">' + opt(i) + '</option>';

        }
        $(o).html(options);

        // $.each( opt, function(key, value ){
        //     options += '<option value="'+key+'">'+value+'</option>';
        // });

    }

    // On Start (once DOM is loaded)
    if ($(a).val() != '') {
        console.log("testa");
        dynamicSelectOptions(o);
    }

    console.log($(a).val());

    // On billing city change live event
    $('form.woocommerce-checkout').on('change', a, function() {
        var test = $(this).val();;
        jQuery(document).ready(function($) {
            var data = {
                'action': 'my_action',
                'liveCity': test
            };

            jQuery.post(window.location, data, function(response) {
                //  console.log('Got this from the server: ' + response);
            });
        });


        var testing = dynamicSelectOptions(o);
        console.log(testing);

    });
});