功能预览：

示例页面：https://trendyapperal.com/pages/track-order
可根据订单号及邮箱查询包裹的物流信息。

完成效果图

实现步骤：

• 打开shopify后台 -- 依次点击 Online Store -- Actions -- Edit Code -- Add a new template -- Create a new template for page -- track-order。

新建模板.png

复制以下代码全局替换该模板自动生成的代码：

<div class="Container">
  <header class="PageHeader">
    <div class="SectionHeader SectionHeader--center">
      <h1 class="SectionHeader__Heading Heading u-h1">Track Your Order</h1>
    </div>
  </header>

  <div class="PageContent PageContent--narrow Rte">
    <div class="order-shipping-input">
      <p class="policy-alert Form__Alert Alert Alert--error">Oops,can't track your order.</p>
      <p class="benull-alert Form__Alert Alert Alert--error">Order Number and Email can't be empty.</p>
      <input id="orderNum" class="Form__Input " aria-label="Input Order Number" placeholder="Order Number" required="" style="margin-bottom:20px">
      <input id="orderEmail" class="Form__Input " aria-label="Input Email" placeholder="Email" required="">
      <button id="order_tracking_submit" class="Form__Submit Button Button--primary">track</button>
    </div>
  </div>
  
  <div class="PageContent PageContent--narrow LogisticsContent">
    <div class="packageTabCon"></div>
  </div>  
</div>
<script src="https://d13rbkk534zmfy.cloudfront.net/js/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
  
  var sitename = '{{ shop.name }}';
  var AjaxHandler = function(url,method,data,callBack,errorBack){
    $.ajax({
      url : url,
      dataType : "jsonp",
      method:method,
      async : true,
      success : function(datar) {
        if(datar && datar.code == '200'){
          callBack(datar);
        }else{
          if(errorBack){
            errorBack(datar);
          }
        }
      },
      error : function(request, textStatus, errorThrown) {
        $('.policy-alert').show();
        if(errorBack){
          errorBack();
        }
      }
    });
  };
  $(function(){
    function displayTime(l){
        var date = new Date(l)
        return date.toString()
    }
    
    function getTimeStr(mess){
        var timeStr='';
        var self=this;
        timeStr=displayTime(mess.checkpointTime);
        timeStr=timeStr.substr(4,20);
        if(timeStr.substr(4,2)=='01'||timeStr.substr(4,2)=='21'||timeStr.substr(4,2)=='31'){
        timeStr=timeStr.split('');
        timeStr.splice(6,0,'st');
        timeStr=timeStr.join('');
        }else if(timeStr.substr(4,2)=='02'||timeStr.substr(4,2)=='22'){
        timeStr=timeStr.split('');
        timeStr.splice(6,0,'nd');
        timeStr=timeStr.join('');
        }else{
        timeStr=timeStr.split('');
        timeStr.splice(6,0,'th');
        timeStr=timeStr.join('');
        }
        return timeStr;
    }
    
    function statusHtml(index,len,mess){
      var self=this;
      var classname = "bgball";
      if(index==len-1){
        classname="activebgball"
      }
      var hide = "";
      if(index==0){
        hide="hide";
      }
      var html = [
        '<ul>',
        '   <li>',
        '       <span class="'+classname+'"></span>',
        '       <span class="time">'+getTimeStr(mess)+'</span>',
        '       <span>'+mess.message+'</span>',
        '   </li>',
        '   <li class="'+hide+'">',
        '       <span class="bgline"></span>',
        '   </li>',
        '</ul>',
      ];
        return html.join('');
    } 
        
    function createTracking(container,array){
      var self=this;
      if(array&&array.length){
        for(var i=array.length-1;i >= 0;i--){
          container.append(statusHtml(i,array.length,array[i]));
        }
      }
    }
    
    function createWebsiteURL(container,weburl){
        var html = [
            '<div>',
          '<span>Tracking Detail Information: </span><a href="'+weburl+'">'+weburl+'</a>',
          '</div>'
        ]
        
        container.append(html.join(''));
    }
    
    function createPackageContent(i,tracking){
        var active = "";
        if(i==0){
          active="active";
        }
    
        $('.packageTabCon').append('<div class="packageTab packageTab'+i+' '+active+'" data-div="packagecontent'+i+'">package'+(i+1)+'</div>');

        var packHtml = [
          '<div class="Rte packageContent '+active+'" id="packagecontent'+i+'" style="border-top:1px solid #ddd;">',
          ' <h4>Logistics Information</h4>',
          ' <div class="info">',
          '      <p><span class="t-company-tit'+i+'"></span><font class="t-company-text'+i+'"></font></p>',
          '      <p><span class="t-num-tit'+i+'"></span><font class="t-num-text'+i+'"></font></p>',
          ' </div>',
          ' <div class="logisticsinfo logisticsinfo'+i+'">',
          '     <p class="tracking-current-status'+i+'"></p>',
          ' </div>',
          '</div>',
        ];
          
        $('.LogisticsContent').append(packHtml.join(''));
          
    
        if(tracking.slug){
          $('.t-company-tit'+i).text("Logistics Company: ");
          $('.t-company-text'+i).text(tracking.slug);
        }
        if(tracking.trackingStatus){
          if(tracking.trackingStatus==10){
            $('.tracking-current-status'+i).text('Current Stataus:In transit');
          }else if(tracking.trackingStatus==20){
            $('.tracking-current-status'+i).text('Current Stataus:Transport too long');
          }else if(tracking.trackingStatus==30){
            $('.tracking-current-status'+i).text('Current Stataus:To be taken');
          }else if(tracking.trackingStatus==35){
            $('.tracking-current-status'+i).text('Current Stataus:Fail in mailing');
          }else if(tracking.trackingStatus==39){
            $('.tracking-current-status'+i).text('Current Stataus:Track success');
          }else if(tracking.trackingStatus==40){
            $('.tracking-current-status'+i).text('Current Stataus:Sign up for success');
          }else if(tracking.trackingStatus==50){
            $('.tracking-current-status'+i).text('Current Stataus:Trace exception');
          }
        }
        if(tracking.destinPoints){
          createTracking($('.logisticsinfo'+i),tracking.destinPoints)
        }
        if(tracking.originPoints){
          createTracking($('.logisticsinfo'+i),tracking.originPoints);
        }
        if(tracking.logisticsSupplierWebsiteURL){
          createWebsiteURL($('.logisticsinfo'+i),tracking.logisticsSupplierWebsiteURL);
        }
          
        $('.LogisticsContent').show();
    }
    
    function searchTracking(orderNum,orderEmail){
      orderNum = orderNum.replace('#', '%23');
      $.ajax({
        type:'get',
        dataType: 'json',
        url:'https://shopify.geeko.online/tracking/get-by-order-number-and-email?orderNumber='+orderNum+'&email='+orderEmail+'&web='+sitename,
        success:function (data) {
            if(data.result && data.result.packages.length>0){
              var packages=data.result.packages;
                
              for(var i=0;i<packages.length;i++){
                createPackageContent(i,packages[i]);
              }
            }else{
                $('.policy-alert').show();
            }
        },
          error:function(){
            $('.policy-alert').show();
          }
        })
    }

    $("#order_tracking_submit").click(function(){
      $(".packageTabCon").empty();
      $(".packageContent").empty();
      if($('.order-shipping-input input').val()){
        var orderNum = $('#orderNum').val();
        var orderEmail = $('#orderEmail').val();
        searchTracking(orderNum,orderEmail);
      }else{
        $('.benull-alert').show();
      }
    })
    $('.order-shipping-input input').change(function(){
      $('.policy-alert').hide();
    })
    
    $(document).on('click', '.packageTab', function (event) {
        event.preventDefault();
        var packageDiv = $(this).attr('data-div');
        $('#'+packageDiv+'').addClass('active').siblings().removeClass('active');
        $(this).addClass('active').siblings().removeClass('active');
    });

  })
