小编一想,这个可以有哇,就开始想怎么实现,后来在一个国外的博客上还真找到了一篇这样的文章,小编根据这篇文章实现了一遍,过程不算太难,本着有福共享的原则,将实现过程分享给大家。

https://conversionpirate.com/shopify-checkout-address-autocomplete-google-api/ ——Conversion Pirate
先上个效果图:

Shopify后台对应设置

01
进入谷歌开发者平台,如果没有账号,需注册谷歌账号,再新建一个项目。
在整个注册以及创建的过程中,可能会出现需要绑定信用卡的情况,但是并不会需要消费,无妨。
02
在谷歌开发者后台,选定刚刚创建的项目,开通API服务。
在搜索框中搜索Places,选中Places API,并启用。
回到后台首页,搜索Maps Javascript API,按照Places API中的启用过程,开启Maps Javascript API。
上述两个API启动完毕中,在API选项中,会出现2个使用中的API。
03
在已经使用的API列表中,选中Places API,点击凭据,在创建凭据的下拉框中选择API密钥选项,密钥创建成功。
点击密钥编辑,选择密钥可使用的API范围,选中Places API以及Maps Javascript API,点击保存,密钥设置成功,并记住API密钥,备用。
04
打开Shopify后台,点击Online Store -> Preferences -> Goole Analytics,将以下代码黏贴到Custom Javascript处。
记住,需将代码中字体标红处,替换成上文中我们自己创建的API 密钥。
// Conversionpirate.com
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=YOUR_API_KEY&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());
});
}
}
};
}
至此,我们的这个小功能就完成了,赶紧去验收一下最终的成果吧!
以上内容,如果有任何疑问,请联系2790641050。


本篇文章来源于微信公众号: shopify技术服务