Was working perfect, not now

Robbie,

I just checked your site. Our plugin appear to be implemented properly. The javascript has been enqueued, and entering data in the address field is triggering AJAX calls to Google.

The problem is that Google is responding with an empty data set. They are responding with the callback as usual, but the data is just empty.

Here is a comparison between your website and our website when I inspect the AJAX call via Chrome dev tools.

Our site:

/**/_xdc_._53hner && _xdc_._53hner( [0, [["2222 West Bell Road, Phoenix, AZ, USA", null, ["street_address", "geocode"],…],…]] )
0:0
1:[["2222 West Bell Road, Phoenix, AZ, USA", null, ["street_address", "geocode"],…],…]
 0:["2222 West Bell Road, Phoenix, AZ, USA", null, ["street_address", "geocode"],…]
 1:["22220 North 27th Avenue, Phoenix, AZ, USA", null, ["street_address", "geocode"],…]
 2:["22222 North 23rd Avenue, Phoenix, AZ, USA", null, ["street_address", "geocode"],…]
 3:["22227 North 31st Avenue, Phoenix, AZ, USA", null, ["street_address", "geocode"],…]
 4:["2222 West Deer Valley Road, Phoenix, AZ, USA", null, ["street_address", "geocode"],…]

Your site:

/**/_xdc_._hr4wn1 && _xdc_._hr4wn1( [4] )
0:4

After further investigation, I was looking at the AJAX requests and their query strings, comparing ours vs yours. One difference I noticed is the Country query string is set to US on our site, but it was empty on your site.

The reason is because your checkout is limited to Australia. Normally, I’ve seen that limiting WooCommerce to one country does not cause any issues, but the country field is simply hidden, but has the correct value.

That is not the case with your site. If you inspect your Country hidden field, you will see an empty “value” attribute. I manually set that value to “AU” and your address autocomplete started working.

It looks like you have a custom checkout experience, either with a plugin or from your theme. You may want to look at that and figure out how to get your hidden country field to have a value of “AU”.

If all else fails, you can just implement a jQuery solution…

(function($) {
  $(document).ready(function(){
    $('#billing_country, #shipping_country').val('AU');
  });
})(jQuery);

H.

• This reply was modified 6 years, 2 months ago by chechcompany.

Hey! This is what my current code looks like in html

(function($) {

    // Prevent Chrome autocomplete dropdown on the address line 1 fields
    $(document).on('focus click tap', 'input#billing_address_1, input#shipping_address_1', function() {
        $(this).attr("autocomplete", 'new-password');
    });

})(jQuery);

