如何配置“物流查询”页面

本文将介绍如果通过接入17 Track来实现自定义页面查询物流功能

1、首先请前往admin管理后台>网店>自定义页面>创建页面,输入自定义标题,如:ORDER TRACKING,并点击保存(可不填写内容)

mceclip0.png

2、保存自定义页面后,前往网店>自定义代码,点击添加代码mceclip1.png

3、输入自定义标题,如:物流查询代码,并复制以下代码至下方代码内容区域

<script src="//static.trackdog.com/static/externalcall.min.js"></script>
<script>
// <![CDATA[
function inputTrack() {
var num = document.getElementById('trackNum').value
if (num === '') {
alert('Please enter tracking number')
return
}
TDTrackJs.trackAppend({
TD_ContainerId: 'trackContainer',
TD_Num: num,
TD_Code: '',
TD_Lang: 'en',
TD_Width: 680,
TD_Height: 560,
})
}
window.addEventListener(
'load',
function () {
var html =
'<div style="width: 80%; margin: 0 auto; text-align: center;">' +
'<div style="margin-bottom: 20px;">Enter your tracking number to see the tracking details</div>' +
'<div style="margin-bottom: 20px;">The tracking status might take a few days to be updated, please wait patiently.</div>' +
'<div style="display: flex; margin-bottom: 20px;"><input id="trackNum" maxlength="50" style="flex: 1; margin-right: 10px; padding-left: 10px; border: 1px solid #9e9e9e;" type="text" /> <input onclick="inputTrack()" type="button" value="TRACK" style="width: 80px; height: 40px; padding: 8px 0; color: #fff; font-size: 14px; background-color: #f74b16; border: 1px solid #ec640c; border-radius: 2px;" /></div>' +
'<div id="trackContainer"></div>' +
'</div>'
var container = document.querySelector('.custom-page-render-container')
if (container) {
var elem = document.createElement('div')
elem.innerHTML = html
container.appendChild(elem)
}
},
false
)
// ]]>
</script>

注意:若使用的模板为“Brooklyn、Freedom、Natural、Pink、Simple、Audio”,请使用以下代码

<script src="//static.trackdog.com/static/externalcall.min.js"></script>
<script>
// <![CDATA[
function inputTrack() {
var num = document.getElementById('trackNum').value
if (num === '') {
alert('Please enter tracking number')
return
}
TDTrackJs.trackAppend({
TD_ContainerId: 'trackContainer',
TD_Num: num,
TD_Code: '',
TD_Lang: 'en',
TD_Width: 680,
TD_Height: 560,
})
}
window.addEventListener(
'load',
function () {
var html =
'<div style="width: 80%; margin: 0 auto; text-align: center;">' +
'<div style="margin-bottom: 20px;">Enter your tracking number to see the tracking details</div>' +
'<div style="margin-bottom: 20px;">The tracking status might take a few days to be updated, please wait patiently.</div>' +
'<div style="display: flex; margin-bottom: 20px;"><input id="trackNum" maxlength="50" style="flex: 1; margin-right: 10px; padding-left: 10px; border: 1px solid #9e9e9e;" type="text" /> <input onclick="inputTrack()" type="button" value="TRACK" style="width: 80px; height: 40px; padding: 8px 0; color: #fff; font-size: 14px; background-color: #f74b16; border: 1px solid #ec640c; border-radius: 2px;" /></div>' +
'<div id="trackContainer"></div>' +
'</div>'
setTimeout(function () {
var container = document.querySelector('[class*=CustomPageContent_container]')
if (container) {
var elem = document.createElement('div')
elem.innerHTML = html
container.appendChild(elem)
}
}, 1500)
},
false
)
// ]]>
</script>

4、在右侧区域选择需要触发的页面,选择刚才创建好的ORDER TRACKING自定义页面,点击保存

mceclip2.png

5、选择触发方式,通常选择底部,最后保存整个自定义代码后,再前往自定义页面中预览效果

mceclip3.png

 

还有其它问题?提交请求

评论