From 7de6b96654f607ae08a8ec3f10c594766f00f9f1 Mon Sep 17 00:00:00 2001
From: Asmi Mohan <asmimohan612@gmail.com>
Date: Fri, 15 Aug 2025 14:15:36 +0530
Subject: [PATCH] feat(wishlist): add wishlist system with navbar counter,
 product heart toggle, and wishlist page

---
 index.html    |   1 +
 script.js     | 187 ++++++++++++++++++++++++++++++++++++++++++++++++++
 shop.html     |  19 +++++
 sproduct.html |  19 +++++
 style.css     |  64 +++++++++++++++++
 wishlist.html | 149 ++++++++++++++++++++++++++++++++++++++++
 6 files changed, 439 insertions(+)
 create mode 100644 wishlist.html

diff --git a/index.html b/index.html
index 09b8c42..10c4ef6 100644
--- a/index.html
+++ b/index.html
@@ -29,6 +29,7 @@
                 <li><a href="blog.html">Blog</a></li>
                 <li><a href="about.html">About</a></li>
                 <li><a href="contact.html">Contact</a></li>
+                <li><a href="wishlist.html">Wishlist (<span id="wl-count">0</span>)</a>>
                 <li class="auth-buttons">
                     <a href="login.html" class="login-btn">
                         <i class="fas fa-sign-in-alt"></i>
