Free Shipping

<div id="banner" class="banner">
  <div id="progress-banner" class="banner-state">
    <t5 id="shipping-text" class="shipping-text"></t5>
    <div id="progress-container">
      <div id="progress-bar"></div>
    </div>
  </div>
  <div id="unlocked-banner" class="unlocked-banner" style="display: none;">
    <t5 class="shipping-unlocked-text">Free shipping unlocked!</t5>
  </div>
</div>

const SHIPPING_THRESHOLD = 10;
const cart = Superfans.variables.cart;
const subtotal = cart?.subtotal || 0;

function updateBannerUI(subtotalAmount) {
  const text = document.getElementById("shipping-text");
  const bar = document.getElementById("progress-bar");
  const progressBanner = document.getElementById("progress-banner");
  const unlockedBanner = document.getElementById("unlocked-banner");
  const remaining = SHIPPING_THRESHOLD - subtotalAmount;
  const progress = Math.min((subtotalAmount / SHIPPING_THRESHOLD) * 100, 100);

  if (subtotalAmount >= SHIPPING_THRESHOLD) {
    progressBanner.style.display = "none";
    unlockedBanner.style.display = "flex";
  } else {
    progressBanner.style.display = "flex";
    unlockedBanner.style.display = "none";
    text.innerHTML = `Add <strong>$${remaining.toFixed(2)}</strong> more to unlock free shipping`;
    bar.style.width = `${progress}%`;
  }
}

updateBannerUI(subtotal);

Superfans.listeners.onCartUpdated(() => {
  const updatedCart = Superfans.variables.cart;
  const updatedSubtotal = updatedCart?.subtotal || 0;
  updateBannerUI(updatedSubtotal);
});