updateweb

website/public/shop.html

@@ -216,6 +216,7 @@
         border-radius: 12px;
         overflow: hidden;
         transition: all 0.3s;
+        position: relative;
       }
 
       .product-card:hover {
@@ -223,6 +224,42 @@
         box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
       }
 
+      .product-badges {
+        position: absolute;
+        top: 12px;
+        left: 12px;
+        z-index: 10;
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+
+      .badge-featured {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 6px 10px;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        border-radius: 6px;
+        font-size: 11px;
+        font-weight: 600;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+      }
+
+      .badge-bestseller {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 6px 10px;
+        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+        color: white;
+        border-radius: 6px;
+        font-size: 11px;
+        font-weight: 600;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+      }
+
       .product-link {
         display: block;
         text-decoration: none;
@@ -636,7 +673,9 @@
       </div>
     </footer>
 
+    <script src="/assets/js/page-transitions.js"></script>
     <script src="/assets/js/main.js"></script>
+    <script src="/assets/js/navigation.js"></script>
     <script src="/assets/js/cart.js"></script>
     <script>
       // Mobile Menu Toggle (Same as other pages)
@@ -693,58 +732,90 @@
         noProducts.style.display = "none";
 
         grid.innerHTML = products
-          .map(
-            (product) => `
+          .map((product) => {
+            // Get the primary image from images array
+            let productImage = "/assets/images/placeholder.jpg";
+            if (
+              product.images &&
+              Array.isArray(product.images) &&
+              product.images.length > 0
+            ) {
+              // Find primary image or use first one
+              const primaryImg = product.images.find((img) => img.is_primary);
+              productImage = primaryImg
+                ? primaryImg.image_url
+                : product.images[0].image_url;
+            } else if (product.imageurl) {
+              // Fallback to old imageurl field
+              productImage = product.imageurl;
+            }
+
+            // Build badges HTML
+            let badges = "";
+            if (product.isfeatured) {
+              badges +=
+                '<span class="badge-featured"><i class="bi bi-star-fill"></i> Featured</span>';
+            }
+            if (product.isbestseller) {
+              badges +=
+                '<span class="badge-bestseller"><i class="bi bi-trophy-fill"></i> Best Seller</span>';
+            }
+
+            return `
           <div class="product-card">
-            <a href="/product.html?id=${
-              product.productid || product.id
-            }" class="product-link">
+            ${badges ? `<div class="product-badges">${badges}</div>` : ""}
+            <a href="/product.html?id=${product.id}" class="product-link">
               <div class="product-image">
-                <img src="${
-                  product.imageurl || "/assets/images/placeholder.jpg"
-                }" alt="${
+                <img src="${productImage}" alt="${
               product.name
             }" loading="lazy" onerror="this.src='/assets/images/placeholder.jpg'" />
               </div>
               <h3>${product.name}</h3>
-              ${
-                product.color
-                  ? `<span class="product-color-badge">${product.color}</span>`
-                  : ""
-              }
               ${
                 product.shortdescription || product.description
                   ? `<div class="product-description">${
                       product.shortdescription ||
-                      product.description.substring(0, 100) + "..."
+                      (product.description
+                        ? product.description.substring(0, 100) + "..."
+                        : "")
                     }</div>`
                   : ""
               }
               <p class="price">$${parseFloat(product.price).toFixed(2)}</p>
+              ${
+                product.stockquantity <= 0
+                  ? '<p style="color: #ef4444; font-size: 12px; margin: 8px 16px;">Out of Stock</p>'
+                  : ""
+              }
             </a>
-            <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
+            <div style="display: flex; gap: 0.5rem; margin: 0 16px 16px; padding-top: 8px;">
               <button class="btn btn-small btn-icon"
-                onclick="addToWishlist('${
-                  product.productid || product.id
+                onclick="event.stopPropagation(); addToWishlist('${
+                  product.id
                 }', '${product.name.replace(/'/g, "\\'")}', ${
               product.price
-            }, '${product.imageurl}')"
+            }, '${productImage.replace(/'/g, "\\'")}')"
                 aria-label="Add to wishlist">
                 <i class="bi bi-heart"></i>
               </button>
               <button class="btn btn-small btn-icon"
-                onclick="addToCart('${
-                  product.productid || product.id
+                onclick="event.stopPropagation(); addToCart('${
+                  product.id
                 }', '${product.name.replace(/'/g, "\\'")}', ${
               product.price
-            }, '${product.imageurl}')"
-                aria-label="Add to cart">
+            }, '${productImage.replace(/'/g, "\\'")}')"
+                aria-label="Add to cart"
+                ${
+                  product.stockquantity <= 0
+                    ? 'disabled style="opacity: 0.5; cursor: not-allowed;"'
+                    : ""
+                }>
                 <i class="bi bi-cart-plus"></i>
               </button>
             </div>
           </div>
-        `
-          )
+        `;
+          })
           .join("");
       }