Add 2 minute modal

User
<script>
(function () {
  const DURATION = 5 * 60 * 1000; // 20 minutes
  const DEADLINE_KEY = "cart_deadline"; // localStorage key
  const ORDER_KEY = "fossettsOrderData"; // your order data key

  // Get deadline from localStorage or set new
  let deadline = localStorage.getItem(DEADLINE_KEY);
  if (!deadline) {
    deadline = Date.now() + DURATION;
    localStorage.setItem(DEADLINE_KEY, deadline);
  } else {
    deadline = parseInt(deadline, 10);
  }

  function updateTimers() {
    const now = Date.now();
    let remaining = deadline - now;

    if (remaining <= 0) {
      document.querySelectorAll(".order_timer").forEach(el => {
        el.innerHTML = `<span style="font-weight: bold;font-size:24px">Cart expired - please <a href="javascript:void(0);" onclick="location.reload();">refresh</a> and start again</span>`;
      });
      clearInterval(timerInterval);

      // Clear storage after time up
      localStorage.removeItem(DEADLINE_KEY);

      localStorage.removeItem(ORDER_KEY);
 // Clear in-memory JS orderData, if present
 const quantitySelectors = document.querySelectorAll(".quantity-value");

quantitySelectors.forEach(el => {
  el.value = "0"; // reset each input’s value
});
 if (orderData) {

      try {
        // normalize to your expected structure
        orderData.tickets = Array.isArray(orderData.tickets) ? [] : [];
        orderData.addOns  = Array.isArray(orderData.addOns)  ? [] : [];
        orderData.total   = 0;
      } catch (e) {
        // fallback: hard reset
        orderData = { tickets: [], addOns: [], total: 0 };
      }
    }

    // Call custom UI updater if available
    if (typeof updateOrderSummary === "function") {
      try { updateOrderSummary(); } catch (_) {}
    }
      console.log("⏰ Time's up — fossettsOrderData cleared");
      //window.location.href = "/";
      return;
    }

    const minutes = Math.floor(remaining / 1000 / 60);
    const seconds = Math.floor((remaining / 1000) % 60);

    const formatted =
      `<div style="font-weight: bold;font-size:24px">Complete your order in ${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")} minutes</div>`;

    document.querySelectorAll(".order_timer").forEach(el => {
      el.innerHTML = formatted;
    });
  }

  // Start ticking
  updateTimers();
  const timerInterval = setInterval(updateTimers, 1000);
})();
</script>

Now add a modal to show Swal.fire({
title: "The Internet?",
text: "That thing is still around?",
icon: "question"
});
appear when two min left

Assistant
<script>
(function () {
  const DURATION = 20 * 60 * 1000; // 20 minutes
  const TWO_MINUTE_MS = 2 * 60 * 1000;
  const DEADLINE_KEY = "cart_deadline"; // localStorage key
  const ORDER_KEY = "fossettsOrderData"; // your order data key

  // Get/set deadline
  let deadline = localStorage.getItem(DEADLINE_KEY);
  if (!deadline) {
    deadline = Date.now() + DURATION;
    localStorage.setItem(DEADLINE_KEY, deadline);
  } else {
    deadline = parseInt(deadline, 10);
  }

  // Use a per-deadline key so the 2-min warning fires once per countdown, even across refreshes
  const WARNED_KEY = `cart_twomin_warned_${deadline}`;

  function updateTimers() {
    const now = Date.now();
    let remaining = deadline - now;

    // Show 2-minute warning (once)
    if (remaining > 0 && remaining <= TWO_MINUTE_MS && !localStorage.getItem(WARNED_KEY)) {
      try {
        if (typeof Swal !== "undefined" && Swal && typeof Swal.fire === "function") {
          Swal.fire({
            title: "Heads up!",
            text: "Only 2 minutes left to complete your order.",
            icon: "warning",
            confirmButtonText: "Okay"
          });
        }
      } catch (_) {}
      localStorage.setItem(WARNED_KEY, "1");
    }

    if (remaining <= 0) {
      document.querySelectorAll(".order_timer").forEach(el => {
        el.innerHTML = `<span style="font-weight: bold;font-size:24px">Cart expired - please <a href="javascript:void(0);" onclick="location.reload();">refresh</a> and start again</span>`;
      });
      clearInterval(timerInterval);

      // Clear storage after time up
      localStorage.removeItem(DEADLINE_KEY);
      localStorage.removeItem(ORDER_KEY);
      localStorage.removeItem(WARNED_KEY);

      // Reset any quantity inputs
      const quantitySelectors = document.querySelectorAll(".quantity-value");
      quantitySelectors.forEach(el => { el.value = "0"; });

      // Clear in-memory JS orderData, if present
      try {
        if (typeof orderData !== "undefined" && orderData) {
          orderData.tickets = [];
          orderData.addOns  = [];
          orderData.total   = 0;
        }
      } catch (_) {
        // ignore
      }

      // Call custom UI updater if available
      if (typeof updateOrderSummary === "function") {
        try { updateOrderSummary(); } catch (_) {}
      }

      console.log("⏰ Time's up — fossettsOrderData cleared");
      // window.location.href = "/";
      return;
    }

    const minutes = Math.floor(remaining / 1000 / 60);
    const seconds = Math.floor((remaining / 1000) % 60);

    const formatted = `<div style="font-weight: bold;font-size:24px">Complete your order in ${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")} minutes</div>`;
    document.querySelectorAll(".order_timer").forEach(el => { el.innerHTML = formatted; });
  }

  // Start ticking
  updateTimers();
  const timerInterval = setInterval(updateTimers, 1000);
})();
</script>

Leave a Comment

Your email address will not be published. Required fields are marked *