Track Order

<!-- ============================================================
  UNIVERSAL — Order Tracking Page (black & white)
  Drop into Shopify Custom Liquid block on the Track Order page.
  Scoped to .soa-track — won't affect anything else.

  How it works:
  - Customer enters tracking number → form submit
  - JS embeds 17track.net iframe with that number
  - Backup buttons open 17track or parcelsapp in new tab
============================================================ -->

<style>
  .soa-track {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    color: #1A1A1A;
    max-width: 880px;
    margin: 0 auto;
    padding: 40px 20px 60px;
    box-sizing: border-box;
  }
  .soa-track * { box-sizing: border-box; }

  /* ---------- Hero ---------- */
  .soa-track__hero {
    text-align: center;
    margin-bottom: 32px;
  }
  .soa-track__title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 10px;
    color: #1A1A1A;
  }
  .soa-track__sub {
    font-size: 15px;
    color: #4A4A4A;
    font-weight: 400;
    margin: 0;
    line-height: 1.5;
  }

  /* ---------- Form ---------- */
  .soa-track__form {
    display: flex;
    gap: 10px;
    max-width: 560px;
    margin: 0 auto 12px;
    background: #fff;
    border: 1px solid #ECECEC;
    border-radius: 999px;
    padding: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.04);
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .soa-track__form:focus-within {
    border-color: #1A1A1A;
    box-shadow: 0 4px 22px rgba(0,0,0,.10);
  }
  .soa-track__input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 14px 20px;
    font-family: inherit;
    font-size: 15px;
    color: #1A1A1A;
    outline: none;
    min-width: 0;
  }
  .soa-track__input::placeholder {
    color: #9A9A9A;
  }
  .soa-track__btn {
    background: #1A1A1A;
    color: #fff;
    border: none;
    padding: 0 28px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
    white-space: nowrap;
  }
  .soa-track__btn:hover {
    background: #000;
    transform: translateY(-1px);
  }
  .soa-track__btn:active {
    transform: translateY(0);
  }

  .soa-track__hint {
    text-align: center;
    font-size: 12.5px;
    color: #8A8A8A;
    margin: 0 0 32px;
  }
  .soa-track__hint a {
    color: #1A1A1A;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid #1A1A1A;
  }

  /* ---------- Result area ---------- */
  .soa-track__result {
    display: none;
    margin: 0 0 40px;
  }
  .soa-track__result.is-active {
    display: block;
  }

  .soa-track__result-head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #F5F5F5;
    border: 1px solid #ECECEC;
    border-radius: 14px 14px 0 0;
  }
  .soa-track__result-label {
    font-size: 13px;
    color: #4A4A4A;
  }
  .soa-track__result-label strong {
    color: #1A1A1A;
    font-weight: 600;
    margin-left: 6px;
    font-size: 14px;
  }
  .soa-track__result-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .soa-track__link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: #1A1A1A;
    border: 1px solid #ECECEC;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease;
  }
  .soa-track__link-btn:hover {
    border-color: #1A1A1A;
    color: #000;
  }
  .soa-track__link-btn svg {
    width: 12px;
    height: 12px;
  }

  .soa-track__iframe-wrap {
    position: relative;
    background: #fff;
    border: 1px solid #ECECEC;
    border-top: none;
    border-radius: 0 0 14px 14px;
    overflow: hidden;
    min-height: 500px;
  }
  .soa-track__iframe-wrap iframe {
    width: 100%;
    height: 600px;
    border: none;
    display: block;
  }

  /* ---------- Help section ---------- */
  .soa-track__help {
    border-top: 1px solid #ECECEC;
    padding-top: 32px;
  }
  .soa-track__help-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px;
    text-align: center;
  }
  .soa-track__help-sub {
    text-align: center;
    font-size: 13.5px;
    color: #8A8A8A;
    margin: 0 0 22px;
  }
  .soa-track__faq-item {
    border-bottom: 1px solid #ECECEC;
  }
  .soa-track__faq-item:first-of-type {
    border-top: 1px solid #ECECEC;
  }
  .soa-track__faq-q {
    list-style: none;
    cursor: pointer;
    padding: 16px 4px;
    font-size: 14.5px;
    font-weight: 600;
    color: #1A1A1A;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    user-select: none;
  }
  .soa-track__faq-q::-webkit-details-marker { display: none; }
  .soa-track__faq-q::after {
    content: '+';
    color: #1A1A1A;
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    flex-shrink: 0;
  }
  .soa-track__faq-item[open] .soa-track__faq-q::after {
    content: '−';
  }
  .soa-track__faq-a {
    padding: 0 4px 18px;
    color: #4A4A4A;
    font-size: 13.5px;
    line-height: 1.6;
  }
  .soa-track__faq-a p { margin: 0 0 10px; }
  .soa-track__faq-a p:last-child { margin-bottom: 0; }
  .soa-track__faq-a a {
    color: #1A1A1A;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid #1A1A1A;
  }

  /* ---------- Contact card ---------- */
  .soa-track__contact {
    background: #F5F5F5;
    border: 1px solid #ECECEC;
    border-radius: 14px;
    padding: 24px 22px;
    text-align: center;
    margin-top: 28px;
  }
  .soa-track__contact-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 12px;
    background: #1A1A1A;
    color: #fff;
    border-radius: 50%;
    display: grid;
    place-items: center;
  }
  .soa-track__contact-icon svg {
    width: 20px;
    height: 20px;
  }
  .soa-track__contact-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 6px;
    color: #1A1A1A;
  }
  .soa-track__contact-text {
    font-size: 13.5px;
    color: #4A4A4A;
    margin: 0 0 14px;
    line-height: 1.5;
  }
  .soa-track__contact-link,
  .soa-track__contact-link:link,
  .soa-track__contact-link:visited,
  .soa-track__contact-link:hover,
  .soa-track__contact-link:active,
  .soa-track__contact-link:focus {
    display: inline-block;
    background: #1A1A1A;
    color: #ffffff !important;
    padding: 12px 24px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: .5px;
    transition: background .2s ease, transform .2s ease;
  }
  .soa-track__contact-link:hover {
    background: #000;
    transform: translateY(-1px);
    color: #ffffff !important;
  }

  /* ---------- Trust strip ---------- */
  .soa-track__trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid #ECECEC;
  }
  .soa-track__trust-item {
    text-align: center;
    padding: 12px 8px;
  }
  .soa-track__trust-icon {
    width: 36px;
    height: 36px;
    margin: 0 auto 10px;
    background: #F5F5F5;
    color: #1A1A1A;
    border: 1px solid #ECECEC;
    border-radius: 50%;
    display: grid;
    place-items: center;
  }
  .soa-track__trust-icon svg {
    width: 18px;
    height: 18px;
  }
  .soa-track__trust-title {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 2px;
    color: #1A1A1A;
  }
  .soa-track__trust-text {
    font-size: 12px;
    color: #8A8A8A;
    margin: 0;
    line-height: 1.4;
  }

  /* ---------- Error message ---------- */
  .soa-track__error {
    display: none;
    text-align: center;
    color: #1A1A1A;
    font-size: 13px;
    font-weight: 500;
    margin: 0 auto 24px;
    padding: 10px 18px;
    background: #F5F5F5;
    border: 1px solid #1A1A1A;
    border-radius: 10px;
    max-width: 560px;
  }
  .soa-track__error.is-active {
    display: block;
  }

  /* ---------- Mobile ---------- */
  @media (max-width: 600px) {
    .soa-track {
      padding: 24px 14px 48px;
    }
    .soa-track__form {
      flex-direction: column;
      border-radius: 18px;
      padding: 10px;
      gap: 8px;
    }
    .soa-track__input {
      padding: 12px 14px;
      font-size: 15px;
      text-align: center;
    }
    .soa-track__btn {
      padding: 14px 24px;
      width: 100%;
      border-radius: 12px;
    }
    .soa-track__result-head {
      padding: 14px 16px;
      border-radius: 12px 12px 0 0;
    }
    .soa-track__iframe-wrap {
      border-radius: 0 0 12px 12px;
      min-height: 400px;
    }
    .soa-track__iframe-wrap iframe {
      height: 500px;
    }
    .soa-track__trust {
      grid-template-columns: 1fr;
      gap: 8px;
    }
    .soa-track__trust-item {
      display: flex;
      align-items: center;
      gap: 14px;
      text-align: left;
      padding: 10px 4px;
    }
    .soa-track__trust-icon {
      margin: 0;
      flex-shrink: 0;
    }
    .soa-track__contact {
      padding: 20px 16px;
    }
  }
