【Shopify】自己制作 Track Your Order 功能，每月节省10美刀

一、创建 Page Template

• Online Store -> Theme -> Actions -> Edit Code
• 在templates目录下选择Add a new template，弹窗下拉框选择page，template名字命名为track-order，点击Create Template
• 在该 template下找到{{ 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>

• 在该 template 末尾添加以下代码：

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

• 现在点击 SAVE 保存

二、创建 Page

• 点击Online Store -> Pages -> Create Page
• 页面模板Template中选择page.track-order
• 用户一句话提示文案，如：Please enter your tracking number to track your order package.
• 点击 SAVE 保存

预览一下，正常使用了。