在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

IIIZST

你想的,我懂得,我来帮你!

shopify建站开发服务

如果你已经对漫无天日的研究厌烦了;
如果你对模板实现不了的布局苦恼着;

不如这些交给我们!

🌟🌟🌟🌟🌟