</style>

<div class="soa-track">

  <!-- ===== HERO ===== -->
  <div class="soa-track__hero">
    <h1 class="soa-track__title">Track Your Order</h1>
    <p class="soa-track__sub">Enter your tracking number below to see the latest status of your shipment.</p>
  </div>

  <!-- ===== FORM ===== -->
  <form class="soa-track__form" id="soaTrackForm" autocomplete="off">
    <input type="text" class="soa-track__input" id="soaTrackInput" placeholder="Enter your tracking number" aria-label="Tracking number" required>
    <button type="submit" class="soa-track__btn">Track</button>
  </form>

  <p class="soa-track__hint">
    Your tracking number was sent to you via email after your order shipped.
  </p>

  <!-- ===== ERROR ===== -->
  <div class="soa-track__error" id="soaTrackError">
    Please enter a valid tracking number.
  </div>

  <!-- ===== RESULT ===== -->
  <div class="soa-track__result" id="soaTrackResult">
    <div class="soa-track__result-head">
      <div class="soa-track__result-label">
        Tracking number:
        <strong id="soaTrackNumber"></strong>
      </div>
      <div class="soa-track__result-actions">
        <a href="#" target="_blank" rel="noopener" class="soa-track__link-btn" id="soaTrackLink17">
          Open in 17track
          <svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M14 3h7v7"></path><path d="M21 3l-9 9"></path><path d="M10 3H4v17h17v-6"></path>
          </svg>
        </a>
        <a href="#" target="_blank" rel="noopener" class="soa-track__link-btn" id="soaTrackLinkParcels">
          Open in ParcelsApp
          <svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M14 3h7v7"></path><path d="M21 3l-9 9"></path><path d="M10 3H4v17h17v-6"></path>
          </svg>
        </a>
      </div>
    </div>

    <div class="soa-track__iframe-wrap">
      <iframe id="soaTrackIframe" src="" title="Tracking results" loading="lazy"></iframe>
    </div>
  </div>

  <!-- ===== HELP ===== -->
  <div class="soa-track__help">
    <h2 class="soa-track__help-title">Need help?</h2>
    <p class="soa-track__help-sub">Quick answers to the most common tracking questions</p>

    <details class="soa-track__faq-item">
      <summary class="soa-track__faq-q">Where do I find my tracking number?</summary>
      <div class="soa-track__faq-a">
        <p>Your tracking number was sent to the email address you used at checkout, in our "Your order has shipped" email. It usually arrives 24–48 hours after you place your order.</p>
        <p>If you can't find the email, please check your spam or promotions folder. Still no luck? Contact us at <a href="mailto:info@soalora.com">info@soalora.com</a> and we'll resend it.</p>
      </div>
    </details>

    <details class="soa-track__faq-item">
      <summary class="soa-track__faq-q">How long does shipping take?</summary>
      <div class="soa-track__faq-a">
        <p>Orders are dispatched within 24–48 hours of being placed. From there, delivery typically takes <strong>7–12 business days</strong>, depending on your location.</p>
        <p>You can upgrade to insured priority shipping at checkout for faster handling.</p>
      </div>
    </details>

    <details class="soa-track__faq-item">
      <summary class="soa-track__faq-q">My tracking hasn't updated in a few days — should I worry?</summary>
      <div class="soa-track__faq-a">
        <p>It's completely normal for tracking to go quiet for several days while your package is in transit between carriers, especially during international handoffs. Updates resume as soon as the next carrier scans the package.</p>
        <p>If there's no update for more than 10 days, please reach out to <a href="mailto:info@soalora.com">info@soalora.com</a> and we'll look into it for you.</p>
      </div>
    </details>

    <details class="soa-track__faq-item">
      <summary class="soa-track__faq-q">I haven't received my tracking number yet</summary>
      <div class="soa-track__faq-a">
        <p>Tracking numbers are emailed within 24–48 hours of placing your order, once the package has been picked up by the carrier. If it's been longer than 48 hours, please contact us at <a href="mailto:info@soalora.com">info@soalora.com</a>.</p>
      </div>
    </details>
  </div>

  <!-- ===== CONTACT CARD ===== -->
  <div class="soa-track__contact">
    <div class="soa-track__contact-icon">
      <svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
        <polyline points="22,6 12,13 2,6"></polyline>
      </svg>
    </div>
    <p class="soa-track__contact-title">Still have questions?</p>
    <p class="soa-track__contact-text">Our support team is here to help. Email us anytime and we'll get back to you within 24 hours.</p>
    <a href="mailto:info@soalora.com" class="soa-track__contact-link">info@soalora.com</a>
  </div>

  <!-- ===== TRUST STRIP ===== -->
  <div class="soa-track__trust">
    <div class="soa-track__trust-item">
      <div class="soa-track__trust-icon">
        <svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <rect x="1" y="3" width="15" height="13"></rect>
          <polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon>
          <circle cx="5.5" cy="18.5" r="2.5"></circle>
          <circle cx="18.5" cy="18.5" r="2.5"></circle>
        </svg>
      </div>
      <div>
        <p class="soa-track__trust-title">Free Worldwide Shipping</p>
        <p class="soa-track__trust-text">On every order, no minimums</p>
      </div>
    </div>

    <div class="soa-track__trust-item">
      <div class="soa-track__trust-icon">
        <svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 2 L20 6 V12 C20 17 16 21 12 22 C8 21 4 17 4 12 V6 Z"></path>
          <path d="M9 12 L11 14 L15 10"></path>
        </svg>
      </div>
      <div>
        <p class="soa-track__trust-title">30-Day Money-Back</p>
        <p class="soa-track__trust-text">Risk-free satisfaction promise</p>
      </div>
    </div>

    <div class="soa-track__trust-item">
      <div class="soa-track__trust-icon">
        <svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
        </svg>
      </div>
      <div>
        <p class="soa-track__trust-title">Friendly Support</p>
        <p class="soa-track__trust-text">We reply within 24 hours</p>
      </div>
    </div>
  </div>

