Order Tracking
<style><!--
.main-page-title {
display: none;
}
.order-tracking-page-width {
max-width: 1000px;
margin: 0 auto;
padding: 40px 20px;
--gap: 20px;
}
.order-tracking-header {
font-size: 26px;
font-weight: 500;
text-align: center;
/* padding: 40px 0; */
}
.order-tracking-input {
padding: 5px 8px;
font-size: 18px;
max-width: 300px;
}
.order-tracking-input:focus {
/* border: none;
outline: none; */
}
.order-tracking-input:focus-visible {
outline: none;
outline-offset: none;
box-shadow: none;
}
.order-tracking-submit-btn {
background-color: black;
color: white;
height: 35px;
border-radius: 3px;
padding: 0 30px;
margin-left: 16px;
border: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
}
.order-tracking-submit-btn-loading {
display: none;
font-size: 14px;
animation: loading 1s infinite linear;
}
@keyframes loading {
100% {
transform: rotate(360deg);
}
}
.order-tracking-form {
border: 1px solid #ccc;
padding: 80px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
}
.order-tracking-item {
background-color: #f5f6fa;
padding: 12px 20px;
border-radius: 5px;
position: relative;
flex: 1;
}
.order-tracking-page-width .dot {
width: 20px;
height: 20px;
border-radius: 9999px;
border: 4px solid #f5f6fa;
background-color: white;
position: absolute;
top: calc(50% - (var(--gap) / 2));
left: 50%;
transform: translate(-50%, -50%);
color: transparent;
}
.order-tracking-page-width .arrow {
position: absolute;
background-color: #f5f6fa;
left: 0;
top: 50%;
transform: translate(-50%, -50%) rotate(45deg);
width: 20px;
height: 20px;
color: transparent;
}
.order-tracking-page-width .icon {
width: 40px;
height: 40px;
position: absolute;
top: -50px;
}
.order-tracking-page-width .icon-dot {
position: absolute;
width: 18px;
height: 18px;
border-radius: 9999px;
top: -5px;
background-color: #c6c6c6;
color: #c6c6c6;
}
.order-tracking-page-width .icon-dot-active {
background-color: #008000 !important;
color: #4a4949;
}
.line-container {
--index: 2;
display: none;
padding-bottom: 20px;
}
.line-container .line {
color: transparent;
background-color: #008000;
width: calc(var(--index) * 25% + 5%);
height: 8px;
margin: 70px 0 50px;
border-radius: 9999px;
animation: line-animate 1s ease 0s 1 normal forwards running;
}
@keyframes line-animate {
0% {
width: 0;
}
100% {
width: calc(var(--index) * 25% + 5%);
}
}
.order-tracking-page-width .icon-mobile {
width: 40px;
height: 40px;
}
.line-container-mobile {
padding-left: 40px;
position: relative;
display: none;
margin-bottom: 40px;
/* margin: 40px 0; */
}
.line-container-mobile .line {
height: 100%;
width: 8px;
background-color: #c6c6c6;
position: absolute;
left: 0;
border-radius: 9999px;
}
.line-container-mobile .icon-dot-mobile {
position: absolute;
width: 18px;
height: 18px;
border-radius: 9999px;
background-color: #c6c6c6;
left: -5px;
color: transparent;
}
.line-container-mobile .line-active-mobile {
height: calc(var(--index) * 25% + 10%);
background-color: #008000;
border-radius: 9999px;
animation: line-animate-mobile 1s ease 0s 1 normal forwards running;
color: transparent;
}
@keyframes line-animate-mobile {
0% {
height: 0;
}
100% {
height: calc(var(--index) * 25% + 10%);
}
}
/* @media not all and (min-width: 810px) {
.line-container {
display: none;
}
.line-container-mobile {
display: block;
}
} */
@media not all and (min-width: 640px) {
.order-tracking-page-width {
padding: 20px 20px 40px 20px;
}
.order-tracking-header {
padding: 16px 0;
}
.order-tracking-input {
width: 180px;
}
.order-tracking-submit-btn {
padding: 0 16px;
margin-left: 8px;
}
.order-tracking-form {
padding: 60px;
}
.order-tracking-item {
padding: 8px 14px;
}
}
--></style>
<div class="order-tracking-page-width">
<h2 class="order-tracking-header">Track Your Order</h2>
<div>
<form class="order-tracking-form" onsubmit="handleSubmit(event)">
<div style="position: absolute; top: 0%; transform: translate(0, -110%);">Tracking Number</div>
<label style="position: relative;"><input name="orderNumber" type="text" class="order-tracking-input"> </label> <button type="submit" class="order-tracking-submit-btn"> <svg class="order-tracking-submit-btn-loading" viewbox="0 0 1024 1024" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"> <path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path> </svg> Track </button>
</form>
<h2 style="font-weight: 500;" class="order-tracking-title"></h2>
<div class="line-container">
<div style="background-color: #c6c6c6; position: relative;">
<div class="line">1</div>
<div class="icon-dot icon-dot-active" style="left: 0;">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" class="icon" fill="currentColor"> <path d="M17 18c-.551 0-1-.449-1-1 0-.551.449-1 1-1 .551 0 1 .449 1 1 0 .551-.449 1-1 1zM4 17c0 .551-.449 1-1 1-.551 0-1-.449-1-1 0-.551.449-1 1-1 .551 0 1 .449 1 1zM17.666 5.841L16.279 10H4V4.133l13.666 1.708zM17 14H4v-2h13a1 1 0 0 0 .949-.684l2-6a1 1 0 0 0-.825-1.308L4 2.117V1a1 1 0 0 0-1-1H1a1 1 0 0 0 0 2h1v12.184A2.996 2.996 0 0 0 0 17c0 1.654 1.346 3 3 3s3-1.346 3-3c0-.353-.072-.686-.184-1h8.368A2.962 2.962 0 0 0 14 17c0 1.654 1.346 3 3 3s3-1.346 3-3-1.346-3-3-3z"></path> </svg>
<div style="position: absolute; top: 20px;">
<div style="color: #121212bf; font-size: 12px; font-weight: bold; white-space: nowrap;">Ordered</div>
</div>
</div>
<div class="icon-dot icon-dot-active" style="left: 25%;">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" class="icon" fill="currentColor"> <path d="M19.901 4.581c-.004-.009-.002-.019-.006-.028l-2-4A1.001 1.001 0 0 0 17 0H3c-.379 0-.725.214-.895.553l-2 4c-.004.009-.002.019-.006.028A.982.982 0 0 0 0 5v14a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V5a.982.982 0 0 0-.099-.419zM2 18V6h7v1a1 1 0 0 0 2 0V6h7v12H2zM3.618 2H9v2H2.618l1-2zm13.764 2H11V2h5.382l1 2zM9 14H5a1 1 0 0 0 0 2h4a1 1 0 0 0 0-2m-4-2h2a1 1 0 0 0 0-2H5a1 1 0 0 0 0 2"></path> </svg>
<div style="position: absolute; top: 20px;">
<div style="color: #121212bf; font-size: 12px; font-weight: bold; white-space: nowrap;">Order Ready</div>
</div>
</div>
<div class="icon-dot icon-dot-active" style="left: 50%;">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" class="icon" fill="currentColor"> <path d="M17.816 14c-.415-1.162-1.514-2-2.816-2s-2.4.838-2.816 2H12v-4h6v4h-.184zM15 16c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zM5 16c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zM2 4h8v10H7.816C7.4 12.838 6.302 12 5 12s-2.4.838-2.816 2H2V4zm13.434 1l1.8 3H12V5h3.434zm4.424 3.485l-3-5C16.678 3.185 16.35 3 16 3h-4a1 1 0 0 0-1-1H1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h1.185C2.6 17.162 3.698 18 5 18s2.4-.838 2.816-2h4.37c.413 1.162 1.512 2 2.814 2s2.4-.838 2.816-2H19a1 1 0 0 0 1-1V9c0-.18-.05-.36-.142-.515z"></path> </svg>
<div style="position: absolute; top: 20px;">
<div style="color: #121212bf; font-size: 12px; font-weight: bold; white-space: nowrap;">In Transit</div>
</div>
</div>
<div class="icon-dot" style="left: 75%;">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" class="icon" style="right: -55%;" fill="currentColor"> <path d="M10 0C5.589 0 2 3.589 2 8c0 7.495 7.197 11.694 7.504 11.869a.996.996 0 0 0 .992 0C10.803 19.694 18 15.495 18 8c0-4.412-3.589-8-8-8m-.001 17.813C8.478 16.782 4 13.296 4 8c0-3.31 2.691-6 6-6s6 2.69 6 6c0 5.276-4.482 8.778-6.001 9.813M10 10c-1.103 0-2-.897-2-2s.897-2 2-2 2 .897 2 2-.897 2-2 2m0-6C7.794 4 6 5.794 6 8s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4"></path> </svg>
<div style="position: absolute; top: 20px; transform: translateX(-40%);">
<div style="color: #121212bf; font-size: 12px; font-weight: bold; white-space: nowrap;">Out for Delivery</div>
</div>
</div>
<div class="icon-dot" style="left: 100%; transform: translateX(-100%);">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="3.5 2 13 16" class="icon" style="right: -20%;" fill="currentColor"> <path d="M10 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8m0-14c-3.309 0-6 2.691-6 6s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6m-1 9a.997.997 0 0 1-.707-.293l-2-2a.999.999 0 1 1 1.414-1.414L9 10.586l3.293-3.293a.999.999 0 1 1 1.414 1.414l-4 4A.997.997 0 0 1 9 13"></path> </svg>
<div style="position: absolute; top: 20px; right: 0;">
<div style="color: #121212bf; font-size: 12px; font-weight: bold; white-space: nowrap;">Delivered</div>
</div>
</div>
</div>
</div>
<div class="line-container-mobile" style="--index: 2;">
<div class="line">
<div class="line-active-mobile">1</div>
</div>
<div style="display: flex; align-items: center; gap: 12px;">
<div class="icon-dot-mobile icon-dot-mobile-active" style="top: 0;">1</div>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" class="icon-mobile" fill="currentColor"> <path d="M17 18c-.551 0-1-.449-1-1 0-.551.449-1 1-1 .551 0 1 .449 1 1 0 .551-.449 1-1 1zM4 17c0 .551-.449 1-1 1-.551 0-1-.449-1-1 0-.551.449-1 1-1 .551 0 1 .449 1 1zM17.666 5.841L16.279 10H4V4.133l13.666 1.708zM17 14H4v-2h13a1 1 0 0 0 .949-.684l2-6a1 1 0 0 0-.825-1.308L4 2.117V1a1 1 0 0 0-1-1H1a1 1 0 0 0 0 2h1v12.184A2.996 2.996 0 0 0 0 17c0 1.654 1.346 3 3 3s3-1.346 3-3c0-.353-.072-.686-.184-1h8.368A2.962 2.962 0 0 0 14 17c0 1.654 1.346 3 3 3s3-1.346 3-3-1.346-3-3-3z"></path> </svg>
<div>
<div style="color: #121212bf; font-weight: bold; padding-bottom: 3px; font-size: 13px;">Ordered</div>
<div style="color: #121212bf; font-size: 12px;">Oct 30</div>
</div>
</div>
<div style="display: flex; align-items: center; gap: 12px; margin-top: 30px;">
<div class="icon-dot-mobile icon-dot-mobile-active" style="top: 25%;">1</div>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" class="icon-mobile" fill="currentColor"> <path d="M19.901 4.581c-.004-.009-.002-.019-.006-.028l-2-4A1.001 1.001 0 0 0 17 0H3c-.379 0-.725.214-.895.553l-2 4c-.004.009-.002.019-.006.028A.982.982 0 0 0 0 5v14a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V5a.982.982 0 0 0-.099-.419zM2 18V6h7v1a1 1 0 0 0 2 0V6h7v12H2zM3.618 2H9v2H2.618l1-2zm13.764 2H11V2h5.382l1 2zM9 14H5a1 1 0 0 0 0 2h4a1 1 0 0 0 0-2m-4-2h2a1 1 0 0 0 0-2H5a1 1 0 0 0 0 2"></path> </svg>
<div>
<div style="color: #121212bf; font-weight: bold; padding-bottom: 3px; font-size: 13px;">Order Ready</div>
<div style="color: #121212bf; font-size: 12px;">Oct 30</div>
</div>
</div>
<div style="display: flex; align-items: center; gap: 12px; margin-top: 30px;">
<div class="icon-dot-mobile icon-dot-mobile-active" style="top: 50%;">1</div>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" class="icon-mobile" fill="currentColor"> <path d="M17.816 14c-.415-1.162-1.514-2-2.816-2s-2.4.838-2.816 2H12v-4h6v4h-.184zM15 16c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zM5 16c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zM2 4h8v10H7.816C7.4 12.838 6.302 12 5 12s-2.4.838-2.816 2H2V4zm13.434 1l1.8 3H12V5h3.434zm4.424 3.485l-3-5C16.678 3.185 16.35 3 16 3h-4a1 1 0 0 0-1-1H1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h1.185C2.6 17.162 3.698 18 5 18s2.4-.838 2.816-2h4.37c.413 1.162 1.512 2 2.814 2s2.4-.838 2.816-2H19a1 1 0 0 0 1-1V9c0-.18-.05-.36-.142-.515z"></path> </svg>
<div>
<div style="color: #121212bf; font-weight: bold; padding-bottom: 3px; font-size: 13px;">In Transit</div>
<div style="color: #121212bf; font-size: 12px;">Oct 30</div>
</div>
</div>
<div style="display: flex; align-items: center; gap: 12px; margin-top: 30px;">
<div class="icon-dot-mobile icon-dot-mobile-active" style="top: 75%;">1</div>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" class="icon-mobile" style="right: -55%;" fill="currentColor"> <path d="M10 0C5.589 0 2 3.589 2 8c0 7.495 7.197 11.694 7.504 11.869a.996.996 0 0 0 .992 0C10.803 19.694 18 15.495 18 8c0-4.412-3.589-8-8-8m-.001 17.813C8.478 16.782 4 13.296 4 8c0-3.31 2.691-6 6-6s6 2.69 6 6c0 5.276-4.482 8.778-6.001 9.813M10 10c-1.103 0-2-.897-2-2s.897-2 2-2 2 .897 2 2-.897 2-2 2m0-6C7.794 4 6 5.794 6 8s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4"></path> </svg>
<div>
<div style="color: #121212bf; font-weight: bold; padding-bottom: 3px; font-size: 13px;">Out for Delivery</div>
<div style="color: #121212bf; font-size: 12px;">Oct 30</div>
</div>
</div>
<div style="display: flex; align-items: center; gap: 12px; margin-top: 30px;">
<div class="icon-dot-mobile icon-dot-mobile-active" style="top: 100%; transform: translateY(-100%);">1</div>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="3.5 2 13 16" class="icon-mobile" style="right: -20%;" fill="currentColor"> <path d="M10 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8m0-14c-3.309 0-6 2.691-6 6s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6m-1 9a.997.997 0 0 1-.707-.293l-2-2a.999.999 0 1 1 1.414-1.414L9 10.586l3.293-3.293a.999.999 0 1 1 1.414 1.414l-4 4A.997.997 0 0 1 9 13"></path> </svg>
<div>
<div style="color: #121212bf; font-weight: bold; padding-bottom: 3px; font-size: 13px;">Delivered</div>
<div style="color: #121212bf; font-size: 12px;">Oct 30</div>
</div>
</div>
</div>
<div class="order-tracking-list"></div>
</div>
</div>
<script>
const status = {
Ordered: 0,
"Order Ready": 1,
"In Transit": 2,
"Out for Delivery": 3,
Delivered: 4
}
let loading = false
const container = document.querySelector(".order-tracking-list")
const title = document.querySelector(".order-tracking-title")
const lineContainer = document.querySelector(".line-container")
const lineContainerMobile = document.querySelector(".line-container-mobile")
const loadingIcon = document.querySelector(".order-tracking-submit-btn-loading")
const dot = document.querySelectorAll(".icon-dot")
const dotMobile = document.querySelectorAll(".icon-dot-mobile")
const iconMobile = document.querySelectorAll(".icon-mobile")
function getItemHtml(timeLine, content, hasNext) {
return `
<div style="display: flex; gap: 26px">
<div style="background-color: #f5f6fa; width: 5px; position: relative">
<div class="dot">1</div>
</div>
<div class="order-tracking-item" style="margin-bottom: ${hasNext ? "var(--gap)" : "0px"}">
<p style="margin: 0 0 12px; color: #999; font-size: 12px">${timeLine}</p>
<p style="margin: 0; color: #121212bf; font-size: 14px">
${content}
</p>
<div class="arrow">1</div>
</div>
</div>
`
}
async function handleSubmit(event) {
event.preventDefault()
if (loading) return
const formData = new FormData(event.target)
const orderNumber = formData.get("orderNumber")
// for (var pair of formData.entries()) {
// console.log(pair[0]+ ': ' + pair[1]);
// }
// await getOrderTrack()
try {
loading = true
loadingIcon.style.display = "block"
const res = await fetch(
`https://tracking.ecomquant.com/api/track-order?trackingNumber=${orderNumber}`,
{
headers: {
Authorization: "Bearer qyArvZmrTuFcwM90UA0UDMdzxJ+1kfDH"
}
}
).then((res) => res.json())
if (!res.latestStatus) throw null
const index = status[res.latestStatus]
let str = ""
const events = res.tracking.providers[0].events
for (let i = 0; i < events.length; i++) {
str += getItemHtml(
`${new Date(events[i].time_iso).toDateString()}`,
`${events[i].description}`,
i !== events.length - 1
)
}
container.innerHTML = str
if (window.innerWidth <= 810) {
lineContainerMobile.style.display = "block"
lineContainer.style.display = "none"
} else {
lineContainerMobile.style.display = "none"
lineContainer.style.display = "block"
}
lineContainer.style.setProperty("--index", "3")
lineContainerMobile.style.setProperty("--index", "3")
for (let i = 0; i < dot.length; i++) {
if (i <= 3) {
dot[i].classList.add("icon-dot-active")
dotMobile[i].classList.add("icon-dot-active")
iconMobile[i].setAttribute("fill", "#000")
} else {
dot[i].classList.remove("icon-dot-active")
dotMobile[i].classList.remove("icon-dot-active")
iconMobile[i].setAttribute("fill", "#c6c6c6")
}
}
} catch (error) {
console.log(error)
container.innerHTML =
"<h1 style='padding: 60px 0 35px; text-align: center; font-size: 20px'>Could Not Find Order</h1>"
lineContainerMobile.style.display = "none"
lineContainer.style.display = "none"
}
loading = false
loadingIcon.style.display = "none"
title.innerHTML = `Order: #${orderNumber}`
}
function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
const regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
const results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}
document.addEventListener('DOMContentLoaded', function() {
const orderNumber = getUrlParameter('orderNumber') || getUrlParameter('nums');
if (orderNumber) {
document.querySelector('input[name="orderNumber"]').value = orderNumber;
const form = document.querySelector('.order-tracking-form');
form.dispatchEvent(new Event('submit'));
}
});
</script>