var RpCheckoutAutocomplete = RpCheckoutAutocomplete || {};
var RpCheckoutAutocomplete_shipping = RpCheckoutAutocomplete_shipping || {};
RpCheckoutAutocomplete.event = {};
RpCheckoutAutocomplete_shipping.event = {};
RpCheckoutAutocomplete.method = {
    placeSearch: "",
    IdSeparator: "",
    autocomplete : "",
    streetNumber : "",
    formFields : {
        'billing_address_1': '',
        'billing_address_2': '',
        'billing_city': '',
        'billing_state': '',
        'billing_postcode': '',
        'billing_country' : ''
    },
    formFieldsValue : {
        'billing_address_1': '',
        'billing_address_2': '',
        'billing_city': '',
        'billing_state': '',
        'billing_postcode': '',
        'billing_country' : ''
    },
    component_form : "",

    initialize: function(){
        this.getIdSeparator();
        this.initFormFields();

        this.autocomplete = new google.maps.places.Autocomplete(
            (document.getElementById('billing_address_1')),
            {
                types: ['address']
            });
        google.maps.event.addListener(this.autocomplete, 'place_changed', function( event ) {
            RpCheckoutAutocomplete.method.fillInAddress()
        });
        var billing_address = document.getElementById("billing_address_1");
        if(billing_address != null){
            billing_address.addEventListener("focus", function( event ) {
                RpCheckoutAutocomplete.method.setAutocompleteCountry()
            }, true);
        } 

        var billing_country = document.getElementById("billing_country");
        if(billing_country != null){
            billing_country.addEventListener("change", function( event ) {
                RpCheckoutAutocomplete.method.setAutocompleteCountry()
            }, true);
        }
       

    },
    getIdSeparator : function() {
        if (!document.getElementById('billing_address_1')) {
            this.IdSeparator = "_";
            return "_";
        }
        this.IdSeparator = ":";
        return ":";
    },
    initFormFields: function ()
    {
        console.log('-------------');
        for (var field in this.formFields) {
            this.formFields[field] = (field);
        }
        this.component_form = {};
        this.component_form_standard =
        {
            'country': ['billing_country', 'long_name'],
            'street_number': ['billing_address_1', 'short_name'],
            'route': ['billing_address_1', 'long_name'],
            'locality': ['billing_city', 'long_name'],
            'postal_town': ['billing_city', 'long_name'],
            'sublocality_level_1': ['billing_city', 'long_name'],
            'administrative_area_level_2': ['billing_city', 'long_name'],
            'administrative_area_level_3': ['billing_city', 'long_name'],
            'administrative_area_level_1': ['billing_state', 'short_name'],
            'postal_code': ['billing_postcode', 'short_name']
        };
        this.component_form_alt =
        {
            'country': ['billing_country', 'long_name'],
            'street_number': ['billing_address_1', 'short_name'],
            'route': ['billing_address_1', 'long_name'],
            'locality': ['billing_city', 'long_name'],
            'postal_town': ['billing_city', 'long_name'],
            'sublocality_level_1': ['billing_city', 'long_name'],
            'administrative_area_level_2': ['billing_state', 'long_name'],
            'postal_code': ['billing_postcode', 'short_name']
        };
        this.alt_countries = ['ES'];
    },
    
    fillInAddress : function () {
        this.clearFormValues();
        var place = this.autocomplete.getPlace();
        this.resetForm();
        console.log(place.address_components);
        var current_country = document.getElementById("billing_country").value;
        if(this.alt_countries.includes(current_country)){
            this.component_form = this.component_form_alt;
        }else{
            this.component_form = this.component_form_standard;
        }
        for (var f in this.component_form) {
            loop1:
            for (var field in place.address_components) {
                var types = place.address_components[field].types;
                for (var t in types) {

                    if(f == types[t]) {
                        var field_id = this.component_form[f][0];
                        var prop = this.component_form[f][1];
                        // If it's empty so far, then fill it
                        if(this.formFieldsValue[field_id] == '') {
                            if(place.address_components[field].hasOwnProperty(prop)){
                                this.formFieldsValue[field_id] = place.address_components[field][prop];
                                console.log(field_id + " = " + place.address_components[field][prop]);
                                break loop1;
                            }
                        }
                    }

                }
            }
        }
        this.streetNumber = place.name;
        var street_addr_type = place.types.indexOf('street_address');
        if(street_addr_type == -1 && typeof precise_address_alert !== 'undefined' && precise_address_alert != 'disabled') {
            alert(precise_address_alert);
        }
        
        this.appendStreetNumber();
        this.fillForm();
        
        //update checkout
        jQuery("#billing_state").trigger("change");
        jQuery(document.body).trigger("update_checkout");
        if(typeof  FireCheckout !== 'undefined')
        {
            checkout.update(checkout.urls.billing_address);
        }
    },

    clearFormValues: function ()
    {
        for (var f in this.formFieldsValue) {
            this.formFieldsValue[f] = '';
        }
    },
    appendStreetNumber : function ()
    {

        if(this.streetNumber != '')
        {
            this.formFieldsValue['billing_address_1'] =  this.streetNumber
        }
    },
    fillForm : function()
    {
        for (var f in this.formFieldsValue) {
            if(f == 'billing_country' )
            {
                this.selectRegion( f,this.formFieldsValue[f]);
            }
            else
            {
                if(document.getElementById((f)) === null){
                    continue;
                }
                else
                {
                    var autoc_value = this.formFieldsValue[f];
                    if(f == 'billing_state' && jQuery('select#' + f).length > 0 && jQuery('select#' + f + ' option[value="' + autoc_value +'"]').length == 0) {
                        // State dropdown without a matching value... try the text
                        autoc_value = jQuery('select#' + f + ' option').filter(function () { return jQuery(this).html() == autoc_value; }).val()
                    }
                    document.getElementById((f)).value = autoc_value;
                    jQuery('#'+f).trigger('input');
                }
              
            }
        } 
    },
    selectRegion:function (id,regionText)
    {
        if(document.getElementById((id)) == null){
            return false;
        } 
        var el = document.getElementById((id));
        if(el.tagName == 'select') {
            for(var i=0; i<el.options.length; i++) {
                if ( el.options[i].text == regionText ) {
                    el.selectedIndex = i;
                    break;
                }
            }
        }
    },
    resetForm :function ()
    {
        if(document.getElementById(('billing_address_2')) !== null){
            document.getElementById(('billing_address_2')).value = '';
        }   
    },

    setAutocompleteCountry : function () {
    	
        if(document.getElementById('billing_country') === null){
            country = 'US';
        }
        else
        {
            var country = document.getElementById('billing_country').value;
        }
        this.autocomplete.setComponentRestrictions({
            'country': country
        });
    }

}

