I want to add google auto fill to the checkout forms

[wicara]

I have found some variations that I would like to work with the developer says add the following jquery

//Optional, restrict the autocomplete to addresses from Auckland, New Zealand. 
var auckland_bounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-37.14956343170602, 174.26479536132808),
  new google.maps.LatLng(-36.71045863529151, 175.25081831054683)
);

//Attach the autocomplete to the DOM element
var billing_autocomplete = new google.maps.places.Autocomplete($('#billing_address_1')[0], {
    bounds: auckland_bounds, //restrict the search area
    strictBounds: true,        
});

//Define what information we want back from the API
billing_autocomplete.setFields(['address_components']);

//Define a handler which fires when an address is chosen from the autocomplete
billing_autocomplete.addListener('place_changed', function() {

  var place = billing_autocomplete.getPlace();

  if (place.address_components) {

      //console.log(place.address_components)

      var street_number = place.address_components[0].short_name;
      var street_name = place.address_components[1].short_name
      var suburb = place.address_components[2].short_name;
      var city = place.address_components[3].short_name;
      var postcode = place.address_components[6].short_name;

      $('#billing_address_1').val(street_number + ' ' + street_name);
      $('#billing_address_2').val(suburb);
      $('#billing_city').val(city);
      $('#billing_postcode').val(postcode);

  }

});

Do I add this to the Jquery section in customizer

[ruenel]

Hello @wicara,

Thanks for writing in!

Yes the JS can be added in X > Theme Options > Custom JS section.

Hope this helps.

[wicara]

will the above format work as it does not seem to be working for me, it says not to add script tags so have I missed anything ?

[rad]

Hi @wicara,

It’s a generic instruction and you must make your code compatible to the platform it will be added. Example, in Wordpress platform, jquery function is named jQuery() instead if $(). And you must change all occurence of $ with jQuery, OR, wrap your code with this

jQuery ( function($) {



/* add your code here that still uses $() */




} );

Please do that before adding the code the Theme Options > JS

Thanks!