Checkout页面做好这个细节,用户体验大大提升

    上周,有一个卖家问了小编这样一个问题,希望Checkout页面的地址能够自动查询匹配,这样能加快用户Checkout的速度,减少用户中间的思考时间,而且地址的自动匹配,对于用户而言,也大大提升了用户体验。

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

参考文章:

https://conversionpirate.com/shopify-checkout-address-autocomplete-google-api/  ——Conversion Pirate

先上个效果图:

基本步骤分为以下几步:
注册谷歌账号,新建子项
开通Places API以及Maps Javascript API
拿取API密钥

Shopify后台对应设置

01

谷歌账号创建子项

    进入谷歌开发者平台,如果没有账号,需注册谷歌账号,再新建一个项目。

在整个注册以及创建的过程中,可能会出现需要绑定信用卡的情况,但是并不会需要消费,无妨。

02

开通API

    在谷歌开发者后台,选定刚刚创建的项目,开通API服务。

在搜索框中搜索Places,选中Places API,并启用。

回到后台首页,搜索Maps Javascript API,按照Places API中的启用过程,开启Maps Javascript API。

上述两个API启动完毕中,在API选项中,会出现2个使用中的API。

03

拿取API密钥

    在已经使用的API列表中,选中Places API,点击凭据,在创建凭据的下拉框中选择API密钥选项,密钥创建成功。

点击密钥编辑,选择密钥可使用的API范围,选中Places API以及Maps Javascript API,点击保存,密钥设置成功,并记住API密钥,备用。

04

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());

                });

            }

        }

    };

}

至此,我们的这个小功能就完成了,赶紧去验收一下最终的成果吧!

    以上内容,如果有任何疑问,请联系2790641050。

    ▼
更多精彩推荐,请关注我们
专业的技术服务

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

发表评论

关闭菜单