SkyArtShop/website/public/assets/js/archive/cart-functions.js

/**
 * Shared Cart and Wishlist Functions
 * Simple localStorage-based implementation that works on all pages
 */

(function () {
  "use strict";

  // Cart Functions
  window.addToCart = function (productId, name, price, imageurl) {
    try {
      const cart = JSON.parse(localStorage.getItem("cart") || "[]");
      const existingItem = cart.find((item) => item.id === productId);

      if (existingItem) {
        existingItem.quantity = (existingItem.quantity || 1) + 1;
      } else {
        cart.push({
          id: productId,
          name,
          price: parseFloat(price),
          imageurl,
          quantity: 1,
        });
      }

      localStorage.setItem("cart", JSON.stringify(cart));
      updateCartBadge();
      showNotification(`${name} added to cart!`, "success");
    } catch (e) {
      console.error("Cart error:", e);
      showNotification("Added to cart!", "success");
    }
  };

  // Wishlist Functions
  window.addToWishlist = function (productId, name, price, imageurl) {
    try {
      const wishlist = JSON.parse(localStorage.getItem("wishlist") || "[]");
      const exists = wishlist.find((item) => item.id === productId);

      if (!exists) {
        wishlist.push({
          id: productId,
          name,
          price: parseFloat(price),
          imageurl,
        });
        localStorage.setItem("wishlist", JSON.stringify(wishlist));
        updateWishlistBadge();
        showNotification(`${name} added to wishlist!`, "success");
      } else {
        showNotification("Already in wishlist!", "info");
      }
    } catch (e) {
      console.error("Wishlist error:", e);
      showNotification("Added to wishlist!", "success");
    }
  };

  // Update Badge Functions
  function updateCartBadge() {
    try {
      const cart = JSON.parse(localStorage.getItem("cart") || "[]");
      const badge = document.querySelector(".cart-badge");
      if (badge) {
        const total = cart.reduce((sum, item) => sum + (item.quantity || 1), 0);
        badge.textContent = total;
        badge.style.display = total > 0 ? "flex" : "none";
      }
    } catch (e) {
      console.error("Badge update error:", e);
    }
  }

  function updateWishlistBadge() {
    try {
      const wishlist = JSON.parse(localStorage.getItem("wishlist") || "[]");
      const badge = document.querySelector(".wishlist-badge");
      if (badge) {
        badge.textContent = wishlist.length;
        badge.style.display = wishlist.length > 0 ? "flex" : "none";
      }
    } catch (e) {
      console.error("Badge update error:", e);
    }
  }

  // Notification Function
  function showNotification(message, type = "info") {
    // Remove existing notifications
    document.querySelectorAll(".cart-notification").forEach((n) => n.remove());

    const notification = document.createElement("div");
    notification.className = `cart-notification notification-${type}`;
    notification.textContent = message;
    notification.style.cssText = `
      position: fixed;
      top: 80px;
      right: 20px;
      background: ${
        type === "success"
          ? "#10b981"
          : type === "error"
          ? "#ef4444"
          : "#3b82f6"
      };
      color: white;
      padding: 12px 24px;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      z-index: 10000;
      animation: slideInFromRight 0.3s ease;
    `;

    // Add animation styles if not already present
    if (!document.getElementById("notification-animations")) {
      const style = document.createElement("style");
      style.id = "notification-animations";
      style.textContent = `
        @keyframes slideInFromRight {
          from { transform: translateX(400px); opacity: 0; }
          to { transform: translateX(0); opacity: 1; }
        }
        @keyframes slideOutToRight {
          from { transform: translateX(0); opacity: 1; }
          to { transform: translateX(400px); opacity: 0; }
        }
      `;
      document.head.appendChild(style);
    }

    document.body.appendChild(notification);

    setTimeout(() => {
      notification.style.animation = "slideOutToRight 0.3s ease";
      setTimeout(() => notification.remove(), 300);
    }, 3000);
  }

  // Initialize badges on page load
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", () => {
      updateCartBadge();
      updateWishlistBadge();
    });
  } else {
    updateCartBadge();
    updateWishlistBadge();
  }

  // Expose update functions globally
  window.updateCartBadge = updateCartBadge;
  window.updateWishlistBadge = updateWishlistBadge;
})();