Discount Banner and Discount Applicator

<div id="dealBanner" class="deal-banner">
  <div class="deal-text">
    <h3>Special Discounts <span>UNLOCKED</span></h3>
    <p>Apply your discount codes.</p>
    <div class="add-btn" onclick="addToCart(this)">Apply</div>
  </div>
</div>
Superfans.listeners.onCartUpdated(() => {
  const cart = Superfans.variables.cart;
  clearDiscounts();
});

function addToCart(button) {
  Superfans.actions.applyDiscount(["SAVE10"])
    .then(() => {
      button.classList.add("added");
      button.textContent = "Applied";
    })
    .catch(() => {
      Superfans.actions.showToast({
        title: "No active Discount",
        message: "Please check if the discount is valid",
      });
    });
}

function clearDiscounts() {
  Superfans.actions.applyDiscount([]);
}

if (Superfans.variables.cart.subtotal > 0) {
  const banner = document.getElementById("dealBanner");
  if (banner) banner.style.display = "flex";
}

Did this page help you?