Skip to content

feat(wishlist): full wishlist feature (heart toggle, navbar counter, wishlist page) #120

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Asmi768 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(wishlist): full wishlist feature (heart toggle, navbar counter, wishlist page) #120

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
187 changes: 187 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
19 changes: 19 additions & 0 deletions shop.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
19 changes: 19 additions & 0 deletions sproduct.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
64 changes: 64 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Loading