Skip to content

Instantly share code, notes, and snippets.

@blboyle
Created May 29, 2017 14:21
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save blboyle/ac467f0ff2e846e0b04bd6c9bc94d1d6 to your computer and use it in GitHub Desktop.
Save blboyle/ac467f0ff2e846e0b04bd6c9bc94d1d6 to your computer and use it in GitHub Desktop.
Copy this code into a snippet, then load that snippet into checkout.liquid
<!-- Snippet gp_google_autocomplete -->
{% if gp_google_autocomplete %}
{% assign gp_api_key = settings.gp_add_merchant_api_key | strip %}
{% unless gp_api_key == '' %}
<script>
var pageChangeChecker = function(name, section, callback) {
// checking for a specific class-attribute, else it's been erased by page:change
if (!$(section).hasClass(name)) {
if (typeof(callback) === 'function') {
$(section).addClass(name);
callback();
} else {
console.warn('pageChangeChecker requires a function for the callback parameter');
}
}
};
</script>
<script src="{{ 'gp_checkout_autocomplete.js' | asset_url }}" defer="defer" async="async"></script>
{% capture gp_api_url %}https://maps.googleapis.com/maps/api/js?key={{ gp_api_key }}&libraries=places&language={{ shop.locale | split: "-" | first }}&callback=setupGpCheckoutAutocomplete{% endcapture %}
<script src="{{ gp_api_url }}" defer="defer" async="async"></script>
{% else %}
<script>
console.error("No API key found for Google Places autocomplete");
</script>
{% endunless %}
<script>
var setupGpCheckoutAutocomplete = (function ($) {
function setupGpCheckoutAutocomplete() {
// Initialize Google Maps on for Shipping Address form and Billing Address form.
if (Shopify.Checkout.step === 'contact_information' || Shopify.Checkout.step === 'payment_method') {
var addressInput = $('form input[name="checkout[shipping_address][address1]"]').length ? 'shipping_address' : 'billing_address';
function checkoutAutocompleteInit() {
var placesAutocomplete = new GpCheckoutAutocomplete();
placesAutocomplete.init({
addressInput: addressInput,
geolocate: {{ settings.gp_enable_geolocate | json }},
countryError: {{ 'google_places.checkout.field_errors.country_invalid' | t | json }},
address1ErrorPlaceholder: {{ 'shopify.checkout.contact.address1_placeholder' | t | json }}
});
}
$(document).on('page:load page:change', function() {
pageChangeChecker('autocomplete-active', '[name="checkout['+addressInput+'][address1]"]', checkoutAutocompleteInit);
});
}
}
return setupGpCheckoutAutocomplete;
})(jQuery);
</script>
{% endif %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment