From 9a2290d2afc025808d9fd9b4be2d5ed7131bd4f7 Mon Sep 17 00:00:00 2001 From: Vineela Tallam Date: Wed, 17 Jun 2026 21:39:44 +0530 Subject: [PATCH 1/2] Add dynamic stock availability badges to product cards --- frontend/scripts/product-cards-home.js | 46 +++++++++++++++++++++++--- frontend/styles/components.css | 30 +++++++++++++++++ 2 files changed, 71 insertions(+), 5 deletions(-) diff --git a/frontend/scripts/product-cards-home.js b/frontend/scripts/product-cards-home.js index c6dd223..d5e042f 100644 --- a/frontend/scripts/product-cards-home.js +++ b/frontend/scripts/product-cards-home.js @@ -62,18 +62,52 @@ function createProductCard( } ).join(""); + + const stock = + Number(product.stock || 0); + +let stockBadge = ""; + +if (stock === 0) { + stockBadge = + ` + + Out of Stock + + `; +} +else if (stock <= 10) { + stockBadge = + ` + + Low Stock + + `; +} +else { + stockBadge = + ` + + In Stock + + `; +} return `
${ product.featured ? ` - - Featured - +
+ + + Featured + + +
` : "" } - + ${stars}
- +
+ ${stockBadge} +

${ formatPrice( diff --git a/frontend/styles/components.css b/frontend/styles/components.css index 34325d6..546d720 100644 --- a/frontend/styles/components.css +++ b/frontend/styles/components.css @@ -607,4 +607,34 @@ body.dark-theme #profile-dropdown a, body.dark-theme #profile-dropdown button{ color: #ffffff !important; background-color: transparent !important; +} + +.stock-wrapper { + margin-top: 6px; + margin-bottom: 6px; +} + +/* Stock badge base */ +.stock-badge { + display: inline-block; + padding: 4px 10px; + border-radius: 12px; + font-size: 12px; + font-weight: 600; + color: white; + white-space: nowrap; +} + +/* Colors */ +.stock-badge.available { + background: #28a745; +} + +.stock-badge.low { + background: #ffc107; + color: #000; +} + +.stock-badge.out { + background: #dc3545; } \ No newline at end of file From 7031091b61c2b3ecc28a712f1b120fb0b46749e9 Mon Sep 17 00:00:00 2001 From: Vineela Tallam Date: Tue, 23 Jun 2026 22:46:12 +0530 Subject: [PATCH 2/2] Refactor stock badge implementation and remove unrelated compare feature changes --- frontend/compare.html | 101 ----------------------- frontend/scripts/compare.js | 68 --------------- frontend/scripts/product-actions-home.js | 41 --------- frontend/scripts/product-cards-home.js | 22 ++--- frontend/scripts/product-render.js | 13 +-- 5 files changed, 7 insertions(+), 238 deletions(-) delete mode 100644 frontend/compare.html delete mode 100644 frontend/scripts/compare.js diff --git a/frontend/compare.html b/frontend/compare.html deleted file mode 100644 index 2afe155..0000000 --- a/frontend/compare.html +++ /dev/null @@ -1,101 +0,0 @@ - - - - - - - - Compare Products | Cara Fashion Store - - - - - - - - - - - - - - - - - - - - - - -
-

- Compare Products -

- -

- Compare selected products side by side -

- -
-
- - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/frontend/scripts/compare.js b/frontend/scripts/compare.js deleted file mode 100644 index 54b145d..0000000 --- a/frontend/scripts/compare.js +++ /dev/null @@ -1,68 +0,0 @@ -const compareContainer = - document.getElementById("compare-container"); - -const compareProducts = - AppUtils.getJSON( - "compareProducts", - [] - ); - -async function renderCompare() { - - if (compareProducts.length === 0) { - compareContainer.innerHTML = - "

No products selected

"; - return; - } - - try { - - const response = - await apiRequest( - "/products" - ); - - const products = - Array.isArray( - response.products - ) - ? response.products - : []; - - const selected = - products.filter( - product => - compareProducts.includes( - String(product.id) - ) - ); - - compareContainer.innerHTML = - selected.map( - product => ` -
-

${product.name}

-

Price: ₹${product.price}

-

Rating: ${product.rating}

-

Category: ${product.category}

-
- ` - ).join(""); - - } catch (error) { - - console.error( - "COMPARE ERROR:", - error - ); - - compareContainer.innerHTML = - "

Failed to load products

"; - } -} - -renderCompare(); \ No newline at end of file diff --git a/frontend/scripts/product-actions-home.js b/frontend/scripts/product-actions-home.js index bdf4466..e351240 100644 --- a/frontend/scripts/product-actions-home.js +++ b/frontend/scripts/product-actions-home.js @@ -267,47 +267,6 @@ document.addEventListener( window.location.href = `product.html?id=${id}`; } - const compareBtn = - event.target.closest(".compare-btn"); - -if (compareBtn) { - - event.preventDefault(); - - const id = compareBtn.dataset.id; - - let compareProducts = - AppUtils.getJSON( - "compareProducts", - [] - ); - if (compareProducts.includes(id)) { - AppUtils.notify( - "Product already selected", - "info" - ); - return; -} - if (compareProducts.length >= 3) { - AppUtils.notify( - "You can compare up to 3 products only", - "warning" - ); - return; -} - - compareProducts.push(id); - - AppUtils.setJSON( - "compareProducts", - compareProducts -); - - AppUtils.notify( - "Added for comparison", - "success" -); -} } ); diff --git a/frontend/scripts/product-cards-home.js b/frontend/scripts/product-cards-home.js index e23ab24..d1cdbeb 100644 --- a/frontend/scripts/product-cards-home.js +++ b/frontend/scripts/product-cards-home.js @@ -63,12 +63,14 @@ function createProductCard( ).join(""); - const stock = - Number(product.stock || 0); + const stock = product.stock; let stockBadge = ""; -if (stock === 0) { +if (stock === undefined || stock === null) { + stockBadge = ""; +} +else if (Number(stock) === 0) { stockBadge = ` @@ -76,7 +78,7 @@ if (stock === 0) { `; } -else if (stock <= 10) { +else if (Number(stock) <= 10) { stockBadge = ` @@ -92,18 +94,6 @@ else { `; } - return ` -
- ${ - product.featured - ? ` -
- - - Featured - - -
` : "" } diff --git a/frontend/scripts/product-render.js b/frontend/scripts/product-render.js index d118264..bcec00c 100644 --- a/frontend/scripts/product-render.js +++ b/frontend/scripts/product-render.js @@ -179,13 +179,6 @@ function createProductCardHTML( > Add Cart -
`; } @@ -577,8 +570,6 @@ function renderProduct( ); } - - // expose globally window.renderProduct = renderProduct; @@ -593,6 +584,4 @@ window.renderProductRating = renderProductRating; window.updateRecentlyViewed = - updateRecentlyViewed; - - window.allProducts = window.allProducts || []; \ No newline at end of file + updateRecentlyViewed; \ No newline at end of file