RpCheckoutAutocomplete_shipping.method = {
    placeSearch: "",
    IdSeparator: "",
    autocomplete : "",
    streetNumber : "",
    formFields : {
        'shipping_address_1': '',
        'shipping_address_2': '',
        'shipping_city': '',
        'shipping_state': '',
        'shipping_postcode': '',
        'shipping_country' : ''
    },
    formFieldsValue : {
        'shipping_address_1': '',
        'shipping_address_2': '',
        'shipping_city': '',
        'shipping_state': '',
        'shipping_postcode': '',
        'shipping_country' : ''
    },
    component_form : "",

    initialize: function(){
        this.getIdSeparator();
        this.initFormFields();

        this.autocomplete = new google.maps.places.Autocomplete(
            (document.getElementById('shipping_address_1')),
            {
                types: ['address']
            });
        google.maps.event.addListener(this.autocomplete, 'place_changed', function( event ) {
            RpCheckoutAutocomplete_shipping.method.fillInAddress()
        });
        var shipping_address = document.getElementById("shipping_address_1");
        if(shipping_address != null){
            shipping_address.addEventListener("focus", function( event ) {
                RpCheckoutAutocomplete_shipping.method.setAutocompleteCountry()
            }, true);
        } 

        var shipping_country = document.getElementById("shipping_country");
        if(shipping_country != null){
            shipping_country.addEventListener("change", function( event ) {
                RpCheckoutAutocomplete_shipping.method.setAutocompleteCountry()
            }, true);
        }
       

    },
    getIdSeparator : function() {
        if (!document.getElementById('shipping_address_1')) {
            this.IdSeparator = "_";
            return "_";
        }
        this.IdSeparator = ":";
        return ":";
    },
    initFormFields: function ()
    {
        console.log('-------------');
        for (var field in this.formFields) {
            this.formFields[field] = (field);
        }
        this.component_form = {};
        this.component_form_standard =
        {
            'country': ['shipping_country', 'long_name'],
            'street_number': ['shipping_address_1', 'short_name'],
            'route': ['shipping_address_1', 'long_name'],
            'locality': ['shipping_city', 'long_name'],
            'postal_town': ['shipping_city', 'long_name'],
            'sublocality_level_1': ['shipping_city', 'long_name'],
            'administrative_area_level_2': ['shipping_city', 'long_name'],
            'administrative_area_level_3': ['shipping_city', 'long_name'],
            'administrative_area_level_1': ['shipping_state', 'short_name'],
            'postal_code': ['shipping_postcode', 'short_name']
        };
        this.component_form_alt =
        {
            'country': ['shipping_country', 'long_name'],
            'street_number': ['shipping_address_1', 'short_name'],
            'route': ['shipping_address_1', 'long_name'],
            'locality': ['shipping_city', 'long_name'],
            'postal_town': ['shipping_city', 'long_name'],
            'sublocality_level_1': ['shipping_city', 'long_name'],
            'administrative_area_level_2': ['shipping_state', 'long_name'],
            'postal_code': ['billing_postcode', 'short_name']
        };
        this.alt_countries = ['ES'];
    },
    
    fillInAddress : function () {
        this.clearFormValues();
        var place = this.autocomplete.getPlace();
        this.resetForm();
        console.log(place.address_components);
        var current_country = document.getElementById("shipping_country").value;
        if(this.alt_countries.includes(current_country)){
            this.component_form = this.component_form_alt;
        }else{
            this.component_form = this.component_form_standard;
        }
        for (var f in this.component_form) {
            loop1:
            for (var field in place.address_components) {
                var types = place.address_components[field].types;
                for (var t in types) {

                    if(f == types[t]) {
                        var field_id = this.component_form[f][0];
                        var prop = this.component_form[f][1];
                        // If it's empty so far, then fill it
                        if(this.formFieldsValue[field_id] == '') {
                            if(place.address_components[field].hasOwnProperty(prop)){
                                this.formFieldsValue[field_id] = place.address_components[field][prop];
                                console.log(field_id + " = " + place.address_components[field][prop]);
                                break loop1;
                            }
                        }
                    }

                }
            }
        }
        this.streetNumber = place.name;

        if(place.types.indexOf('street_address') == -1 && typeof precise_address_alert !== 'undefined' && precise_address_alert != 'disabled') {
            alert(precise_address_alert);
        }

        this.appendStreetNumber();
        this.fillForm();
        
        
        //update checkout
        jQuery("#shipping_state").trigger("change");
        jQuery(document.body).trigger("update_checkout");
        if(typeof  FireCheckout !== 'undefined')
        {
            checkout.update(checkout.urls.shipping_address);
        }
    },

    clearFormValues: function ()
    {
        for (var f in this.formFieldsValue) {
            this.formFieldsValue[f] = '';
        }
    },
    appendStreetNumber : function ()
    {
        if(this.streetNumber != '')
        {
            this.formFieldsValue['shipping_address_1'] =  this.streetNumber;
        }
    },
    fillForm : function()
    {
        for (var f in this.formFieldsValue) {
            if(f == 'shipping_country' )
            {
                this.selectRegion( f,this.formFieldsValue[f]);
            }
            else
            {
                if(document.getElementById((f)) === null){
                    continue;
                }
                else
                {
                    var autoc_value = this.formFieldsValue[f];
                    if(f == 'shipping_state' && jQuery('select#' + f).length > 0 && jQuery('select#' + f + ' option[value="' + autoc_value +'"]').length == 0) {
                        // State dropdown without a matching value... try the text
                        autoc_value = jQuery('select#' + f + ' option').filter(function () { return jQuery(this).html() == autoc_value; }).val()
                    }
                    document.getElementById((f)).value = autoc_value;
                    jQuery('#'+f).trigger('input');
                }
              
            }
        } 
    },
    selectRegion:function (id,regionText)
    {
        if(document.getElementById((id)) == null){
            return false;
        } 
        var el = document.getElementById((id));
        if(el.tagName == 'select') {
            for(var i=0; i<el.options.length; i++) {
                if ( el.options[i].text == regionText ) {
                    el.selectedIndex = i;
                    break;
                }
            }
        }
    },
    resetForm :function ()
    {
        if(document.getElementById(('shipping_address_2')) !== null){
            document.getElementById(('shipping_address_2')).value = '';
        }   
    },

    setAutocompleteCountry : function () {
    	
        if(document.getElementById('shipping_country') === null){
            country = 'US';
        }
        else
        {
            var country = document.getElementById('shipping_country').value;
        }
        this.autocomplete.setComponentRestrictions({
            'country': country
        });
    }

}

