updateweb
This commit is contained in:
Local Server
@@ -1,378 +1,319 @@
|
||||
// Sky Art Shop - Shopping Cart Functions
|
||||
|
||||
// Add item to cart
|
||||
function addToCart(id, name, price, imageUrl = null) {
|
||||
// Get existing cart from localStorage
|
||||
let cart = JSON.parse(localStorage.getItem("cart") || "[]");
|
||||
|
||||
// Check if item already exists
|
||||
const existingItem = cart.find((item) => item.id === id);
|
||||
|
||||
if (existingItem) {
|
||||
existingItem.quantity++;
|
||||
// Update imageUrl if it was null before
|
||||
if (!existingItem.imageUrl && imageUrl) {
|
||||
existingItem.imageUrl = imageUrl;
|
||||
}
|
||||
} else {
|
||||
cart.push({ id, name, price, quantity: 1, imageUrl });
|
||||
}
|
||||
|
||||
// Save cart
|
||||
localStorage.setItem("cart", JSON.stringify(cart));
|
||||
console.log("Cart updated:", cart);
|
||||
|
||||
// Show confirmation
|
||||
showCartNotification(`${name} added to cart!`);
|
||||
updateCartCount();
|
||||
}
|
||||
|
||||
// Remove item from cart
|
||||
function removeFromCart(id) {
|
||||
let cart = JSON.parse(localStorage.getItem("cart") || "[]");
|
||||
cart = cart.filter((item) => item.id !== id);
|
||||
localStorage.setItem("cart", JSON.stringify(cart));
|
||||
updateCartCount();
|
||||
}
|
||||
|
||||
// Update cart item quantity
|
||||
function updateCartQuantity(id, quantity) {
|
||||
let cart = JSON.parse(localStorage.getItem("cart") || "[]");
|
||||
const item = cart.find((item) => item.id === id);
|
||||
if (item) {
|
||||
item.quantity = quantity;
|
||||
if (quantity <= 0) {
|
||||
cart = cart.filter((item) => item.id !== id);
|
||||
}
|
||||
}
|
||||
localStorage.setItem("cart", JSON.stringify(cart));
|
||||
updateCartCount();
|
||||
}
|
||||
|
||||
// Get cart items
|
||||
function getCart() {
|
||||
return JSON.parse(localStorage.getItem("cart") || "[]");
|
||||
}
|
||||
|
||||
// Get cart total
|
||||
function getCartTotal() {
|
||||
const cart = getCart();
|
||||
return cart.reduce((total, item) => total + item.price * item.quantity, 0);
|
||||
}
|
||||
|
||||
// Update cart count badge
|
||||
function updateCartCount() {
|
||||
const cart = getCart();
|
||||
const count = cart.reduce((total, item) => total + item.quantity, 0);
|
||||
|
||||
// Update old badge (if exists)
|
||||
const badge = document.getElementById("cart-count");
|
||||
if (badge) {
|
||||
badge.textContent = count;
|
||||
badge.style.display = count > 0 ? "inline" : "none";
|
||||
}
|
||||
|
||||
// Update navbar cart badge
|
||||
const navCartBadge = document.querySelector("#cartBtn .badge");
|
||||
if (navCartBadge) {
|
||||
navCartBadge.textContent = count;
|
||||
navCartBadge.style.display = count > 0 ? "block" : "none";
|
||||
}
|
||||
}
|
||||
|
||||
// Show cart notification
|
||||
function showCartNotification(message) {
|
||||
const notification = document.createElement("div");
|
||||
notification.className = "cart-notification";
|
||||
notification.textContent = message;
|
||||
notification.style.cssText = `
|
||||
position: fixed;
|
||||
top: 80px;
|
||||
right: 20px;
|
||||
background: #4CAF50;
|
||||
color: white;
|
||||
padding: 15px 25px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
|
||||
z-index: 10000;
|
||||
animation: slideInFromTop 0.3s ease;
|
||||
`;
|
||||
|
||||
document.body.appendChild(notification);
|
||||
|
||||
setTimeout(() => {
|
||||
notification.style.animation = "slideOut 0.3s ease";
|
||||
setTimeout(() => notification.remove(), 300);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Clear entire cart
|
||||
function clearCart() {
|
||||
localStorage.removeItem("cart");
|
||||
updateCartCount();
|
||||
}
|
||||
|
||||
// ====================================
|
||||
// Wishlist Functions
|
||||
// ====================================
|
||||
|
||||
// Add item to wishlist
|
||||
function addToWishlist(id, name, price, imageUrl) {
|
||||
let wishlist = JSON.parse(localStorage.getItem("wishlist") || "[]");
|
||||
|
||||
const existingItem = wishlist.find((item) => item.id === id);
|
||||
|
||||
if (existingItem) {
|
||||
showWishlistNotification(`${name} is already in your wishlist!`);
|
||||
return;
|
||||
}
|
||||
|
||||
wishlist.push({ id, name, price, imageUrl });
|
||||
localStorage.setItem("wishlist", JSON.stringify(wishlist));
|
||||
console.log("Wishlist updated:", wishlist);
|
||||
|
||||
showWishlistNotification(`${name} added to wishlist!`);
|
||||
updateWishlistCount();
|
||||
}
|
||||
|
||||
// Remove item from wishlist
|
||||
function removeFromWishlist(id) {
|
||||
let wishlist = JSON.parse(localStorage.getItem("wishlist") || "[]");
|
||||
wishlist = wishlist.filter((item) => item.id !== id);
|
||||
localStorage.setItem("wishlist", JSON.stringify(wishlist));
|
||||
updateWishlistCount();
|
||||
}
|
||||
|
||||
// Get wishlist items
|
||||
function getWishlist() {
|
||||
return JSON.parse(localStorage.getItem("wishlist") || "[]");
|
||||
}
|
||||
|
||||
// Update wishlist count badge
|
||||
function updateWishlistCount() {
|
||||
const wishlist = getWishlist();
|
||||
const count = wishlist.length;
|
||||
|
||||
const navWishlistBadge = document.querySelector("#wishlistBtn .badge");
|
||||
const wishlistIcon = document.querySelector("#wishlistBtn i");
|
||||
|
||||
if (navWishlistBadge) {
|
||||
navWishlistBadge.textContent = count;
|
||||
navWishlistBadge.style.display = count > 0 ? "block" : "none";
|
||||
}
|
||||
|
||||
// Change heart icon based on wishlist status
|
||||
if (wishlistIcon) {
|
||||
if (count > 0) {
|
||||
wishlistIcon.className = "bi bi-heart-fill";
|
||||
wishlistIcon.style.color = "#e74c3c";
|
||||
} else {
|
||||
wishlistIcon.className = "bi bi-heart";
|
||||
wishlistIcon.style.color = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Show wishlist notification
|
||||
function showWishlistNotification(message) {
|
||||
const notification = document.createElement("div");
|
||||
notification.className = "wishlist-notification";
|
||||
notification.textContent = message;
|
||||
notification.style.cssText = `
|
||||
position: fixed;
|
||||
top: 80px;
|
||||
right: 20px;
|
||||
background: #E91E63;
|
||||
color: white;
|
||||
padding: 15px 25px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
|
||||
z-index: 10000;
|
||||
animation: slideInFromTop 0.3s ease;
|
||||
`;
|
||||
|
||||
document.body.appendChild(notification);
|
||||
|
||||
setTimeout(() => {
|
||||
notification.style.animation = "slideOut 0.3s ease";
|
||||
setTimeout(() => notification.remove(), 300);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Clear entire wishlist
|
||||
function clearWishlist() {
|
||||
localStorage.removeItem("wishlist");
|
||||
updateWishlistCount();
|
||||
}
|
||||
|
||||
// ====================================
|
||||
// Dropdown Functions
|
||||
// ====================================
|
||||
// Render cart dropdown
|
||||
function renderCartDropdown() {
|
||||
const cart = getCart();
|
||||
const cartItems = document.getElementById("cartItems");
|
||||
const cartTotal = document.getElementById("cartTotal");
|
||||
|
||||
if (!cartItems) return;
|
||||
|
||||
if (cart.length === 0) {
|
||||
cartItems.innerHTML = '<p class="empty-message">Your cart is empty</p>';
|
||||
if (cartTotal) cartTotal.textContent = "$0.00";
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("Rendering cart:", cart);
|
||||
|
||||
cartItems.innerHTML = cart
|
||||
.map((item) => {
|
||||
const imgSrc = item.imageUrl || "/assets/images/placeholder.jpg";
|
||||
console.log("Cart item image URL:", imgSrc);
|
||||
return `
|
||||
<div class="dropdown-item">
|
||||
<img src="${imgSrc}" alt="${
|
||||
item.name
|
||||
}" class="dropdown-item-image" onerror="this.src='/assets/images/placeholder.jpg'">
|
||||
<div class="dropdown-item-info">
|
||||
<div class="dropdown-item-name">${item.name}</div>
|
||||
<div class="dropdown-item-details">
|
||||
<span class="dropdown-item-quantity">Qty: ${
|
||||
item.quantity
|
||||
}</span>
|
||||
<span class="dropdown-item-price">$${(
|
||||
item.price * item.quantity
|
||||
).toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="dropdown-item-remove" onclick="removeFromCartDropdown('${
|
||||
item.id
|
||||
}')">
|
||||
<i class="bi bi-x"></i>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
})
|
||||
.join("");
|
||||
|
||||
if (cartTotal) {
|
||||
const total = getCartTotal();
|
||||
cartTotal.textContent = `$${total.toFixed(2)}`;
|
||||
}
|
||||
}
|
||||
|
||||
// Render wishlist dropdown
|
||||
function renderWishlistDropdown() {
|
||||
const wishlist = getWishlist();
|
||||
const wishlistItems = document.getElementById("wishlistItems");
|
||||
|
||||
if (!wishlistItems) return;
|
||||
|
||||
if (wishlist.length === 0) {
|
||||
wishlistItems.innerHTML =
|
||||
'<p class="empty-message">Your wishlist is empty</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("Rendering wishlist:", wishlist);
|
||||
|
||||
wishlistItems.innerHTML = wishlist
|
||||
.map((item) => {
|
||||
const imgSrc = item.imageUrl || "/assets/images/placeholder.jpg";
|
||||
console.log("Wishlist item image URL:", imgSrc);
|
||||
return `
|
||||
<div class="dropdown-item">
|
||||
<img src="${imgSrc}" alt="${
|
||||
item.name
|
||||
}" class="dropdown-item-image" onerror="this.src='/assets/images/placeholder.jpg'">
|
||||
<div class="dropdown-item-info">
|
||||
<div class="dropdown-item-name">${item.name}</div>
|
||||
<div class="dropdown-item-details">
|
||||
<span class="dropdown-item-price">$${item.price.toFixed(
|
||||
2
|
||||
)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="dropdown-item-remove" onclick="removeFromWishlistDropdown('${
|
||||
item.id
|
||||
}')">
|
||||
<i class="bi bi-x"></i>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
})
|
||||
.join("");
|
||||
}
|
||||
|
||||
// Remove from cart via dropdown
|
||||
function removeFromCartDropdown(id) {
|
||||
removeFromCart(id);
|
||||
renderCartDropdown();
|
||||
updateCartCount();
|
||||
}
|
||||
|
||||
// Remove from wishlist via dropdown
|
||||
function removeFromWishlistDropdown(id) {
|
||||
removeFromWishlist(id);
|
||||
renderWishlistDropdown();
|
||||
updateWishlistCount();
|
||||
}
|
||||
|
||||
// Toggle dropdown visibility
|
||||
function toggleDropdown(dropdownId) {
|
||||
const dropdown = document.getElementById(dropdownId);
|
||||
if (!dropdown) return;
|
||||
|
||||
// Close other dropdowns
|
||||
document.querySelectorAll(".icon-dropdown").forEach((d) => {
|
||||
if (d.id !== dropdownId) {
|
||||
d.classList.remove("show");
|
||||
}
|
||||
});
|
||||
|
||||
dropdown.classList.toggle("show");
|
||||
|
||||
// Render content when opening
|
||||
if (dropdown.classList.contains("show")) {
|
||||
if (dropdownId === "cartDropdown") {
|
||||
renderCartDropdown();
|
||||
} else if (dropdownId === "wishlistDropdown") {
|
||||
renderWishlistDropdown();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Close cart/wishlist dropdowns when clicking outside
|
||||
document.addEventListener("click", function (e) {
|
||||
if (
|
||||
!e.target.closest(".dropdown-container") &&
|
||||
!e.target.closest(".nav-toggle")
|
||||
) {
|
||||
document.querySelectorAll(".icon-dropdown").forEach((d) => {
|
||||
d.classList.remove("show");
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize cart and wishlist count on page load
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
updateCartCount();
|
||||
updateWishlistCount();
|
||||
|
||||
// Add click handlers for dropdown toggles
|
||||
const cartBtn = document.getElementById("cartBtn");
|
||||
const wishlistBtn = document.getElementById("wishlistBtn");
|
||||
|
||||
if (cartBtn) {
|
||||
cartBtn.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
toggleDropdown("cartDropdown");
|
||||
});
|
||||
}
|
||||
|
||||
if (wishlistBtn) {
|
||||
wishlistBtn.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
toggleDropdown("wishlistDropdown");
|
||||
});
|
||||
}
|
||||
});
|
||||
/**
|
||||
* Shopping Cart Component
|
||||
* Handles cart dropdown, updates, and interactions
|
||||
*/
|
||||
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
class ShoppingCart {
|
||||
constructor() {
|
||||
this.cartToggle = document.getElementById("cartToggle");
|
||||
this.cartPanel = document.getElementById("cartPanel");
|
||||
this.cartContent = document.getElementById("cartContent");
|
||||
this.cartClose = document.getElementById("cartClose");
|
||||
this.isOpen = false;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.setupEventListeners();
|
||||
this.render();
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
if (this.cartToggle) {
|
||||
this.cartToggle.addEventListener("click", () => this.toggle());
|
||||
}
|
||||
|
||||
if (this.cartClose) {
|
||||
this.cartClose.addEventListener("click", () => this.close());
|
||||
}
|
||||
|
||||
// Close when clicking outside
|
||||
document.addEventListener("click", (e) => {
|
||||
if (this.isOpen && !e.target.closest(".cart-dropdown-wrapper")) {
|
||||
this.close();
|
||||
}
|
||||
});
|
||||
|
||||
// Listen for cart updates
|
||||
window.addEventListener("cart-updated", () => this.render());
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.isOpen ? this.close() : this.open();
|
||||
}
|
||||
|
||||
open() {
|
||||
if (this.cartPanel) {
|
||||
this.cartPanel.classList.add("active");
|
||||
this.cartPanel.setAttribute("aria-hidden", "false");
|
||||
this.isOpen = true;
|
||||
this.render();
|
||||
}
|
||||
}
|
||||
|
||||
close() {
|
||||
if (this.cartPanel) {
|
||||
this.cartPanel.classList.remove("active");
|
||||
this.cartPanel.setAttribute("aria-hidden", "true");
|
||||
this.isOpen = false;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this.cartContent) return;
|
||||
|
||||
const cart = window.AppState.cart;
|
||||
|
||||
if (cart.length === 0) {
|
||||
this.cartContent.innerHTML =
|
||||
'<p class="empty-state">Your cart is empty</p>';
|
||||
this.updateFooter(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const html = cart.map((item) => this.renderCartItem(item)).join("");
|
||||
this.cartContent.innerHTML = html;
|
||||
|
||||
// Add event listeners to cart items
|
||||
this.setupCartItemListeners();
|
||||
|
||||
// Update footer with total
|
||||
this.updateFooter(window.AppState.getCartTotal());
|
||||
}
|
||||
|
||||
renderCartItem(item) {
|
||||
const imageUrl =
|
||||
item.imageUrl || item.image_url || "/assets/images/placeholder.jpg";
|
||||
const title = window.Utils.escapeHtml(
|
||||
item.title || item.name || "Product"
|
||||
);
|
||||
const price = window.Utils.formatCurrency(item.price || 0);
|
||||
const subtotal = window.Utils.formatCurrency(
|
||||
(item.price || 0) * item.quantity
|
||||
);
|
||||
|
||||
return `
|
||||
<div class="cart-item" data-id="${item.id}">
|
||||
<img src="${imageUrl}" alt="${title}" class="cart-item-image" loading="lazy">
|
||||
<div class="cart-item-details">
|
||||
<h4 class="cart-item-title">${title}</h4>
|
||||
<p class="cart-item-price">${price}</p>
|
||||
<div class="cart-item-quantity">
|
||||
<button class="quantity-btn quantity-minus" data-id="${item.id}" aria-label="Decrease quantity">
|
||||
<i class="bi bi-dash"></i>
|
||||
</button>
|
||||
<span class="quantity-value">${item.quantity}</span>
|
||||
<button class="quantity-btn quantity-plus" data-id="${item.id}" aria-label="Increase quantity">
|
||||
<i class="bi bi-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
<p class="cart-item-subtotal">${subtotal}</p>
|
||||
</div>
|
||||
<button class="cart-item-remove" data-id="${item.id}" aria-label="Remove from cart">
|
||||
<i class="bi bi-x-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
setupCartItemListeners() {
|
||||
// Remove buttons
|
||||
this.cartContent.querySelectorAll(".cart-item-remove").forEach((btn) => {
|
||||
btn.addEventListener("click", (e) => {
|
||||
const id = parseInt(e.currentTarget.dataset.id);
|
||||
window.AppState.removeFromCart(id);
|
||||
this.render();
|
||||
});
|
||||
});
|
||||
|
||||
// Quantity buttons
|
||||
this.cartContent.querySelectorAll(".quantity-minus").forEach((btn) => {
|
||||
btn.addEventListener("click", (e) => {
|
||||
const id = parseInt(e.currentTarget.dataset.id);
|
||||
const item = window.AppState.cart.find((item) => item.id === id);
|
||||
if (item && item.quantity > 1) {
|
||||
window.AppState.updateCartQuantity(id, item.quantity - 1);
|
||||
this.render();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
this.cartContent.querySelectorAll(".quantity-plus").forEach((btn) => {
|
||||
btn.addEventListener("click", (e) => {
|
||||
const id = parseInt(e.currentTarget.dataset.id);
|
||||
const item = window.AppState.cart.find((item) => item.id === id);
|
||||
if (item) {
|
||||
window.AppState.updateCartQuantity(id, item.quantity + 1);
|
||||
this.render();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
updateFooter(total) {
|
||||
const footer = this.cartPanel?.querySelector(".dropdown-foot");
|
||||
if (!footer) return;
|
||||
|
||||
if (total === null) {
|
||||
footer.innerHTML =
|
||||
'<a href="/shop" class="btn-outline">Continue Shopping</a>';
|
||||
} else {
|
||||
footer.innerHTML = `
|
||||
<div class="cart-total">
|
||||
<span>Total:</span>
|
||||
<strong>${window.Utils.formatCurrency(total)}</strong>
|
||||
</div>
|
||||
<a href="/shop" class="btn-text">Continue Shopping</a>
|
||||
<button class="btn-primary-full" onclick="alert('Checkout coming soon!')">
|
||||
Proceed to Checkout
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Wishlist Component
|
||||
class Wishlist {
|
||||
constructor() {
|
||||
this.wishlistToggle = document.getElementById("wishlistToggle");
|
||||
this.wishlistPanel = document.getElementById("wishlistPanel");
|
||||
this.wishlistContent = document.getElementById("wishlistContent");
|
||||
this.wishlistClose = document.getElementById("wishlistClose");
|
||||
this.isOpen = false;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.setupEventListeners();
|
||||
this.render();
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
if (this.wishlistToggle) {
|
||||
this.wishlistToggle.addEventListener("click", () => this.toggle());
|
||||
}
|
||||
|
||||
if (this.wishlistClose) {
|
||||
this.wishlistClose.addEventListener("click", () => this.close());
|
||||
}
|
||||
|
||||
// Close when clicking outside
|
||||
document.addEventListener("click", (e) => {
|
||||
if (this.isOpen && !e.target.closest(".wishlist-dropdown-wrapper")) {
|
||||
this.close();
|
||||
}
|
||||
});
|
||||
|
||||
// Listen for wishlist updates
|
||||
window.addEventListener("wishlist-updated", () => this.render());
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.isOpen ? this.close() : this.open();
|
||||
}
|
||||
|
||||
open() {
|
||||
if (this.wishlistPanel) {
|
||||
this.wishlistPanel.classList.add("active");
|
||||
this.wishlistPanel.setAttribute("aria-hidden", "false");
|
||||
this.isOpen = true;
|
||||
this.render();
|
||||
}
|
||||
}
|
||||
|
||||
close() {
|
||||
if (this.wishlistPanel) {
|
||||
this.wishlistPanel.classList.remove("active");
|
||||
this.wishlistPanel.setAttribute("aria-hidden", "true");
|
||||
this.isOpen = false;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this.wishlistContent) return;
|
||||
|
||||
const wishlist = window.AppState.wishlist;
|
||||
|
||||
if (wishlist.length === 0) {
|
||||
this.wishlistContent.innerHTML =
|
||||
'<p class="empty-state">Your wishlist is empty</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
const html = wishlist
|
||||
.map((item) => this.renderWishlistItem(item))
|
||||
.join("");
|
||||
this.wishlistContent.innerHTML = html;
|
||||
|
||||
// Add event listeners
|
||||
this.setupWishlistItemListeners();
|
||||
}
|
||||
|
||||
renderWishlistItem(item) {
|
||||
const imageUrl =
|
||||
item.imageUrl || item.image_url || "/assets/images/placeholder.jpg";
|
||||
const title = window.Utils.escapeHtml(
|
||||
item.title || item.name || "Product"
|
||||
);
|
||||
const price = window.Utils.formatCurrency(item.price || 0);
|
||||
|
||||
return `
|
||||
<div class="wishlist-item" data-id="${item.id}">
|
||||
<img src="${imageUrl}" alt="${title}" class="wishlist-item-image" loading="lazy">
|
||||
<div class="wishlist-item-details">
|
||||
<h4 class="wishlist-item-title">${title}</h4>
|
||||
<p class="wishlist-item-price">${price}</p>
|
||||
<button class="btn-add-to-cart" data-id="${item.id}">Add to Cart</button>
|
||||
</div>
|
||||
<button class="wishlist-item-remove" data-id="${item.id}" aria-label="Remove from wishlist">
|
||||
<i class="bi bi-x-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
setupWishlistItemListeners() {
|
||||
// Remove buttons
|
||||
this.wishlistContent
|
||||
.querySelectorAll(".wishlist-item-remove")
|
||||
.forEach((btn) => {
|
||||
btn.addEventListener("click", (e) => {
|
||||
const id = parseInt(e.currentTarget.dataset.id);
|
||||
window.AppState.removeFromWishlist(id);
|
||||
this.render();
|
||||
});
|
||||
});
|
||||
|
||||
// Add to cart buttons
|
||||
this.wishlistContent
|
||||
.querySelectorAll(".btn-add-to-cart")
|
||||
.forEach((btn) => {
|
||||
btn.addEventListener("click", (e) => {
|
||||
const id = parseInt(e.currentTarget.dataset.id);
|
||||
const item = window.AppState.wishlist.find(
|
||||
(item) => item.id === id
|
||||
);
|
||||
if (item) {
|
||||
window.AppState.addToCart(item);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when DOM is ready
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
new ShoppingCart();
|
||||
new Wishlist();
|
||||
});
|
||||
} else {
|
||||
new ShoppingCart();
|
||||
new Wishlist();
|
||||
}
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user