order_tracking​

{{#form 'order_tracking' id="order-tracking-form"}}
  <div class="email">
    <label for="order_tracking[email]">邮箱</label>
    <input type="email" name="order_tracking[email]" placeholder="邮箱" />
  </div>
  <div class="order-number">
    <label for="order_tracking[order_number]">订单编号</label>
    <input type="text" name="order_tracking[order_number]" placeholder="订单编号" />
  </div>
  <div class="submit">
    <input type="submit" value="Post">
  </div>
{{/form}}

{{#form 'order_tracking' id="order-tracking-form"}}
  <div class="code">
    <label for="order_tracking[phone_area_code]">区号</label>
    <input type="text" name="order_tracking[phone_area_code]" placeholder="区号" />
  </div>
  <div class="phone">
    <label for="order_tracking[phone]">手机号</label>
    <input type="text" name="order_tracking[phone]" placeholder="手机号" />
  </div>
  <div class="order-number">
    <label for="order_tracking[order_number]">订单编号</label>
    <input type="text" name="order_tracking[order_number]" placeholder="订单编号" />
  </div>
  <div class="submit">
    <input type="submit" value="Post">
  </div>
{{/form}}

class OrderTracking {
  constructor() {
    this.form = document.querySelector('#order-tracking-form');
    this.form.addEventListener('submit', this.onSubmitHandler.bind(this));
    this.orderTracking = new window.Shopline.OrderTracking(this.form);
  }
  onSubmitHandler(e) {
    e.preventDefault();
    this.orderTracking.submit()
      .then(response => {
        if (response.data?.orderUrl) {
          window.location.href = response.data.orderUrl;
        } else {
            // handle other situations without response.data.orderUrl
        }
      })
      .catch(response => {
        // handle other situations with response.error_fields
      })
  }
}
// 初始化 JS SDK
window.Shopline.loadFeatures(
  [
    {
      name: 'order-tracking-api',
      version: '0.1'
    }
  ],
  function(error) {
    if (error) {
      throw error;
    }
    new OrderTracking();
  }
);