</div>

<script>
(function () {
  var form     = document.getElementById('soaTrackForm');
  var input    = document.getElementById('soaTrackInput');
  var error    = document.getElementById('soaTrackError');
  var result   = document.getElementById('soaTrackResult');
  var numberEl = document.getElementById('soaTrackNumber');
  var iframe   = document.getElementById('soaTrackIframe');
  var link17   = document.getElementById('soaTrackLink17');
  var linkPa   = document.getElementById('soaTrackLinkParcels');

  if (!form) return;

  // Optional: pre-fill from URL ?n=TRACKINGNUMBER
  var urlParams = new URLSearchParams(window.location.search);
  var preset = urlParams.get('n') || urlParams.get('number') || urlParams.get('tracking');
  if (preset) {
    input.value = preset.trim();
    setTimeout(function () { form.requestSubmit ? form.requestSubmit() : form.dispatchEvent(new Event('submit')); }, 100);
  }

  form.addEventListener('submit', function (e) {
    e.preventDefault();

    var num = (input.value || '').trim();

    // Basic validation — tracking numbers are typically 8-40 alphanumeric chars
    if (!num || num.length < 6 || !/^[A-Za-z0-9\-]+$/.test(num)) {
      error.textContent = 'Please enter a valid tracking number (letters and numbers only, at least 6 characters).';
      error.classList.add('is-active');
      result.classList.remove('is-active');
      input.focus();
      return;
    }

    error.classList.remove('is-active');

    // Update labels and links
    numberEl.textContent = num;

    // 17track embed-friendly URL
    var url17embed = 'https://t.17track.net/en#nums=' + encodeURIComponent(num);
    var url17full  = 'https://www.17track.net/en/track?nums=' + encodeURIComponent(num);
    var urlParcels = 'https://parcelsapp.com/en/tracking/' + encodeURIComponent(num);

    iframe.src = url17embed;
    link17.href = url17full;
    linkPa.href = urlParcels;

    result.classList.add('is-active');

    // Scroll into view smoothly
    setTimeout(function () {
      result.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }, 50);
  });
})();
</script>