博客

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

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

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

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

    点击 Online Store -> Theme -> Actions -> Edit Code，在templates目录下选择Add a new template，跳出弹框后，下拉框选择page，template名字命名为track-order，点击Create Template。

    点开刚刚创建的新文件，找到{{ 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>

    如下图：

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

    回到店铺后台，点击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

▼

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

▼

专业的技术服务