Product Showcase

<div class="latest-drop-container">
 <t2 class="section-title">OUR LATEST DROP</t2>
 <div class="product-card">
   <div class="image-wrapper shimmer" id="imageWrapper">
     <img id="productImage" style="display: none;" />
   </div>
   <t3 class="product-title" id="productTitle">Loading...</t3>
   <t4 class="product-price" id="productPrice"></t4>
   <filled-button id="addToCartBtn" style="display: none;">Add to Cart</filled-button>
 </div>
</div>

const productHandle = "mens-premium";

Superfans.helpers.getProduct({ productHandle }).then((res) => {
 const product = res.product || res;
 const imageUrl = product.images?.[0];
 const variant = product.variants?.[0];

 document.getElementById("productTitle").textContent = product.title || "Untitled Product";
 document.getElementById("productPrice").textContent = variant ? `₹${variant.price}` : "Price not available";

 const img = document.getElementById("productImage");
 if (imageUrl) {
   img.onload = () => {
     img.style.display = "block";
     document.getElementById("addToCartBtn").style.display = "inline-block";
     document.getElementById("imageWrapper").classList.remove("shimmer");
   };
   img.src = imageUrl;
 }

 document.getElementById("addToCartBtn").onclick = () => {
   if (!variant?.id) return;
   Superfans.actions.addToCart([{ variantId: variant.id, quantity: 1 }])
     .then(() => Superfans.actions.showToast({ title: "Added", message: "Product added to cart" }))
     .catch((err) =>
       Superfans.actions.showToast({ title: "Error", message: err.message || "Unable to add to cart" })
     );
 };
}).catch((err) => {
 document.getElementById("productTitle").textContent = "Error loading product.";
});