Created
May 29, 2017 14:21
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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