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>

.latest-drop-container {
 padding: 12px;
 color: #111;
}

.section-title {
 font-size: 24px;
 font-weight: 700;
}

.product-card {
 display: flex;
 flex-direction: column;
 margin-top: 16px;
}

.image-wrapper {
 position: relative;
 width: 100%;
 aspect-ratio: 1 / 1.1;
 overflow: hidden;
 border-radius: 24px;
}

#productImage {
 width: 100%;
 height: 100%;
 object-fit: cover;
 border-radius: 24px;
}

.shimmer {
 background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
 background-size: 200% 100%;
 animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
 0% {
   background-position: -200% 0;
 }
 100% {
   background-position: 200% 0;
 }
}

.product-title {
 margin-top: 16px;
}

.product-price {
 margin-top: 8px;
 text-align: left;
}

filled-button {
 margin-top: 16px;
 width: 100%;
 text-align: center;
}

const productHandle = "mens-premium";

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

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

 // Load image
 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.onerror = () => {
     document.getElementById("productTitle").textContent = "❌ Failed to load image.";
   };
   img.src = imageUrl;
 } else {
   document.getElementById("productTitle").textContent = "⚠️ No image available.";
 }

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