Custom Add To Cart With Quantity

<div class="quantity-container">
   <t3 class="label">Quantity</t3>
   <div class="quantity-selector">
       <button id="decrease">−</button>
       <span id="quantity">1</span>
       <button id="increase">+</button>
   </div>
   <filled-button class="add-to-bag" id="add-to-bag">
       <span class="btn-text">Add to Bag</span>
       <img src="https://res.cloudinary.com/dixyq8hvr/image/upload/v1747722131/cupertino_activity_indicator_zze4pb.gif" class="gif-loader" style="display: none;" alt="loading">
   </filled-button>
</div>

.quantity-container {
   display: flex;
   flex-direction: column;
   gap: 12px;
   box-sizing: border-box;
   padding: 12px;
   justify-content: center;
}
.label {
   font-size: 16px;
   font-weight: 500;
}
.quantity-selector {
   display: flex;
   align-items: center;
   border: 1px solid #111;
   width: fit-content;
   padding: 8px 16px;
   gap: 20px;
   font-size: 18px;
   font-weight: 500;
}
.quantity-selector button {
   background: none;
   border: none;
   font-size: 20px;
   cursor: pointer;
   user-select: none;
   color: #111;
}
.add-to-bag {
   padding:12px 16px;
   width: 100%;
}
.gif-loader {
   height: 12px;
   width: auto;
   display: inline-block;
   object-fit: contain;
   margin: 0;
}

let quantity = 1;
let currentVariantId = VajroSDK.variables.product?.selectedVariant?.id;
const quantityDisplay = document.getElementById("quantity");
const btnIncrease = document.getElementById("increase");
const btnDecrease = document.getElementById("decrease");
const btnAddToBag = document.getElementById("add-to-bag");
const btnText = document.querySelector(".btn-text");
const loader = document.querySelector(".gif-loader");
// ➕ Quantity controls
btnIncrease.addEventListener("click", () => {
    quantity++;
    quantityDisplay.textContent = quantity;
});
btnDecrease.addEventListener("click", () => {
    if (quantity > 1) {
        quantity--;
        quantityDisplay.textContent = quantity;
    }
});
// 🛒 Add to cart handler
btnAddToBag.addEventListener("click", async () => {
    const variantId = VajroSDK.variables.product.selectedVariant.id
    btnText.style.display = "none";
    loader.style.display = "inline-block";
    try {
       
        await new Promise(resolve => setTimeout(resolve, 500));
        await VajroSDK.actions.addToCart([{ variantId, quantity }]);
        await VajroSDK.actions.showToast({
            title: "Added to Cart",
            message: "Your item has been successfully added!",
        });
    } catch (err) {
        await VajroSDK.actions.showAlert({
            title: "Error",
            message: "Failed to add product: " + err.message
        });
    } finally {
        btnText.style.display = "inline";
        loader.style.display = "none";
    }
});
// 🟠 Update button state based on variant availability
function updateAddToBagButton() {
    const variant = VajroSDK.variables.product?.selectedVariant;
    const isAvailable = variant?.quantityAvailable > 0;
    btnAddToBag.disabled = !isAvailable;
    btnText.textContent = isAvailable ? "Add to Cart" : "Sold Out";
    if (!isAvailable) {
        btnAddToBag.style.backgroundColor = "#ccc";
        btnAddToBag.style.color = "#666";
        btnAddToBag.style.cursor = "not-allowed";
    }
    else {
        console.log("button enabled")
        btnAddToBag.style.cursor = "pointer";
    }
}
// 🔄 Listen for variant change
VajroSDK.listeners.onVariantChanged(() => {
    const updatedVariant = VajroSDK.variables.product?.selectedVariant;
    if (updatedVariant?.id) {
        currentVariantId = updatedVariant.id;
        quantity = 1;
        quantityDisplay.textContent = quantity;
    }
    updateAddToBagButton();
});
// 🔄 Initial load
updateAddToBagButton();