最近很多客户有提出一个问题,关于Shopify店铺用户订单跟踪的需求。现在很多卖家有通过App去解决这个问题,不管用户是否登录,都可以通过输入Tracking Number来去查询物流信息。
这个细节可以增加用户对我们网站的信任,让用户觉得下完单后是有迹可循的,订单号是可追踪的,能随时知道自己订单的物流信息。
体验效果比较好的App都需要收费,那今天小编就教大家用代码写一个简单的Track Order页面,完全免费。效果如下图:
我以Brooklyn主题为例,给大家做一个完整的步骤演示。
01
点击 Online Store -> Theme -> Actions -> Edit Code,在templates目录下选择Add a new template,跳出弹框后,下拉框选择page,template名字命名为track-order,点击Create Template。
02
点开刚刚创建的新文件,找到{{ page.content }},将下列代码输入到{{ page.content }}下面第二行。
<input type=”text” id=”YQNum” maxlength=”50″ placeholder=”Enter Tracking Number”/>
<input type=”button” value=”Track Order” onclick=”doTrack()” id=”YQButton”/>
<div id=”YQContainer”></div>
如下图:
03
在当前文件的最末尾,添加以下代码,添加完成之后点击Save,保存修改过后的文件。
<script type=”text/javascript” src=”//www.17track.net/externalcall.js”></script>
<script type=”text/javascript”>
function doTrack() {
var num = document.getElementById(“YQNum”).value;
if(num===””){
alert(“Enter your number.”);
return;
}
YQV5.trackSingle({
YQ_ContainerId:”YQContainer”,
YQ_Height:560,
YQ_Fc:”0″,
YQ_Lang:”en”,
YQ_Num:num
});
}
</script>
<style>
#YQContainer{
margin-top: 20px;
}
#YQNum{
margin-top: 10px;
border: 1px solid #cccccc;
padding: 6px 10px;
width: 200px;
vertical-align: middle;
height: 36px;
font-size: 14px;
}
#YQButton{
margin-top: 10px;
width: 120px;
color: #FFFFFF;
background: #F58D17;
border: none;
padding: 6px 10px;
vertical-align: middle;
height: 36px;
}
</style>
04
回到店铺后台,点击Online Store -> Pages -> Create Page,页面模板Template中选择page.track-order,填写page标题及内容,如下图进行操作:
最终页面显示效果如下,最后一步,将Track Order页面通过Navigation链接到顶部和尾部导航栏即可。
本篇文章就分享到这里了。如果对文中所涉及内容有疑问处,可联系小编QQ : 2790641050。欢迎加入免费Shopify技术交流qq群:632205694,如有疑问,也可在群中与小编实时交流。
如果觉得小编的文章对你有价值,动动你的手指,帮忙关注并转发,谢谢!

除非注明,文章均为 SFS技术服务 原创,转载请注明来源,谢谢!
SFS为国内首家专注于Shopify技术服务的供应商,因为专注,所以专业。
我们的网站:https://app.shopifyfs.com
商务合作: bd@sfsup.com
Shopify店铺满足多语言需求的四种解决方案(文末精彩福利)


本篇文章来源于微信公众号: shopify技术服务
第 毛毛页
6 7月 2019这个代码好像不可以用啊