上周，有一个卖家问了小编这样一个问题，希望Checkout页面的地址能够自动查询匹配，这样能加快用户Checkout的速度，减少用户中间的思考时间，而且地址的自动匹配，对于用户而言，也大大提升了用户体验。
小编一想，这个可以有哇，就开始想怎么实现，后来在一个国外的博客上还真找到了一篇这样的文章，小编根据这篇文章实现了一遍，过程不算太难，本着有福共享的原则，将实现过程分享给大家。
先上个效果图：
基本步骤分为以下几步：
注册谷歌账号，新建子项
开通Places API以及Maps Javascript API
拿取API密钥
Shopify后台对应设置
1.谷歌账号创建子项
进入谷歌开发者平台，如果没有账号，需注册谷歌账号，再新建一个项目。
在整个注册以及创建的过程中，可能会出现需要绑定信用卡的情况，但是并不会需要消费，无妨。
2.开通API
在谷歌开发者后台，选定刚刚创建的项目，开通API服务。
在搜索框中搜索Places，选中Places API，并启用。
回到后台首页，搜索Maps Javascript API，按照Places API中的启用过程，开启Maps Javascript API。
上述两个API启动完毕中，在API选项中，会出现2个使用中的API。
3.拿取API密钥
在已经使用的API列表中，选中Places API，点击凭据，在创建凭据的下拉框中选择API密钥选项，密钥创建成功。
点击密钥编辑，选择密钥可使用的API范围，选中Places API以及Maps Javascript API，点击保存，密钥设置成功，并记住API密钥，备用。
4.Shopify后台对应设置
打开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());
});
}
}
};
}
至此，我们的这个小功能就完成了，赶紧去验收一下最终的成果吧！
以上内容，如果有任何疑问，请联系SFS客服qq：2790641050。
更多精彩，请关注SFS官方微信公众号：Shopify技术服务。
除非注明，文章均为 SFS技术服务 原创，转载请注明来源，谢谢！
SFS为Shopify全方位专业技术服务供应商，我们提供服务，解决问题，让每一位Shopify卖家不再为技术问题而深感烦恼。
我们的网站：www.shopifyfs.com
商务合作： bd@sfsup.com
免费Shopify技术咨询QQ群：632205694
联系我们： 2790641050
网友评论