871 lines
25 KiB
JavaScript
871 lines
25 KiB
JavaScript
|
/* ============================================
|
||
|
|
SKY ART SHOP - MODERN THEME JAVASCRIPT
|
||
|
|
Complete Frontend Functionality
|
||
|
|
============================================ */
|
||
|
|
|
||
|
|
// Global State
|
||
|
|
const SkyArtShop = {
|
||
|
|
cart: JSON.parse(localStorage.getItem("skyart_cart") || "[]"),
|
||
|
|
wishlist: JSON.parse(localStorage.getItem("skyart_wishlist") || "[]"),
|
||
|
|
|
||
|
|
// Initialize
|
||
|
|
init() {
|
||
|
|
this.initNavbar();
|
||
|
|
// Delay slider init slightly to ensure DOM is ready
|
||
|
|
requestAnimationFrame(() => {
|
||
|
|
this.initSlider();
|
||
|
|
});
|
||
|
|
this.initCart();
|
||
|
|
this.initWishlist();
|
||
|
|
this.initWishlistDrawer();
|
||
|
|
this.initProducts();
|
||
|
|
this.initAnimations();
|
||
|
|
this.updateCartCount();
|
||
|
|
this.updateWishlistCount();
|
||
|
|
},
|
||
|
|
|
||
|
|
// Navbar Functionality
|
||
|
|
initNavbar() {
|
||
|
|
const navbar = document.querySelector(".nav-wrapper");
|
||
|
|
const mobileToggle = document.querySelector(".nav-mobile-toggle");
|
||
|
|
const navMenu = document.querySelector(".nav-menu");
|
||
|
|
|
||
|
|
// Scroll effect
|
||
|
|
if (navbar) {
|
||
|
|
window.addEventListener("scroll", () => {
|
||
|
|
if (window.scrollY > 50) {
|
||
|
|
navbar.classList.add("scrolled");
|
||
|
|
} else {
|
||
|
|
navbar.classList.remove("scrolled");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Mobile menu toggle
|
||
|
|
if (mobileToggle && navMenu) {
|
||
|
|
mobileToggle.addEventListener("click", () => {
|
||
|
|
navMenu.classList.toggle("open");
|
||
|
|
mobileToggle.classList.toggle("active");
|
||
|
|
});
|
||
|
|
|
||
|
|
// Close menu when clicking a link
|
||
|
|
navMenu.querySelectorAll(".nav-link").forEach((link) => {
|
||
|
|
link.addEventListener("click", () => {
|
||
|
|
navMenu.classList.remove("open");
|
||
|
|
mobileToggle.classList.remove("active");
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Set active nav link
|
||
|
|
const currentPath = window.location.pathname;
|
||
|
|
document.querySelectorAll(".nav-link").forEach((link) => {
|
||
|
|
if (link.getAttribute("href") === currentPath) {
|
||
|
|
link.classList.add("active");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
// Hero Slider
|
||
|
|
sliderInitialized: false,
|
||
|
|
sliderInterval: null,
|
||
|
|
|
||
|
|
initSlider() {
|
||
|
|
const slider = document.querySelector(".hero-slider");
|
||
|
|
if (!slider) return;
|
||
|
|
|
||
|
|
// Prevent multiple initializations
|
||
|
|
if (this.sliderInitialized || slider.dataset.initialized === "true") {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.sliderInitialized = true;
|
||
|
|
slider.dataset.initialized = "true";
|
||
|
|
|
||
|
|
const slides = slider.querySelectorAll(".slide");
|
||
|
|
const dots = slider.querySelectorAll(".slider-dot");
|
||
|
|
const prevBtn = slider.querySelector(".slider-arrow.prev");
|
||
|
|
const nextBtn = slider.querySelector(".slider-arrow.next");
|
||
|
|
|
||
|
|
// Need at least 2 slides for auto-play to make sense
|
||
|
|
if (slides.length < 2) return;
|
||
|
|
|
||
|
|
let currentSlide = 0;
|
||
|
|
let isAnimating = false;
|
||
|
|
const self = this;
|
||
|
|
|
||
|
|
// Clear any existing interval
|
||
|
|
if (this.sliderInterval) {
|
||
|
|
clearInterval(this.sliderInterval);
|
||
|
|
this.sliderInterval = null;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Initialize slides - first slide active, others positioned off-screen right
|
||
|
|
slides.forEach((slide, i) => {
|
||
|
|
slide.classList.remove("active", "outgoing");
|
||
|
|
slide.style.transition = "none";
|
||
|
|
if (i === 0) {
|
||
|
|
slide.classList.add("active");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
// Force reflow then re-enable transitions
|
||
|
|
void slider.offsetWidth;
|
||
|
|
slides.forEach((slide) => (slide.style.transition = ""));
|
||
|
|
if (dots[0]) dots[0].classList.add("active");
|
||
|
|
|
||
|
|
const showSlide = (index) => {
|
||
|
|
if (isAnimating) return;
|
||
|
|
|
||
|
|
const prevIndex = currentSlide;
|
||
|
|
currentSlide = (index + slides.length) % slides.length;
|
||
|
|
|
||
|
|
if (prevIndex === currentSlide) return;
|
||
|
|
|
||
|
|
isAnimating = true;
|
||
|
|
|
||
|
|
const oldSlide = slides[prevIndex];
|
||
|
|
const newSlide = slides[currentSlide];
|
||
|
|
|
||
|
|
// Update dots
|
||
|
|
dots.forEach((dot, i) =>
|
||
|
|
dot.classList.toggle("active", i === currentSlide),
|
||
|
|
);
|
||
|
|
|
||
|
|
// Position new slide off-screen to the right (no transition)
|
||
|
|
newSlide.style.transition = "none";
|
||
|
|
newSlide.classList.remove("outgoing");
|
||
|
|
newSlide.style.transform = "translateX(100%)";
|
||
|
|
|
||
|
|
// Force browser to register the position
|
||
|
|
void newSlide.offsetWidth;
|
||
|
|
|
||
|
|
// Re-enable transition and animate
|
||
|
|
newSlide.style.transition = "";
|
||
|
|
newSlide.style.transform = "";
|
||
|
|
newSlide.classList.add("active");
|
||
|
|
|
||
|
|
// Old slide moves out to the left
|
||
|
|
oldSlide.classList.remove("active");
|
||
|
|
oldSlide.classList.add("outgoing");
|
||
|
|
|
||
|
|
// Cleanup after animation (800ms matches CSS)
|
||
|
|
setTimeout(() => {
|
||
|
|
oldSlide.classList.remove("outgoing");
|
||
|
|
oldSlide.style.transform = "";
|
||
|
|
isAnimating = false;
|
||
|
|
}, 850);
|
||
|
|
};
|
||
|
|
|
||
|
|
const nextSlide = () => showSlide(currentSlide + 1);
|
||
|
|
const prevSlide = () => showSlide(currentSlide - 1);
|
||
|
|
|
||
|
|
// Auto-play with 7 second intervals (7000ms)
|
||
|
|
const startAutoPlay = () => {
|
||
|
|
// Clear any existing interval first
|
||
|
|
if (self.sliderInterval) {
|
||
|
|
clearInterval(self.sliderInterval);
|
||
|
|
}
|
||
|
|
self.sliderInterval = setInterval(nextSlide, 7000);
|
||
|
|
};
|
||
|
|
|
||
|
|
const stopAutoPlay = () => {
|
||
|
|
if (self.sliderInterval) {
|
||
|
|
clearInterval(self.sliderInterval);
|
||
|
|
self.sliderInterval = null;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// Event listeners
|
||
|
|
if (prevBtn)
|
||
|
|
prevBtn.addEventListener("click", () => {
|
||
|
|
stopAutoPlay();
|
||
|
|
prevSlide();
|
||
|
|
startAutoPlay();
|
||
|
|
});
|
||
|
|
if (nextBtn)
|
||
|
|
nextBtn.addEventListener("click", () => {
|
||
|
|
stopAutoPlay();
|
||
|
|
nextSlide();
|
||
|
|
startAutoPlay();
|
||
|
|
});
|
||
|
|
|
||
|
|
dots.forEach((dot, i) => {
|
||
|
|
dot.addEventListener("click", () => {
|
||
|
|
stopAutoPlay();
|
||
|
|
showSlide(i);
|
||
|
|
startAutoPlay();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Start auto-play immediately (first slide already initialized)
|
||
|
|
startAutoPlay();
|
||
|
|
|
||
|
|
// Pause on hover
|
||
|
|
slider.addEventListener("mouseenter", stopAutoPlay);
|
||
|
|
slider.addEventListener("mouseleave", startAutoPlay);
|
||
|
|
|
||
|
|
// Pause when tab is not visible, resume when visible
|
||
|
|
document.addEventListener("visibilitychange", () => {
|
||
|
|
if (document.hidden) {
|
||
|
|
stopAutoPlay();
|
||
|
|
} else {
|
||
|
|
startAutoPlay();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
// Cart Functionality
|
||
|
|
initCart() {
|
||
|
|
const cartBtn = document.querySelector(".cart-btn");
|
||
|
|
const cartDrawer = document.querySelector(".cart-drawer");
|
||
|
|
const cartOverlay = document.querySelector(".cart-overlay");
|
||
|
|
const cartClose = document.querySelector(".cart-close");
|
||
|
|
|
||
|
|
if (cartBtn && cartDrawer) {
|
||
|
|
cartBtn.addEventListener("click", () => this.openCart());
|
||
|
|
}
|
||
|
|
|
||
|
|
if (cartClose) cartClose.addEventListener("click", () => this.closeCart());
|
||
|
|
if (cartOverlay)
|
||
|
|
cartOverlay.addEventListener("click", () => this.closeCart());
|
||
|
|
|
||
|
|
// Close on escape
|
||
|
|
document.addEventListener("keydown", (e) => {
|
||
|
|
if (e.key === "Escape") this.closeCart();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
openCart() {
|
||
|
|
const cartDrawer = document.querySelector(".cart-drawer");
|
||
|
|
const cartOverlay = document.querySelector(".cart-overlay");
|
||
|
|
if (cartDrawer) cartDrawer.classList.add("open");
|
||
|
|
if (cartOverlay) cartOverlay.classList.add("open");
|
||
|
|
document.body.style.overflow = "hidden";
|
||
|
|
this.renderCart();
|
||
|
|
},
|
||
|
|
|
||
|
|
closeCart() {
|
||
|
|
const cartDrawer = document.querySelector(".cart-drawer");
|
||
|
|
const cartOverlay = document.querySelector(".cart-overlay");
|
||
|
|
if (cartDrawer) cartDrawer.classList.remove("open");
|
||
|
|
if (cartOverlay) cartOverlay.classList.remove("open");
|
||
|
|
document.body.style.overflow = "";
|
||
|
|
},
|
||
|
|
|
||
|
|
addToCart(product) {
|
||
|
|
const existingItem = this.cart.find((item) => item.id === product.id);
|
||
|
|
|
||
|
|
if (existingItem) {
|
||
|
|
existingItem.quantity += 1;
|
||
|
|
} else {
|
||
|
|
this.cart.push({ ...product, quantity: 1 });
|
||
|
|
}
|
||
|
|
|
||
|
|
this.saveCart();
|
||
|
|
this.updateCartCount();
|
||
|
|
this.showNotification(`${product.name} added to cart!`);
|
||
|
|
this.openCart();
|
||
|
|
},
|
||
|
|
|
||
|
|
removeFromCart(productId) {
|
||
|
|
this.cart = this.cart.filter((item) => item.id !== productId);
|
||
|
|
this.saveCart();
|
||
|
|
this.updateCartCount();
|
||
|
|
this.renderCart();
|
||
|
|
},
|
||
|
|
|
||
|
|
updateCartQty(productId, change) {
|
||
|
|
const item = this.cart.find((item) => item.id === productId);
|
||
|
|
if (item) {
|
||
|
|
item.quantity += change;
|
||
|
|
if (item.quantity <= 0) {
|
||
|
|
this.removeFromCart(productId);
|
||
|
|
} else {
|
||
|
|
this.saveCart();
|
||
|
|
this.renderCart();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
saveCart() {
|
||
|
|
localStorage.setItem("skyart_cart", JSON.stringify(this.cart));
|
||
|
|
},
|
||
|
|
|
||
|
|
updateCartCount() {
|
||
|
|
const count = this.cart.reduce((sum, item) => sum + item.quantity, 0);
|
||
|
|
document.querySelectorAll(".cart-count").forEach((el) => {
|
||
|
|
el.textContent = count;
|
||
|
|
el.style.display = count > 0 ? "flex" : "none";
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
getCartTotal() {
|
||
|
|
return this.cart.reduce(
|
||
|
|
(sum, item) => sum + parseFloat(item.price) * item.quantity,
|
||
|
|
0,
|
||
|
|
);
|
||
|
|
},
|
||
|
|
|
||
|
|
renderCart() {
|
||
|
|
const cartItems = document.querySelector(".cart-items");
|
||
|
|
const cartTotal = document.querySelector(".cart-total-amount");
|
||
|
|
|
||
|
|
if (!cartItems) return;
|
||
|
|
|
||
|
|
if (this.cart.length === 0) {
|
||
|
|
cartItems.innerHTML = `
|
||
|
|
<div class="cart-empty">
|
||
|
|
<i class="bi bi-cart-x" style="font-size: 3rem; color: var(--text-light); margin-bottom: 16px;"></i>
|
||
|
|
<p>Your cart is empty</p>
|
||
|
|
<a href="/shop" class="btn btn-primary" style="margin-top: 16px; min-width: 200px;">Continue Shopping</a>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
} else {
|
||
|
|
cartItems.innerHTML = this.cart
|
||
|
|
.map(
|
||
|
|
(item) => `
|
||
|
|
<div class="cart-item">
|
||
|
|
<div class="cart-item-image">
|
||
|
|
<img src="${item.image || "/assets/images/placeholder.jpg"}" alt="${
|
||
|
|
item.name
|
||
|
|
}">
|
||
|
|
</div>
|
||
|
|
<div class="cart-item-info">
|
||
|
|
<div class="cart-item-name">${item.name}</div>
|
||
|
|
${
|
||
|
|
item.color
|
||
|
|
? `<div class="cart-item-color" style="font-size: 0.85rem; color: #666;">Color: ${item.color}</div>`
|
||
|
|
: ""
|
||
|
|
}
|
||
|
|
<div class="cart-item-price">$${parseFloat(item.price).toFixed(
|
||
|
|
2,
|
||
|
|
)}</div>
|
||
|
|
<div class="cart-item-qty">
|
||
|
|
<button class="qty-btn" onclick="SkyArtShop.updateCartQty('${
|
||
|
|
item.id
|
||
|
|
}', -1)">-</button>
|
||
|
|
<span>${item.quantity}</span>
|
||
|
|
<button class="qty-btn" onclick="SkyArtShop.updateCartQty('${
|
||
|
|
item.id
|
||
|
|
}', 1)">+</button>
|
||
|
|
<button class="qty-btn" onclick="SkyArtShop.removeFromCart('${
|
||
|
|
item.id
|
||
|
|
}')" style="margin-left: auto; color: #e74c3c;">
|
||
|
|
<i class="bi bi-trash"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
)
|
||
|
|
.join("");
|
||
|
|
}
|
||
|
|
|
||
|
|
if (cartTotal) {
|
||
|
|
cartTotal.textContent = `$${this.getCartTotal().toFixed(2)}`;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// Wishlist Functionality
|
||
|
|
initWishlist() {
|
||
|
|
this.updateWishlistCount();
|
||
|
|
},
|
||
|
|
|
||
|
|
toggleWishlist(product) {
|
||
|
|
const index = this.wishlist.findIndex((item) => item.id === product.id);
|
||
|
|
|
||
|
|
if (index > -1) {
|
||
|
|
this.wishlist.splice(index, 1);
|
||
|
|
this.showNotification(`${product.name} removed from wishlist`);
|
||
|
|
} else {
|
||
|
|
this.wishlist.push(product);
|
||
|
|
this.showNotification(`${product.name} added to wishlist!`);
|
||
|
|
}
|
||
|
|
|
||
|
|
this.saveWishlist();
|
||
|
|
this.updateWishlistCount();
|
||
|
|
this.updateWishlistButtons();
|
||
|
|
},
|
||
|
|
|
||
|
|
isInWishlist(productId) {
|
||
|
|
return this.wishlist.some((item) => item.id === productId);
|
||
|
|
},
|
||
|
|
|
||
|
|
saveWishlist() {
|
||
|
|
localStorage.setItem("skyart_wishlist", JSON.stringify(this.wishlist));
|
||
|
|
},
|
||
|
|
|
||
|
|
updateWishlistCount() {
|
||
|
|
const count = this.wishlist.length;
|
||
|
|
document.querySelectorAll(".wishlist-count").forEach((el) => {
|
||
|
|
el.textContent = count;
|
||
|
|
el.style.display = count > 0 ? "flex" : "none";
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
updateWishlistButtons() {
|
||
|
|
document.querySelectorAll(".wishlist-btn").forEach((btn) => {
|
||
|
|
const productId = btn.dataset.productId;
|
||
|
|
if (this.isInWishlist(productId)) {
|
||
|
|
btn.classList.add("active");
|
||
|
|
btn.innerHTML = '<i class="bi bi-heart-fill"></i>';
|
||
|
|
} else {
|
||
|
|
btn.classList.remove("active");
|
||
|
|
btn.innerHTML = '<i class="bi bi-heart"></i>';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
// Wishlist Drawer
|
||
|
|
initWishlistDrawer() {
|
||
|
|
const wishlistBtn = document.querySelector(".wishlist-btn-nav");
|
||
|
|
const wishlistDrawer = document.querySelector(".wishlist-drawer");
|
||
|
|
const wishlistOverlay = document.querySelector(".wishlist-overlay");
|
||
|
|
const wishlistClose = document.querySelector(".wishlist-close");
|
||
|
|
|
||
|
|
if (wishlistBtn && wishlistDrawer) {
|
||
|
|
wishlistBtn.addEventListener("click", (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
this.openWishlist();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
if (wishlistClose)
|
||
|
|
wishlistClose.addEventListener("click", () => this.closeWishlist());
|
||
|
|
if (wishlistOverlay)
|
||
|
|
wishlistOverlay.addEventListener("click", () => this.closeWishlist());
|
||
|
|
|
||
|
|
// Close on escape
|
||
|
|
document.addEventListener("keydown", (e) => {
|
||
|
|
if (e.key === "Escape") this.closeWishlist();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
openWishlist() {
|
||
|
|
const wishlistDrawer = document.querySelector(".wishlist-drawer");
|
||
|
|
const wishlistOverlay = document.querySelector(".wishlist-overlay");
|
||
|
|
if (wishlistDrawer) wishlistDrawer.classList.add("open");
|
||
|
|
if (wishlistOverlay) wishlistOverlay.classList.add("open");
|
||
|
|
document.body.style.overflow = "hidden";
|
||
|
|
this.renderWishlist();
|
||
|
|
},
|
||
|
|
|
||
|
|
closeWishlist() {
|
||
|
|
const wishlistDrawer = document.querySelector(".wishlist-drawer");
|
||
|
|
const wishlistOverlay = document.querySelector(".wishlist-overlay");
|
||
|
|
if (wishlistDrawer) wishlistDrawer.classList.remove("open");
|
||
|
|
if (wishlistOverlay) wishlistOverlay.classList.remove("open");
|
||
|
|
document.body.style.overflow = "";
|
||
|
|
},
|
||
|
|
|
||
|
|
renderWishlist() {
|
||
|
|
const wishlistItems = document.querySelector(".wishlist-items");
|
||
|
|
if (!wishlistItems) return;
|
||
|
|
|
||
|
|
if (this.wishlist.length === 0) {
|
||
|
|
wishlistItems.innerHTML = `
|
||
|
|
<div class="wishlist-empty">
|
||
|
|
<i class="bi bi-heart"></i>
|
||
|
|
<p>Your wishlist is empty</p>
|
||
|
|
<p style="font-size: 0.9rem;">Browse our products and add items you love!</p>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
wishlistItems.innerHTML = this.wishlist
|
||
|
|
.map(
|
||
|
|
(item) => `
|
||
|
|
<div class="wishlist-item" data-id="${item.id}">
|
||
|
|
<div class="wishlist-item-image">
|
||
|
|
<img src="${item.image || "/uploads/default-product.png"}" alt="${
|
||
|
|
item.name
|
||
|
|
}">
|
||
|
|
</div>
|
||
|
|
<div class="wishlist-item-info">
|
||
|
|
<div class="wishlist-item-name">${item.name}</div>
|
||
|
|
${
|
||
|
|
item.color
|
||
|
|
? `<div class="wishlist-item-color" style="font-size: 0.85rem; color: #666;">Color: ${item.color}</div>`
|
||
|
|
: ""
|
||
|
|
}
|
||
|
|
<div class="wishlist-item-price">$${parseFloat(item.price).toFixed(
|
||
|
|
2,
|
||
|
|
)}</div>
|
||
|
|
<div class="wishlist-item-actions">
|
||
|
|
<button class="wishlist-add-to-cart" onclick="SkyArtShop.moveToCart('${
|
||
|
|
item.id
|
||
|
|
}')">
|
||
|
|
<i class="bi bi-cart-plus"></i> Add to Cart
|
||
|
|
</button>
|
||
|
|
<button class="wishlist-remove" onclick="SkyArtShop.removeFromWishlistById('${
|
||
|
|
item.id
|
||
|
|
}')">
|
||
|
|
<i class="bi bi-trash"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
)
|
||
|
|
.join("");
|
||
|
|
},
|
||
|
|
|
||
|
|
moveToCart(productId) {
|
||
|
|
const item = this.wishlist.find((item) => item.id === productId);
|
||
|
|
if (item) {
|
||
|
|
// Pass the full item including color and image
|
||
|
|
this.addToCart({
|
||
|
|
id: item.id,
|
||
|
|
productId: item.productId || item.id,
|
||
|
|
name: item.name,
|
||
|
|
price: item.price,
|
||
|
|
image: item.image,
|
||
|
|
color: item.color || null,
|
||
|
|
});
|
||
|
|
this.removeFromWishlistById(productId);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
removeFromWishlistById(productId) {
|
||
|
|
const index = this.wishlist.findIndex((item) => item.id === productId);
|
||
|
|
if (index > -1) {
|
||
|
|
const item = this.wishlist[index];
|
||
|
|
this.wishlist.splice(index, 1);
|
||
|
|
this.saveWishlist();
|
||
|
|
this.updateWishlistCount();
|
||
|
|
this.updateWishlistButtons();
|
||
|
|
this.renderWishlist();
|
||
|
|
this.showNotification(`${item.name} removed from wishlist`);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// Products
|
||
|
|
initProducts() {
|
||
|
|
// Attach event listeners to product cards
|
||
|
|
document.querySelectorAll(".add-to-cart-btn").forEach((btn) => {
|
||
|
|
btn.addEventListener("click", (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
const card = btn.closest(".product-card");
|
||
|
|
const product = this.getProductFromCard(card);
|
||
|
|
this.addToCart(product);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
document.querySelectorAll(".wishlist-btn").forEach((btn) => {
|
||
|
|
btn.addEventListener("click", (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
const card = btn.closest(".product-card");
|
||
|
|
const product = this.getProductFromCard(card);
|
||
|
|
this.toggleWishlist(product);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
this.updateWishlistButtons();
|
||
|
|
},
|
||
|
|
|
||
|
|
getProductFromCard(card) {
|
||
|
|
return {
|
||
|
|
id: card.dataset.productId,
|
||
|
|
name:
|
||
|
|
card.querySelector(".product-name a")?.textContent ||
|
||
|
|
card.querySelector(".product-name")?.textContent ||
|
||
|
|
"Product",
|
||
|
|
price:
|
||
|
|
card.dataset.productPrice ||
|
||
|
|
card.querySelector(".price-current")?.textContent?.replace("$", "") ||
|
||
|
|
"0",
|
||
|
|
image: card.querySelector(".product-image img")?.src || "",
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
// Animations
|
||
|
|
initAnimations() {
|
||
|
|
// Intersection Observer for scroll animations
|
||
|
|
const observer = new IntersectionObserver(
|
||
|
|
(entries) => {
|
||
|
|
entries.forEach((entry) => {
|
||
|
|
if (entry.isIntersecting) {
|
||
|
|
entry.target.classList.add("fade-in");
|
||
|
|
observer.unobserve(entry.target);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
{ threshold: 0.1 },
|
||
|
|
);
|
||
|
|
|
||
|
|
document
|
||
|
|
.querySelectorAll(".section, .product-card, .blog-card, .portfolio-card")
|
||
|
|
.forEach((el) => {
|
||
|
|
observer.observe(el);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
// Notifications
|
||
|
|
showNotification(message, type = "success") {
|
||
|
|
// Remove existing notifications
|
||
|
|
document.querySelectorAll(".notification").forEach((n) => n.remove());
|
||
|
|
|
||
|
|
const notification = document.createElement("div");
|
||
|
|
notification.className = `notification notification-${type}`;
|
||
|
|
notification.innerHTML = `
|
||
|
|
<i class="bi bi-${
|
||
|
|
type === "success" ? "check-circle" : "exclamation-circle"
|
||
|
|
}"></i>
|
||
|
|
<span>${message}</span>
|
||
|
|
`;
|
||
|
|
notification.style.cssText = `
|
||
|
|
position: fixed;
|
||
|
|
bottom: 20px;
|
||
|
|
right: 20px;
|
||
|
|
background: ${type === "success" ? "#202023" : "#e74c3c"};
|
||
|
|
color: white;
|
||
|
|
padding: 16px 24px;
|
||
|
|
border-radius: 12px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 10px;
|
||
|
|
font-weight: 500;
|
||
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
|
||
|
|
z-index: 9999;
|
||
|
|
animation: slideIn 0.3s ease;
|
||
|
|
`;
|
||
|
|
|
||
|
|
document.body.appendChild(notification);
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
notification.style.animation = "slideOut 0.3s ease forwards";
|
||
|
|
setTimeout(() => notification.remove(), 300);
|
||
|
|
}, 3000);
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
// Add notification animations
|
||
|
|
const style = document.createElement("style");
|
||
|
|
style.textContent = `
|
||
|
|
@keyframes slideIn {
|
||
|
|
from { transform: translateX(100%); opacity: 0; }
|
||
|
|
to { transform: translateX(0); opacity: 1; }
|
||
|
|
}
|
||
|
|
@keyframes slideOut {
|
||
|
|
from { transform: translateX(0); opacity: 1; }
|
||
|
|
to { transform: translateX(100%); opacity: 0; }
|
||
|
|
}
|
||
|
|
.cart-empty {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
height: 300px;
|
||
|
|
text-align: center;
|
||
|
|
color: var(--text-light);
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
document.head.appendChild(style);
|
||
|
|
|
||
|
|
// Initialize on DOM ready
|
||
|
|
document.addEventListener("DOMContentLoaded", () => {
|
||
|
|
SkyArtShop.init();
|
||
|
|
});
|
||
|
|
|
||
|
|
// API Functions
|
||
|
|
const API = {
|
||
|
|
baseUrl: "/api",
|
||
|
|
|
||
|
|
async get(endpoint, noCache = false) {
|
||
|
|
try {
|
||
|
|
const url = noCache
|
||
|
|
? `${this.baseUrl}${endpoint}${endpoint.includes("?") ? "&" : "?"}_t=${Date.now()}`
|
||
|
|
: `${this.baseUrl}${endpoint}`;
|
||
|
|
const response = await fetch(url);
|
||
|
|
const data = await response.json();
|
||
|
|
return data.success ? data : null;
|
||
|
|
} catch (error) {
|
||
|
|
console.error("API Error:", error);
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
async loadFeaturedProducts() {
|
||
|
|
const data = await this.get("/products/featured?limit=4");
|
||
|
|
return data?.products || [];
|
||
|
|
},
|
||
|
|
|
||
|
|
async loadAllProducts() {
|
||
|
|
const data = await this.get("/products");
|
||
|
|
return data?.products || [];
|
||
|
|
},
|
||
|
|
|
||
|
|
async loadProduct(slug) {
|
||
|
|
// Always fetch fresh product data to get latest color variants
|
||
|
|
const data = await this.get(`/products/${slug}`, true);
|
||
|
|
return data?.product || null;
|
||
|
|
},
|
||
|
|
|
||
|
|
async loadHomepageSections() {
|
||
|
|
const data = await this.get("/homepage/sections");
|
||
|
|
return data?.sections || [];
|
||
|
|
},
|
||
|
|
|
||
|
|
async loadBlogPosts() {
|
||
|
|
const data = await this.get("/blog/posts");
|
||
|
|
return data?.posts || [];
|
||
|
|
},
|
||
|
|
|
||
|
|
async loadPortfolioProjects() {
|
||
|
|
const data = await this.get("/portfolio/projects", true);
|
||
|
|
return data?.projects || [];
|
||
|
|
},
|
||
|
|
|
||
|
|
async loadTeamMembers() {
|
||
|
|
const data = await this.get("/team-members");
|
||
|
|
return data?.teamMembers || [];
|
||
|
|
},
|
||
|
|
|
||
|
|
async loadCategories() {
|
||
|
|
const data = await this.get("/categories");
|
||
|
|
return data?.categories || [];
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
// Product Renderer
|
||
|
|
const ProductRenderer = {
|
||
|
|
renderCard(product) {
|
||
|
|
const primaryImage =
|
||
|
|
product.images?.find((img) => img.is_primary) || product.images?.[0];
|
||
|
|
const imageUrl =
|
||
|
|
primaryImage?.image_url ||
|
||
|
|
product.imageurl ||
|
||
|
|
"/assets/images/placeholder.jpg";
|
||
|
|
const inWishlist = SkyArtShop.isInWishlist(product.id);
|
||
|
|
|
||
|
|
return `
|
||
|
|
<div class="product-card" data-product-id="${
|
||
|
|
product.id
|
||
|
|
}" data-product-slug="${
|
||
|
|
product.slug || product.id
|
||
|
|
}" data-product-price="${product.price}" style="cursor: pointer;">
|
||
|
|
<div class="product-image">
|
||
|
|
<img src="${imageUrl}" alt="${product.name}" loading="lazy">
|
||
|
|
${
|
||
|
|
product.isfeatured
|
||
|
|
? '<div class="product-badges"><span class="product-badge new">Featured</span></div>'
|
||
|
|
: ""
|
||
|
|
}
|
||
|
|
<div class="product-actions">
|
||
|
|
<button class="product-action-btn wishlist-btn ${
|
||
|
|
inWishlist ? "active" : ""
|
||
|
|
}" data-product-id="${product.id}" title="Add to Wishlist">
|
||
|
|
<i class="bi bi-heart${inWishlist ? "-fill" : ""}"></i>
|
||
|
|
</button>
|
||
|
|
<button class="product-action-btn quick-view-btn" title="Quick View">
|
||
|
|
<i class="bi bi-eye"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="product-info">
|
||
|
|
<div class="product-category">${product.category || "General"}</div>
|
||
|
|
<h3 class="product-name">${product.name}</h3>
|
||
|
|
<div class="product-price">
|
||
|
|
<span class="price-current">$${parseFloat(product.price).toFixed(
|
||
|
|
2,
|
||
|
|
)}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="product-footer">
|
||
|
|
<span class="product-stock ${
|
||
|
|
product.stockquantity > 0
|
||
|
|
? product.stockquantity < 10
|
||
|
|
? "low-stock"
|
||
|
|
: "in-stock"
|
||
|
|
: ""
|
||
|
|
}">
|
||
|
|
${
|
||
|
|
product.stockquantity > 0
|
||
|
|
? product.stockquantity < 10
|
||
|
|
? `Only ${product.stockquantity} left`
|
||
|
|
: "In Stock"
|
||
|
|
: "Out of Stock"
|
||
|
|
}
|
||
|
|
</span>
|
||
|
|
<button class="add-to-cart-btn" ${
|
||
|
|
product.stockquantity <= 0 ? "disabled" : ""
|
||
|
|
}>
|
||
|
|
<i class="bi bi-cart-plus"></i> Add
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
},
|
||
|
|
|
||
|
|
async renderProducts(container, products) {
|
||
|
|
if (!container) return;
|
||
|
|
|
||
|
|
if (products.length === 0) {
|
||
|
|
container.innerHTML = '<p class="text-center">No products found.</p>';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
container.innerHTML = products.map((p) => this.renderCard(p)).join("");
|
||
|
|
SkyArtShop.initProducts();
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
// Blog Renderer
|
||
|
|
const BlogRenderer = {
|
||
|
|
renderCard(post) {
|
||
|
|
const date = new Date(post.createdat).toLocaleDateString("en-US", {
|
||
|
|
year: "numeric",
|
||
|
|
month: "short",
|
||
|
|
day: "numeric",
|
||
|
|
});
|
||
|
|
|
||
|
|
return `
|
||
|
|
<article class="blog-card">
|
||
|
|
<div class="blog-image">
|
||
|
|
<a href="/blog/${post.slug}">
|
||
|
|
<img src="${
|
||
|
|
post.imageurl || "/assets/images/blog-placeholder.jpg"
|
||
|
|
}" alt="${post.title}" loading="lazy">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="blog-content">
|
||
|
|
<div class="blog-meta">
|
||
|
|
<span><i class="bi bi-calendar3"></i> ${date}</span>
|
||
|
|
</div>
|
||
|
|
<h3 class="blog-title">
|
||
|
|
<a href="/blog/${post.slug}">${post.title}</a>
|
||
|
|
</h3>
|
||
|
|
<p class="blog-excerpt">${post.excerpt || ""}</p>
|
||
|
|
<a href="/blog/${post.slug}" class="blog-read-more">
|
||
|
|
Read More <i class="bi bi-arrow-right"></i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
`;
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
// Portfolio Renderer
|
||
|
|
const PortfolioRenderer = {
|
||
|
|
renderCard(project) {
|
||
|
|
return `
|
||
|
|
<div class="portfolio-card" data-project-id="${project.id}">
|
||
|
|
<img src="${
|
||
|
|
project.featuredimage || "/assets/images/portfolio-placeholder.jpg"
|
||
|
|
}" alt="${project.title}" loading="lazy">
|
||
|
|
<div class="portfolio-overlay">
|
||
|
|
<h3>${project.title}</h3>
|
||
|
|
<p>${project.description || ""}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
// Export for global use
|
||
|
|
window.SkyArtShop = SkyArtShop;
|
||
|
|
window.API = API;
|
||
|
|
window.ProductRenderer = ProductRenderer;
|
||
|
|
window.BlogRenderer = BlogRenderer;
|
||
|
|
window.PortfolioRenderer = PortfolioRenderer;
|