Shopify Question posted in
The Shopify help center can be found here.

Postal_town not working for autocomplete – Shopify

Trying to get this code to work, but “postal_town” doesn’t seem to work for some reason. Anyone?

“postal_town” is very common to use in Sweden as it equals city.

In order to get the autocomplete-function to work, this is key 🙂

I’ve tried to add it but for this code, its just not working.
The code is to be inputed in Shopify, which is the reason for some parts of the code.

if (window.location.href.indexOf('checkout') > -1) {
    window.onload = function() {

        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = "https://maps.googleapis.com/maps/api/js?key=TO-BE-REPLACED-WITH-API&libraries=places";
        script.async = "true";
        script.defer = "defer";
        document.body.appendChild(script);

        setTimeout(initAutocomplete, 2000);

        var lookup = {
            "street_number": document.getElementById('checkout_shipping_address_address1'),
            "route": document.getElementById('checkout_shipping_address_address1'),
            "fullAddress": document.getElementById('checkout_shipping_address_address1'),
            "locality": document.getElementById('checkout_shipping_address_city'),
            "neighborhood": document.getElementById('checkout_shipping_address_city'),
            "administrative_area_level_1": document.getElementById('checkout_shipping_address_province'),
            "country": document.getElementById('checkout_shipping_address_country'),
            "postal_code": document.getElementById('checkout_shipping_address_zip')
        };
        var placeSearch;
        var autocomplete;
        var componentForm = {
            street_number: 'short_name',
            route: 'long_name',
            locality: 'long_name',
            administrative_area_level_1: 'long_name',
            country: 'long_name',
            neighborhood: 'long_name',
            postal_code: 'short_name'
        };

        function initAutocomplete() {
            document.getElementById('checkout_shipping_address_address1').onFocus = "geolocate()";

            autocomplete = new google.maps.places.Autocomplete(
                (document.getElementById('checkout_shipping_address_address1')), { types: ['geocode'] });

            autocomplete.addListener('place_changed', fillInAddress);
        }


        function fillInAddress() {
            var place = autocomplete.getPlace();
            for (var component in componentForm) {
                lookup[component].value = '';
            }
            var fullAddress = '';
            for (var i = 0; i < place.address_components.length; i++) {
                var addressType = place.address_components[i].types[0];
                var val = place.address_components[i][componentForm[addressType]];
                if (componentForm[addressType]) {
                    switch (addressType) {
                        case 'street_number':
                            fullAddress = val + fullAddress;
                            break;
                        case 'route':
                            fullAddress = fullAddress + ' ';
                            fullAddress = fullAddress + val;
                            break;
                        case 'neighborhood':
                            lookup.neighborhood.value = val;
                            break;
                        case 'locality':
                            lookup.locality.value = val;
                            break;
                        case 'administrative_area_level_1':
                            lookup.administrative_area_level_1.value = val;
                            break;
                        case 'country':
                            lookup.country.value = val;
                            break;
                        case 'postal_code':
                            lookup.postal_code.value = val;
                            break;
                    }
                }
            }
            lookup.fullAddress.value = fullAddress;
        }

        function geolocate() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var geolocation = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };
                    var circle = new google.maps.Circle({
                        center: geolocation,
                        radius: position.coords.accuracy
                    });
                    autocomplete.setBounds(circle.getBounds());
                });
            }
        }


    };
}
Tags:

2

Answers


  1. 0

    Looking through the docs there is no such thing as ‘postal_town’ as much as you might like there to be. It is likely to be locality or similar.

    Login or Signup to reply.
  2. 0

    The solution for me was indeed to add postal_town as per official docs:

    The address components in this sample are based on a typical address format. Note that you might need to use a different set of components to align with the postal address formats used in some regions. For example, the sample code selects the locality component, which often represents the city part of the address. Examples of how components can differ include:
    e>

    • In the UK and in Sweden, the component to display the city is postal_town.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search