</script>
<style type="text/css">
  .hide{
    display:none;
  }
  .Form__Submit{
    margin: 20px auto 0;
  }
  .Rte ul{
    margin-left: 0;
  }
  .Rte ul:not(:last-child){
    margin-bottom:0;
  }
  .policy-alert{
    display: none;
  }
  .benull-alert{
    display: none;
  }
  .logisticsinfo ul li{
    line-height: 25px;
    list-style: none;
  }
  .logisticsinfo ul li span{
    color: #999;
  }
  .logisticsinfo ul li .time{
    margin-right: 25px;
  }

  .logisticsinfo ul .bgball{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #cacaca;
    margin-right: 10px;
  }
  .logisticsinfo ul .activebgball{
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #57b936;
    margin-right: 7px;
    position: relative;
    left: -2px;
  }
  .logisticsinfo ul .bgline{
    width: 2px;
    height: 50px;
    border: 1px dashed #cacaca;
    margin-left: 3px;
  }
  .btxt span{
    color: #222 !important;
  }
  .title-pannel{
    width: 1150px;
    margin: 0 auto;
    padding: 35px 0 0 0;
  }
  .LogisticsContent{
    display:none;
  }
  .packageTabCon::after{
    display:block;
    content:'';
    clear:both;
  }
  .packageTab{
    float: left;
    margin-right: 20px;
    text-transform: capitalize;
    padding: 10px 20px;
    cursor:pointer;
  }
  .packageTab.active{
    border-bottom: 2px solid #222;
  }
  .packageContent{
    display:none;
  }
  .packageContent.active{
    display:block;
  }
</style>

• 打开shopify后台 -- 依次点击 Online Store -- Pages -- Add Page 后，按需填好如下信息：

注：Template suffix处务必选择上一步中新建的模板名称。

新建页面.png

• 关键的两步已经做好了，接下来只需要将入口放置到网站地图中合适得位置即可；以下是放在Footer Menu 的方法：
  打开shopify后台 -- 依次点击 Online Store -- Navigation -- Footer Menu -- Add menu item -- Name自定义 -- Link依次选择 Pages-Track Order。

Add menu item

接下来就可以在网站的页脚处就找到入口并测试是否可行了，提供测试专用信息（有效期不定）：
测试 Order Number: ELLE-1366
测试 Email: kaur.jasmin.12@gmail.com
如以上步骤正确执行，可通过此测试信息查询到一笔订单中两个包裹相同的物流信息。

操作中遇到困难请联系技术部同事。（我相信你自己可以的）
有任何意见建议请联系技术部同事。（可能不会采纳哦）
😊