Shopify店铺完全免费的Track Order页面编写教程,小白都会!!!

    最近很多客户有提出一个问题,关于Shopify店铺用户订单跟踪的需求。现在很多卖家有通过App去解决这个问题,不管用户是否登录,都可以通过输入Tracking Number来去查询物流信息。


    这个细节可以增加用户对我们网站的信任,让用户觉得下完单后是有迹可循的,订单号是可追踪的,能随时知道自己订单的物流信息。


    体验效果比较好的App都需要收费,那今天小编就教大家用代码写一个简单的Track Order页面,完全免费。效果如下图:


    我以Brooklyn主题为例,给大家做一个完整的步骤演示。

   


01

创建Page模板


    点击 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

添加tracking逻辑


   在当前文件的最末尾,添加以下代码,添加完成之后点击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

创建page页面


    回到店铺后台,点击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店铺满足多语言需求的四种解决方案(文末精彩福利)

App卸载后,真的卸载完毕了吗?小编教你四招清理App遗留代码

一个让你的Shopify店铺扩展更灵活的官方工具介绍



更多精彩推荐,请关注我们



专业的技术服务





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

这篇文章有一个评论

  1. 这个代码好像不可以用啊

发表评论

关闭菜单