在shopify创建Track Order页面

懒到死的我活了，今天群内有群友问如何添加17track的查运单方法，我好久之前写过一个通用样式，在大多数的网站上都可以直接添加使用，现在供出来给大家使用。

添加Track Order页面

首先你要到online store（在线商店）里面的Pages去创建一个page，名称可以叫做Track Order，然后内容添加的时候在内容栏右上角有个Show HTML，看下图：

显示HTML编辑

点击这里之后，将下面的代码添加到里面。

<div style="margin-top: 10px;margin-bottom: 20px;">
<!--Tracking number input box.--> 
<input class="Form__Input" type="text" placeholder="Enter your number" id="YQNum" maxlength="50" style="width: 100%;height: 57px;"/> 
<!--The button is used to call script method.--> 
<input class="Button" style="background: #000; border-radius: 0; width: 100%; height: 50px;margin-left: 0px; color: #fff;" type="button" value="TRACK" onclick="doTrack()" /> 
<!--Container to display the tracking result.-->
<div id="YQContainer"></div>
<!--Script code can be put in the bottom of the page, wait until the page is loaded then execute.-->
<script type="text/javascript" src="//www.17track.net/externalcall.js"></script>
<script type="text/javascript">// <![CDATA[
function doTrack() {
    var num = document.getElementById("YQNum").value;
    if(num===""){
        alert("Enter your number."); 
        return;
    }
    YQV5.trackSingle({
        //Required, Specify the container ID of the carrier content.
        YQ_ContainerId:"YQContainer",
        //Optional, specify tracking result height, max height 800px, default is 560px.
        YQ_Height:560,
        //Optional, select carrier, default to auto identify.
        YQ_Fc:"0",
        //Optional, specify UI language, default language is automatically detected based on the browser settings.
        YQ_Lang:"en",
        //Required, specify the number needed to be tracked.
        YQ_Num:num
    });
}
// ]]>
</script>
</div>

然后保存即可使用了。

优化页面

表单的样式和按钮的样式都是我已经写好了。
但是有个问题就是不同的模版内容距离顶部不一样，有的可能内容会贴着顶部和底部，所以在第一个<div>代码里面我写了两个style代码。
style="margin-top: 10px;margin-bottom: 20px;",
margin-top: 10px;是指布局顶部距离上个布局的距离；
margin-bottom: 20px;是指布局底部距离下个布局的距离；
这两个数值可以自己任意调整。需要距离顶部远一点可以改成margin-top: 50px;。
placeholder="Enter your number"是表单内的预设信息，不懂不用改预览下就明白，比如你表单内想写成中文“输入你的运单号”，就改成placeholder="输入你的运单号"。
value="TRACK"这里的track是按钮上的文本，修改方法同上面一样，如果像改成“查询”，就改成value="查询"。

打完收工！

下面是个demo页演示：https://iiizst.cc/pages/track-demo