diff --git a/script.js b/script.js
index 99fa926..8d3e3dd 100644
--- a/script.js
+++ b/script.js
@@ -227,3 +227,190 @@ document.addEventListener('DOMContentLoaded', function() {
 window.searchProducts = searchProducts;
 window.filterProducts = filterProducts;
 window.clearSearch = clearSearch;
+
+wl_load();
+  try {
+    return JSON.parse(localStorage.getItem(WL_STORAGE_KEY)) || [];
+  } catch {
+    return [];
+  }
+
+
+function wl_save(arr) {
+  localStorage.setItem(WL_STORAGE_KEY, JSON.stringify(arr));
+}
+
+function wl_isIn(id) {
+  const wl = wl_load();
+  return wl.some(p => p.id === id);
+}
+
+function wl_add(item) {
+  const wl = wl_load();
+  if (!wl.some(p => p.id === item.id)) {
+    wl.push(item);
+    wl_save(wl);
+  }
+  wl_updateCounter();
+}
+
+function wl_remove(id) {
+  const wl = wl_load().filter(p => p.id !== id);
+  wl_save(wl);
+  wl_updateCounter();
+}
+
+function wl_toggleFromButton(btn) {
+  const id = btn.dataset.productId;
+  const inList = wl_isIn(id);
+
+  if (inList) {
+    wl_remove(id);
+    btn.classList.remove("active");
+    btn.setAttribute("aria-pressed", "false");
+    btn.querySelector("i").classList.remove("fa-solid");
+    btn.querySelector("i").classList.add("fa-regular");
+  } else {
+    // Build item from data-attrs (fallback parse from DOM if needed)
+    const item = {
+      id,
+      name: btn.dataset.productName || btn.closest(".product")?.querySelector(".product-title")?.textContent?.trim() || "Product",
+      price: parseInt(btn.dataset.productPrice || btn.closest(".product")?.querySelector(".product-price")?.dataset?.price || "0", 10),
+      img: btn.dataset.productImg || btn.closest(".product")?.querySelector("img")?.getAttribute("src") || "",
+      url: btn.dataset.productUrl || "#"
+    };
+    wl_add(item);
+    btn.classList.add("active");
+    btn.setAttribute("aria-pressed", "true");
+    btn.querySelector("i").classList.remove("fa-regular");
+    btn.querySelector("i").classList.add("fa-solid");
+  }
+}
+
+function wl_updateCounter() {
+  const el = document.getElementById("wl-count");
+  if (el) el.textContent = String(wl_load().length);
+}
+
+function wl_syncButtonsState() {
+  document.querySelectorAll(".wishlist-btn").forEach(btn => {
+    const id = btn.dataset.productId;
+    const active = wl_isIn(id);
+    btn.classList.toggle("active", active);
+    btn.setAttribute("aria-pressed", active ? "true" : "false");
+    const icon = btn.querySelector("i");
+    if (icon) {
+      icon.classList.toggle("fa-solid", active);
+      icon.classList.toggle("fa-regular", !active);
+    }
+  });
+}
+
+// Event delegation: toggle on click
+document.addEventListener("click", (e) => {
+  const btn = e.target.closest(".wishlist-btn");
+  if (!btn) return;
+  wl_toggleFromButton(btn);
+});
+
+// Init on page load
+document.addEventListener("DOMContentLoaded", () => {
+  wl_updateCounter();
+  wl_syncButtonsState();
+});
+
+/* -------------------------------
+   STYLÉKA Wishlist (localStorage)
+----------------------------------*/
+const WL_STORAGE_KEY = "styl_wishlist"; // localStorage key
+
+function wl_load() {
+  try {
+    return JSON.parse(localStorage.getItem(WL_STORAGE_KEY)) || [];
+  } catch {
+    return [];
+  }
+}
+
+function wl_save(arr) {
+  localStorage.setItem(WL_STORAGE_KEY, JSON.stringify(arr));
+}
+
+function wl_isIn(id) {
+  const wl = wl_load();
+  return wl.some(p => p.id === id);
+}
+
+function wl_add(item) {
+  const wl = wl_load();
+  if (!wl.some(p => p.id === item.id)) {
+    wl.push(item);
+    wl_save(wl);
+  }
+  wl_updateCounter();
+}
+
+function wl_remove(id) {
+  const wl = wl_load().filter(p => p.id !== id);
+  wl_save(wl);
+  wl_updateCounter();
+}
+
+function wl_toggleFromButton(btn) {
+  const id = btn.dataset.productId;
+  const inList = wl_isIn(id);
+
+  if (inList) {
+    wl_remove(id);
+    btn.classList.remove("active");
+    btn.setAttribute("aria-pressed", "false");
+    btn.querySelector("i").classList.remove("fa-solid");
+    btn.querySelector("i").classList.add("fa-regular");
+  } else {
+    // Build item from data-attrs (fallback parse from DOM if needed)
+    const item = {
+      id,
+      name: btn.dataset.productName || btn.closest(".product")?.querySelector(".product-title")?.textContent?.trim() || "Product",
+      price: parseInt(btn.dataset.productPrice || btn.closest(".product")?.querySelector(".product-price")?.dataset?.price || "0", 10),
+      img: btn.dataset.productImg || btn.closest(".product")?.querySelector("img")?.getAttribute("src") || "",
+      url: btn.dataset.productUrl || "#"
+    };
+    wl_add(item);
+    btn.classList.add("active");
+    btn.setAttribute("aria-pressed", "true");
+    btn.querySelector("i").classList.remove("fa-regular");
+    btn.querySelector("i").classList.add("fa-solid");
+  }
+}
+
+function wl_updateCounter() {
+  const el = document.getElementById("wl-count");
+  if (el) el.textContent = String(wl_load().length);
+}
+
+function wl_syncButtonsState() {
+  document.querySelectorAll(".wishlist-btn").forEach(btn => {
+    const id = btn.dataset.productId;
+    const active = wl_isIn(id);
+    btn.classList.toggle("active", active);
+    btn.setAttribute("aria-pressed", active ? "true" : "false");
+    const icon = btn.querySelector("i");
+    if (icon) {
+      icon.classList.toggle("fa-solid", active);
+      icon.classList.toggle("fa-regular", !active);
+    }
+  });
+}
+
+// Event delegation: toggle on click
+document.addEventListener("click", (e) => {
+  const btn = e.target.closest(".wishlist-btn");
+  if (!btn) return;
+  wl_toggleFromButton(btn);
+});
+
+// Init on page load
+document.addEventListener("DOMContentLoaded", () => {
+  wl_updateCounter();
+  wl_syncButtonsState();
+});
diff --git a/shop.html b/shop.html
index 54e0231..d44e8e9 100644
--- a/shop.html
+++ b/shop.html
@@ -19,6 +19,25 @@
         <!-- <h1>STYLÉKA</h1> -->
 
         <span class="site-title">STYLÉKA</span>
+        <!-- One product card example -->
+<div class="product">
+  <img src="images/p1.jpg" alt="Adidas Running Shoes">
+  <h4 class="product-title">Adidas Running Shoes</h4>
+  <p class="product-price" data-price="1999">₹1,999</p>
+
+  <!-- Wishlist Button (positioned via CSS) -->
+  <button class="wishlist-btn"
+          aria-label="Add to wishlist"
+          aria-pressed="false"
+          data-product-id="SKU-ADIDAS-001"
+          data-product-name="Adidas Running Shoes"
+          data-product-price="1999"
+          data-product-img="images/p1.jpg"
+          data-product-url="sproduct1.html">
+    <i class="fa-regular fa-heart"></i>
+  </button>
+</div>
+
 
         <div>
             <ul id="navbar">
diff --git a/sproduct.html b/sproduct.html
index 149a6ed..8aa0095 100644
--- a/sproduct.html
+++ b/sproduct.html
@@ -133,6 +133,25 @@
 </head>
 <body>
 
+<!-- One product card example -->
+<div class="product">
+  <img src="images/p1.jpg" alt="Adidas Running Shoes">
+  <h4 class="product-title">Adidas Running Shoes</h4>
+  <p class="product-price" data-price="1999">₹1,999</p>
+
+  <!-- Wishlist Button (positioned via CSS) -->
+  <button class="wishlist-btn"
+          aria-label="Add to wishlist"
+          aria-pressed="false"
+          data-product-id="SKU-ADIDAS-001"
+          data-product-name="Adidas Running Shoes"
+          data-product-price="1999"
+          data-product-img="images/p1.jpg"
+          data-product-url="sproduct1.html">
+    <i class="fa-regular fa-heart"></i>
+  </button>
+</div>
+
 <div class="container">
   <div class="product-img">
     <img src="img/Products/f1.jpg" alt="Product" id="productImage">
diff --git a/style.css b/style.css
index 9de1386..8767791 100644
--- a/style.css
+++ b/style.css
@@ -2073,3 +2073,67 @@ footer .copyright{
 
     
 }
+
+/* Ensure product cards can position absolute children */
+.product { position: relative; }
+
+/* Wishlist button look/feel */
+.wishlist-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  border: 0;
+  background: rgba(255,255,255,0.85);
+  border-radius: 999px;
+  width: 38px;
+  height: 38px;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
+  transition: transform .15s ease, background .2s ease;
+}
+
+.wishlist-btn:hover { transform: scale(1.06); }
+
+.wishlist-btn i {
+  font-size: 18px;
+  color: #888;
+  transition: color .2s ease;
+}
+
+/* Active (in wishlist) */
+.wishlist-btn.active { background: rgba(230, 57, 70, 0.12); }
+.wishlist-btn.active i { color: #e63946; } /* red */
+
+/* Ensure product cards can position absolute children */
+.product { position: relative; }
+
+/* Wishlist button look/feel */
+.wishlist-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  border: 0;
+  background: rgba(255,255,255,0.85);
+  border-radius: 999px;
+  width: 38px;
+  height: 38px;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
+  transition: transform .15s ease, background .2s ease;
+}
+
+.wishlist-btn:hover { transform: scale(1.06); }
+
+.wishlist-btn i {
+  font-size: 18px;
+  color: #888;
+  transition: color .2s ease;
+}
+
+/* Active (in wishlist) */
+.wishlist-btn.active { background: rgba(230, 57, 70, 0.12); }
+.wishlist-btn.active i { color: #e63946; } /* red */
diff --git a/wishlist.html b/wishlist.html
new file mode 100644
index 0000000..dfd2159
--- /dev/null
+++ b/wishlist.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Wishlist • STYLÉKA</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="stylesheet" href="style.css" />
+
+  <link rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
+        referrerpolicy="no-referrer" />
+  <style>
+    .wl-container { max-width: 1100px; margin: 40px auto; padding: 0 16px; }
+    .wl-header { display:flex; justify-content: space-between; align-items:center; gap:16px; }
+    .wl-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; margin-top:20px; }
+    .wl-card { border:1px solid #eee; border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,0.06); }
+    .wl-card img { width:100%; height: 200px; object-fit: cover; }
+    .wl-card .body { padding:12px 14px; }
+    .wl-title { font-weight:600; margin:6px 0 4px; }
+    .wl-price { color:#088178; font-weight:700; }
+    .wl-actions { display:flex; gap:8px; margin-top:10px; }
+    .btn {
+      border:0; padding:8px 12px; border-radius:10px; cursor:pointer;
+      background:#088178; color:#fff; font-weight:600;
+    }
+    .btn.secondary { background:#e63946; }
+    .btn.ghost { background:#f3f5f7; color:#222; }
+    .empty { text-align:center; padding:40px 0; color:#666; }
+  </style>
+</head>
+<body>
+
+  <nav>
+    <a href="index.html">Home</a>
+    <a href="shop.html">Shop</a>
+    <a href="wishlist.html">Wishlist (<span id="wl-count">0</span>)</a>
+    <a href="cart.html">Cart</a>
+  </nav>
+
+  <main class="wl-container">
+    <div class="wl-header">
+      <h1>Your Wishlist</h1>
+      <div>
+        <button id="wl-clear" class="btn ghost">Clear wishlist</button>
+      </div>
+    </div>
+
+    <div id="wl-grid" class="wl-grid"></div>
+    <div id="wl-empty" class="empty" style="display:none;">
+      <p>No items yet. Browse the <a href="shop.html">Shop</a> and tap the ♥ to save products.</p>
+    </div>
+  </main>
+
+  <script src="script.js"></script>
+  <script>
+    // Fallback: Add to Cart local (if no global addToCart exists)
+    function addToCartLocal(item) {
+      const KEY = "styl_cart";
+      let cart = [];
+      try { cart = JSON.parse(localStorage.getItem(KEY)) || []; } catch {}
+      const existing = cart.find(p => p.id === item.id);
+      if (existing) { existing.qty = (existing.qty || 1) + 1; }
+      else { cart.push({ ...item, qty: 1 }); }
+      localStorage.setItem(KEY, JSON.stringify(cart));
+      alert("Added to cart!");
+    }
+
+    function wl_render() {
+      const grid = document.getElementById("wl-grid");
+      const empty = document.getElementById("wl-empty");
+      const items = (function(){ try { return JSON.parse(localStorage.getItem("styl_wishlist")) || []; } catch { return []; } })();
+
+      grid.innerHTML = "";
+      if (!items.length) {
+        empty.style.display = "block";
+        return;
+      }
+      empty.style.display = "none";
+
+      for (const it of items) {
+        const card = document.createElement("div");
+        card.className = "wl-card";
+        card.innerHTML = `
+          <a href="${it.url}"><img src="${it.img}" alt="${it.name}"></a>
+          <div class="body">
+            <div class="wl-title">${it.name}</div>
+            <div class="wl-price">₹${Number(it.price || 0).toLocaleString("en-IN")}</div>
+            <div class="wl-actions">
+              <button class="btn" data-act="cart" data-id="${it.id}"><i class="fa-solid fa-cart-plus"></i>&nbsp;Move to cart</button>
+              <button class="btn secondary" data-act="remove" data-id="${it.id}"><i class="fa-solid fa-trash"></i>&nbsp;Remove</button>
+            </div>
+          </div>
+        `;
+        grid.appendChild(card);
+      }
+    }
+
+    // Handle actions
+    document.addEventListener("click", (e) => {
+      const btn = e.target.closest("[data-act]");
+      if (!btn) return;
+      const id = btn.dataset.id;
+      // Load current item for cart action
+      const items = (function(){ try { return JSON.parse(localStorage.getItem("styl_wishlist")) || []; } catch { return []; } })();
+      const item = items.find(p => p.id === id);
+
+      if (btn.dataset.act === "remove") {
+        // Use global wl_remove if loaded from script.js
+        if (typeof wl_remove === "function") wl_remove(id);
+        else {
+          const next = items.filter(p => p.id !== id);
+          localStorage.setItem("styl_wishlist", JSON.stringify(next));
+        }
+        wl_render();
+      }
+
+      if (btn.dataset.act === "cart" && item) {
+        // If project already defines addToCart(item), use it. Otherwise fallback.
+        if (typeof addToCart === "function") addToCart(item);
+        else addToCartLocal(item);
+
+        // Optional: remove from wishlist after moving
+        if (typeof wl_remove === "function") wl_remove(id);
+        else {
+          const next = items.filter(p => p.id !== id);
+          localStorage.setItem("styl_wishlist", JSON.stringify(next));
+        }
+        wl_render();
+      }
+    });
+
+    // Clear wishlist
+    document.getElementById("wl-clear").addEventListener("click", () => {
+      if (!confirm("Clear all items from your wishlist?")) return;
+      localStorage.setItem("styl_wishlist", JSON.stringify([]));
+      wl_render();
+      // Update navbar counter from script.js util if available
+      if (typeof wl_updateCounter === "function") wl_updateCounter();
+    });
+
+    // Initial render
+    document.addEventListener("DOMContentLoaded", () => {
+      wl_render();
+      // Counter from shared util
+      if (typeof wl_updateCounter === "function") wl_updateCounter();
+    });
+  </script>
+</body>
+</html>