Autocomplete Using the Google Places API

Christal
Tourist
4 0 2

Hi everybody!
Please, help me cope with autocomplete. already have spent so much time and there’s no sense.
Here is some code:
<script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
function initAutocomplete() {
var items = document.getElementsByTagName("input")[6];
var autocomplete = new google.maps.places.Autocomplete(items);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXX&libraries=places&callback=initAuto..." async defer></script>


<input type="text" id="bta-field-city" name="properties[CITY]">


Doesn't work only for shopify. I don't understand what's the matter. 
Begging for ur help!

 

 

0 Likes
Akshay_V
Shopify Partner
411 30 52

@Christal 

Thank you for sharing concern.
Can you tell why you want to add this code? some details in brief.

Akshay Vaghasiya
Shopify Expert | Skype: akshayvaghasiya84
 - Like and Mark as an Accepted Solution if reply helpful
 - Feel free to contact me on akshayvaghasiya@lavitastic.com regarding any help
0 Likes
Christal
Tourist
4 0 2

@Akshay_V 

Hi)Wanna customers to immediately be offered this options when entering their address. To save time when filling out forms. And it looks cool.Many users like this, coz it's useful.

0 Likes
Akshay_V
Shopify Partner
411 30 52

@Christal 

Ok thank you for providing information to me.

You can paste this code into theme by following below guideline.

1. Go to Admin
2. Select themes from left sidebar
3. Click on action button on Live theme and select edit code from dropdown menu
4. Select theme.liquid file from layout 
5. Find </head> and paste code above it.
6. Click on Save button.


This steps help you to resolve your queries. Make sure don't change any line of code into theme.liquid file otherwise your site will not works properly. However, this script will not works on checkout page because Shopify is only giving access to checkout page for Shopify plus plan user. If you want to add this script on checkout page then you have to add this script into advance script section of store admin. 

Akshay Vaghasiya
Shopify Expert | Skype: akshayvaghasiya84
 - Like and Mark as an Accepted Solution if reply helpful
 - Feel free to contact me on akshayvaghasiya@lavitastic.com regarding any help
0 Likes
aantoine
Tourist
8 0 0

The answer above does not seem to work with Simple theme. I have put this code above <head> in theme.liquid (I replaced XXXX with my API key).

<script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function initAutocomplete() {
var items = document.getElementsByTagName("input")[6];
var autocomplete = new google.maps.places.Autocomplete(items);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=XXXX&libraries=places&callback==initAutocomplete" async defer></script>

 

It seems that this code makes the nested menu not working anymore.

What is wrong?

Also is it possible to use this strategy to allows auto-complete in the checkout process (for shipping information) for countries for which Shopify has not allowed auto-completion (such as South Korea)?

Thank you

0 Likes
Christal
Tourist
4 0 2

Hi! yes, for me this also doesn`t work.
I made another way. Have theme Debut, but maybe will work for other themes.
I put autocomplete code at theme.liquid template before closed body tag (I only limited autocomplete script to work at prod.page and if in cart there are no items and restrict to show only USA location, you can skip this). Of course added jquery in <head> . And for me works great.


Just try to add your code before </body>. 

 

{%- if template == 'product' and cart.item_count == 0 -%}
  <script>
  var placeSearch, autocomplete;
  var componentForm = { 
  street_number: 'short_name',
  route: 'long_name', 
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  postal_code: 'short_name'
};
  function initAutocomplete() {
  autocomplete = new google.maps.places.Autocomplete(
      document.getElementById('autocomplete'), {types: ['geocode']});
  autocomplete.setComponentRestrictions(
            {'country': ['us']});
  autocomplete.setFields(['address_component']);
  autocomplete.addListener('place_changed', fillInAddress);
}

function fillInAddress() {
 
var place = autocomplete.getPlace();

for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}
 </script>
 <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&libraries=places&callback=initAutocomplete" async defer></script>  
  {%- endif -%} 
  </body>

 

 

 

aantoine
Tourist
8 0 0

Thank you very much for your reply. I am still not clear about how to create the search box.

On the theme.liquid file, between <head> and </head> I have added

<head>
...

<script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>

And before the end of the body I have addded (I deleted your IF condition and the restriction to US only places):

<script>
var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
postal_code: 'short_name'
};
function initAutocomplete() {
autocomplete = new google.maps.places.Autocomplete(
document.getElementById('autocomplete'), {types: ['geocode']});
autocomplete.setFields(['address_component']);
autocomplete.addListener('place_changed', fillInAddress);
}

function fillInAddress() {

var place = autocomplete.getPlace();

for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}

for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=places&callback=initAutocomplete" async defer></script>

 Now, say I want to have the input box with autocompletion on the cart page, should I write in the cart.liquid file? And what should I write?

Thanks a ton for your help!

0 Likes
Christal
Tourist
4 0 2

Glad to help you))

This code I`ve written is for many fields. Better show in screenshot


Screenshot_1.pngScreenshot_2.png
People in first line write address and it automatically fills in other fields.


If u wanna just one text field then change this

 

<script>
var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
postal_code: 'short_name'
};
function initAutocomplete() {
autocomplete = new google.maps.places.Autocomplete(
document.getElementById('autocomplete'), {types: ['geocode']});
autocomplete.setFields(['address_component']);
autocomplete.addListener('place_changed', fillInAddress);
}

function fillInAddress() {

var place = autocomplete.getPlace();

for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}

for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
</script>

 

 to this code 

 

<script>
 function initAutocomplete() {
  var input = document.getElementById('autocomplete');
  new google.maps.places.Autocomplete(input);
}
</script>

 

and in 'cart-template.liquid' create a text input (but I don`t sure how it names in your theme, in my it`s Section 'cart-template'. I also have Template 'cart', but this template only contains Section 'cart-template', so exactly this section I need to edit, not Template 'cart').

 

<input id="autocomplete" type="text" placeholder="Enter your adress">

 

For placeholder u can put any text u wanna. And you can paste any id, the main thing it should be the same like in script (var input = document.getElementById('autocomplete'))

And I suggest to add if statement in theme.liquid in order to your script works only for cart-template page.

 

{%- if section == 'cart-template'  -%}
<script>
 function initAutocomplete() {
  var input = document.getElementById('autocomplete');
  new google.maps.places.Autocomplete(input);
}
</script>
 <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=places&callback=initAutocomplete" async defer></script>  
  {%- endif -%} 
  </body>

 

 

 

 

Akshay_V
Shopify Partner
411 30 52

@aantoine 

Thank you for sharing your concern. Well, you can not add this script on your checkout page except if you have Shopify plus store.

If you want to add it on other pages where you are using address field then that case you can google autocomplete API.

Akshay Vaghasiya
Shopify Expert | Skype: akshayvaghasiya84
 - Like and Mark as an Accepted Solution if reply helpful
 - Feel free to contact me on akshayvaghasiya@lavitastic.com regarding any help
aantoine
Tourist
8 0 0

@Christal  Thank you very much for your help! Still trying to get it work.

@Akshay_VThank you. Could I (1) add fields for the address in the sign up process ? (2) use this code to have Google Auto-complete work on the sign-up process? I have read somewhere that it was not possible to add fields fro the address on the sign-up because any extra field information would just get registered as a "note" on the customer profile. Is that true?

Thank you!

 

 

0 Likes