window.addEventListener('load', function(){
    if(!(document.getElementById('billing_address_1') === null))
        RpCheckoutAutocomplete.method.initialize();
    if(!(document.getElementById('shipping_address_1') === null))
        RpCheckoutAutocomplete_shipping.method.initialize();
});

if(!(document.getElementById('billing_address_1') === null)){
    var billaddr = document.getElementById('billing_address_1');
    google.maps.event.addDomListener(billaddr, 'keydown', function(e) { 
        if (e.keyCode == 13) { 
            e.preventDefault(); 
        }
    }); 
}

if(!(document.getElementById('shipping_address_1') === null)){
    var shipaddr = document.getElementById('shipping_address_1');
    google.maps.event.addDomListener(shipaddr, 'keydown', function(e) { 
        if (e.keyCode == 13) { 
            e.preventDefault(); 
        }
    }); 
}

• This reply was modified 6 years, 2 months ago by chechcompany.

Yes, but I’m not suggesting that you change the plugin’s javascript code, because then you won’t be able to update it without losing your changes. You should be able to implement this code from your theme (assuming you’re using a child theme).

Thanks man! works a treat:)

One more thing, Is there any way I can customise the font of the drop down menu

Anyway I can get rid of the ‘powered by google’ or even just make it greyscale?

Thanks so much!

Hey, when I did the check to see if it worked, it only worked on FireFox. Safari and Chrome do not recognise it. I am so confused. I used the Jquery solution please help me

Yes, you can style it with CSS using .pac-container{}

Does your site have caching that needs to be cleared for you to see the changes in not logged in browsers?

Absolutely stumped here mate, only works on Firefox regardless whether im logged in or not to my admin account. Would you consider checking the code for me please?

Thanks

Your checkout address autocomplete is working fine for me in Chrome. Maybe you need to clear your browser cache?