order_tracking
Generate a query order form that allows customers to query order information without logging in through the account and order number.
Inputs
| Input | Input Type | Name | Required | Remarks |
|---|---|---|---|---|
| Order Number | text | order_tracking[order_number] | Required | Order number for querying order information |
| order_tracking[email] | Optional | Email for querying order information | ||
| Phone Number | text | order_tracking[phone] | Optional | Phone number for querying order |
Example
Query orders using email
{{#form 'order_tracking' id="order-tracking-form"}}
<div class="email">
<label for="order_tracking[email]">Email</label>
<input type="email" name="order_tracking[email]" placeholder="Email" />
</div>
<div class="order-number">
<label for="order_tracking[order_number]">Order Number</label>
<input type="text" name="order_tracking[order_number]" placeholder="Order Number" />
</div>
<div class="submit">
<input type="submit" value="Post">
</div>
{{/form}}
Query orders using phone number
{{#form 'order_tracking' id="order-tracking-form"}}
<div class="code">
<label for="order_tracking[phone_area_code]">Code</label>
<input type="text" name="order_tracking[phone_area_code]" placeholder="Code" />
</div>
<div class="phone">
<label for="order_tracking[phone]">Phone Number</label>
<input type="text" name="order_tracking[phone]" placeholder="Phone Number" />
</div>
<div class="order-number">
<label for="order_tracking[order_number]">Order Number</label>
<input type="text" name="order_tracking[order_number]" placeholder="Order Number" />
</div>
<div class="submit">
<input type="submit" value="Post">
</div>
{{/form}}
Used in conjunction
The above code needs to be used in conjunction with the following script.
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
})
}
}
// Initializing the JS SDK
window.Shopline.loadFeatures(
[
{
name: 'order-tracking-api',
version: '0.1'
}
],
function(error) {
if (error) {
throw error;
}
new OrderTracking();
}
);
Was this article helpful to you?
Error loading component.