外贸独立站如何添加Track Your Order窗口?

步骤#01:创建页面

首先新建一个Page,在WordPress后台,找到Page,点击新建。或者使用已经存在的Tracking Page。

然后在想要创建Tracking模块的地方,随便敲几个字母,比如”ddd”,如下图所示:

选中ddd,点击Options,调出菜单,点击Edit As HTML

Edit as HTML如下图所示:

步骤#02:填写物流追踪代码

然后从这里复制物流追中代码:https://extcall.17track.net/zh-cn

其中有好几个格式可以选择,比如我们选择格式01,代码如下


<!--单号输入框。-->
<input type="text" id="YQNum" maxlength="50"/>
<!--用于调用脚本方法的按钮。-->
<input type="button" value="TRACK" onclick="doTrack()"/>
<!--用于显示查询结果的容器。-->
<div id="YQContainer"></div>

<!--脚本代码可放于页面底部,等到页面最后执行。-->
<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({
        //必须,指定承载内容的容器ID。
        YQ_ContainerId:"YQContainer",
        //可选,指定查询结果高度,最大为800px,默认为560px。
        YQ_Height:560,
        //可选,指定运输商,默认为自动识别。
        YQ_Fc:"0",
        //可选,指定UI语言,默认根据浏览器自动识别。
        YQ_Lang:"en",
        //必须,指定要查询的单号。
        YQ_Num:num
    });
}
</script>

将这个代码替换之前的ddd

代码粘贴好了以后,当我们去编辑其余Block的时候,会发现这个block变的不可识别了,这个时候只要点击这个block的右侧三个点,点击”Convert to HTML“就可以了。

注意:

如果有使用wp-rocket,延迟加载了JavaScript的话,记得把这个tracking的JavaScript剔除掉,否则可能手机端不正常。

例如使用WP Rocket优化的时候,会勾选Minify JavaScript files, Load JavaScript Deferred, Delay JavaScript Execution,这三个勾选上,那么这个17track的追踪代码在手机端无法使用。所以需要把17Tack的这个代码剔除掉,不要影响17Track的代码。

添加这个代码”/www.17track.net/externalcall.js“到Excluded JavaScript Files方框中。