Как сделать простую страницу трекинга отправленных заказов без сторонних интеграций

Один мой британский заказчик обратился ко мне с доработкой его сайта на Shopify:

У нас изменились партнеры по доставке, вместо нескольких провайдеров мы используем только одного. Тот скрипт за который мы платим абонентскую плату больше не нужен, сможешь сделать так чтобы мы могли предоставить простой способ отслеживания посылок на нашем веб-сайте?

Учитывая, что всего один провайдер для трекинга, то задача не хитрая. Тем более что сервис, который мы использовали до этого оказался достаточно глючный, при этом подписку в размере 12 фунтов списывал ежемесячно.

форма для отслеживания посылки — Вот такая форма получилась через пару часов работы

Для реализации этой задачи был следующий план:

Создать форму на сайте
Написать скрипт, который будет проверять похож ли трек на настоящий и перебрасывать в новую вкладку сервиса по доставке
Ошибку сразу отображать около формы
Отправлять форму как по кнопке, так и по нажатию Enter на клавиатуре
Сделать аккуратные стили CSS

Создаем простую форму html (ее можно использовать на любом сайте не важно, что это shopify:

<h1>Track My Order</h1>

<div class="natrack">

<!-- Текстовое поле для ввода трек-номера -->
<div style="position:relative;">
  <input type="text" id="trackingNumber" placeholder="Enter your tracking number">
  <!-- Tooltip -->
  <div id="tooltip" class="tooltip">Invalid tracking number. It should start with 'A' and have more than 8 digits.</div>
</div>

<!-- Кнопка для отслеживания заказа -->
<button onclick="trackOrder()">Track</button>

</div>

Валидация

Задача простая, потому что для доставки используется Amazon UK Delivery, и у каждого трека есть определенный шаблон: "A#########". Все треки начинаются с буквы "A", а дальше циферное значение, точное количество цифр после А я не нашел, поэтому чтобы не возникало проблем указал минимум 8.

Вот такой простой скрипт получился (все детально задокументировано для вашего удобства):

// Функция для отслеживания заказа
function trackOrder() {
  // Получаем трек-номер из текстового поля
  const trackingNumber = document.getElementById("trackingNumber").value;

  // Получаем элемент tooltip
  const tooltip = document.getElementById("tooltip");

  // Проверяем, начинается ли трек-номер с 'A' и состоит ли он из более чем 8 символов
  if (trackingNumber.startsWith("A") && trackingNumber.length > 8 && /^[A][0-9]+$/.test(trackingNumber)) {
    // Скрываем tooltip
    tooltip.classList.remove("show-tooltip");
    // Открываем новую вкладку с URL для отслеживания заказа
    window.open(`https://track.amazon.co.uk/tracking/${trackingNumber}`, '_blank');
  } else {
    // Показываем tooltip
    tooltip.classList.add("show-tooltip");
  }
}

// Обработчик события для текстового поля
document.getElementById("trackingNumber").addEventListener("keydown", function(event) {
  // Проверяем, является ли нажатая клавиша "Enter"
  if (event.key === "Enter") {
    // Предотвращаем действие по умолчанию (переход на новую строку, например)
    event.preventDefault();
    // Вызываем функцию для отслеживания заказа
    trackOrder();
  }
});

Катэгорыі