Skip to content

Instantly share code, notes, and snippets.

@kevinsproles

kevinsproles/Google-Checkout-Auto-Suggest.html

Last active November 5, 2019 17:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kevinsproles/589839e60ebb296b1cecd99d89efb582 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kevinsproles/589839e60ebb296b1cecd99d89efb582 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Google-Checkout-Auto-Suggest.html
<!-- Google Maps API for checkout page -->
<script src="/v/vspfiles/templates/269/js/map.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key={{insert-your-google-api-key}}&callback=initAddress&libraries=places" async defer></script>
Raw
map.js
function getPlaceComponent(address_components, place_type, name_type) {
for (var i = 0; i < address_components.length; i++) {
var component = address_components[i];
for (var j = 0; j < component.types.length; j++) {
var component_type = component.types[j];
if (component_type == place_type) {
return component[name_type];
}
}
}
}
function setBillingComponents(address_components) {
var billingAddress1 = (document.getElementsByName('BillingAddress1'))[0];
var _street_number = getPlaceComponent(address_components, 'street_number', 'long_name');
var _route = getPlaceComponent(address_components, 'route', 'long_name');
var _address1 = _route;
if (_street_number) {
_address1 = _street_number + " " + _route;
}
billingAddress1.value = _address1;
var _city = getPlaceComponent(address_components, 'locality', 'long_name');
if (_city) {
(document.getElementsByName('BillingCity'))[0].value = _city;
}
var _state = getPlaceComponent(address_components, 'administrative_area_level_1', 'short_name');
if (_state) {
(document.getElementsByName('BillingState'))[0].value = _state;
(document.getElementsByName('BillingState_dropdown'))[0].value = _state;
}
var _country = getPlaceComponent(address_components, 'country', 'long_name');
if (_country) {
(document.getElementsByName('BillingCountry'))[0].value = _country;
}
var _postal = getPlaceComponent(address_components, 'postal_code', 'long_name');
if (_postal) {
(document.getElementsByName('BillingPostalCode'))[0].value = _postal;
}
}
function setShipComponents(address_components) {
var shipAddress1 = (document.getElementsByName('ShipAddress1'))[0];
var _street_number = getPlaceComponent(address_components, 'street_number', 'long_name');
var _route = getPlaceComponent(address_components, 'route', 'long_name');
var _address1 = _route;
if (_street_number) {
_address1 = _street_number + " " + _route;
}
shipAddress1.value = _address1;
var _city = getPlaceComponent(address_components, 'locality', 'long_name');
if (_city) {
(document.getElementsByName('ShipCity'))[0].value = _city;
}
var _state = getPlaceComponent(address_components, 'administrative_area_level_1', 'short_name');
if (_state) {
(document.getElementsByName('ShipState'))[0].value = _state;
(document.getElementsByName('ShipState_dropdown'))[0].value = _state;
}
var _country = getPlaceComponent(address_components, 'country', 'long_name');
if (_country) {
(document.getElementsByName('ShipCountry'))[0].value = _country;
}
var _postal = getPlaceComponent(address_components, 'postal_code', 'long_name');
if (_postal) {
(document.getElementsByName('ShipPostalCode'))[0].value = _postal;
}
}
function setBillingAddress() {
var billingAddress1 = (document.getElementsByName('BillingAddress1'))[0];
billingAddress1.setAttribute('placeholder', '');
var billAutocomplete = new google.maps.places.Autocomplete(billingAddress1);
google.maps.event.addListener(billAutocomplete,
"place_changed",
function() {
var place = billAutocomplete.getPlace();
console.log(place);
setBillingComponents(place.address_components);
});
/*
var billingCompany = (document.getElementsByName('BillingCompanyName'))[0];
billingCompany.setAttribute('placeholder', '');
var billAutocomplete2 = new google.maps.places.Autocomplete(billingCompany);
google.maps.event.addListener(billAutocomplete2,
"place_changed",
function() {
var place = billAutocomplete2.getPlace();
console.log(place);
setBillingComponents(place.address_components);
if (place.name) {
(document.getElementsByName('BillingCompanyName'))[0].value = place.name;
}
if (place.formatted_phone_number) {
(document.getElementsByName('BillingPhoneNumber'))[0].value = place.formatted_phone_number;
}
});
*/
}
function setShipAddress() {
var shipAddress1 = (document.getElementsByName('ShipAddress1'))[0];
shipAddress1.setAttribute('placeholder', '');
var shipAutocomplete = new google.maps.places.Autocomplete(shipAddress1);
google.maps.event.addListener(shipAutocomplete,
"place_changed",
function() {
var place = shipAutocomplete.getPlace();
setShipComponents(place.address_components);
});
/*
var shipCompany = (document.getElementsByName('ShipCompanyName'))[0];
shipCompany.setAttribute('placeholder', '');
var shipAutocomplete2 = new google.maps.places.Autocomplete(shipCompany);
google.maps.event.addListener(shipAutocomplete2,
"place_changed",
function() {
var place = shipAutocomplete2.getPlace();
setShipComponents(place.address_components);
if (place.name) {
(document.getElementsByName('ShipCompanyName'))[0].value = place.name;
}
if (place.formatted_phone_number) {
(document.getElementsByName('ShipPhoneNumber'))[0].value = place.formatted_phone_number;
}
});
*/
}
function initShipAddress() {
(document.getElementsByName('ShipCompanyName'))[0].value = '';
(document.getElementsByName('ShipAddress1'))[0].value = '';
(document.getElementsByName('ShipAddress2'))[0].value = '';
(document.getElementsByName('ShipCity'))[0].value = '';
(document.getElementsByName('ShipState'))[0].value = '';
(document.getElementsByName('ShipState_dropdown'))[0].value = '';
(document.getElementsByName('ShipCountry'))[0].value = '';
(document.getElementsByName('ShipPostalCode'))[0].value = '';
(document.getElementsByName('ShipPhoneNumber'))[0].value = '';
}
function initAddress() {
setBillingAddress();
$('select[name="ShipTo"]').change(function(e) {
var shipTo = $(this).val();
if (shipTo == 'use_different_address') {
setTimeout(function() {
initShipAddress();
}, 500);
setTimeout(function() {
setShipAddress();
}, 3000);
}
})
setTimeout(function() {
$('#v65-SameAsBilling').change(function() {
console.log('billing changed');
if ($(this).attr('checked') == false) {
initShipAddress();
setShipAddress();
} else {}
});
}, 2000);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment