2025-12-13 22:59:42 -06:00
<!DOCTYPE html>
< html lang = "en" >
2025-12-24 00:13:23 -06:00
< head >
< meta charset = "UTF-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
< title > Product Details - Sky Art Shop< / title >
< link rel = "preconnect" href = "https://fonts.googleapis.com" / >
< link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin / >
< link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700& display=swap"
rel="stylesheet"
/>
< link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
/>
2026-01-01 22:24:30 -06:00
< link rel = "stylesheet" href = "/assets/css/main.css?v=1735692100" / >
< link rel = "stylesheet" href = "/assets/css/navbar.css?v=1735692200" / >
2025-12-24 00:13:23 -06:00
< link rel = "stylesheet" href = "/assets/css/shopping.css" / >
2026-01-01 22:24:30 -06:00
< link rel = "stylesheet" href = "/assets/css/responsive.css" / >
< style >
/* Custom Scrollbar for Description Box */
div[style*="overflow-y: auto"] {
scrollbar-width: thin;
scrollbar-color: #6b46c1 #f3f4f6;
}
div[style*="overflow-y: auto"]::-webkit-scrollbar {
width: 8px;
}
div[style*="overflow-y: auto"]::-webkit-scrollbar-track {
background: #f3f4f6;
border-radius: 4px;
}
div[style*="overflow-y: auto"]::-webkit-scrollbar-thumb {
background: #6b46c1;
border-radius: 4px;
}
div[style*="overflow-y: auto"]::-webkit-scrollbar-thumb:hover {
background: #5936a3;
}
/* Smooth image transitions */
#primaryImage {
transition: opacity 0.3s ease-in-out;
}
/* Thumbnail hover effect */
.thumbnail-item:hover {
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
/* Color variant animation */
.color-variant-circle {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
< / style >
< link rel = "stylesheet" href = "/assets/css/theme-colors.css" / >
2025-12-24 00:13:23 -06:00
< / head >
2025-12-13 22:59:42 -06:00
< body >
<!-- Modern Navigation -->
< nav class = "modern-navbar" >
< div class = "navbar-wrapper" >
< div class = "navbar-brand" >
2026-01-01 22:24:30 -06:00
< a href = "/home" class = "brand-link" >
2025-12-24 00:13:23 -06:00
< img
2026-01-01 22:24:30 -06:00
src="/uploads/cat-png-1767324141436-368259437.png"
2025-12-24 00:13:23 -06:00
alt="Sky Art Shop Logo"
class="brand-logo"
/>
2026-01-01 22:24:30 -06:00
< span class = "brand-name" > Sky' Art Shop< / span >
2025-12-13 22:59:42 -06:00
< / a >
< / div >
2025-12-24 00:13:23 -06:00
2025-12-13 22:59:42 -06:00
< div class = "navbar-menu" >
< ul class = "nav-menu-list" >
2025-12-24 00:13:23 -06:00
< li class = "nav-item" >
2026-01-01 22:24:30 -06:00
< a href = "/home" class = "nav-link" > Home< / a >
2025-12-24 00:13:23 -06:00
< / li >
< li class = "nav-item" >
2026-01-01 22:24:30 -06:00
< a href = "/shop" class = "nav-link" > Shop< / a >
2025-12-24 00:13:23 -06:00
< / li >
< li class = "nav-item" >
2026-01-01 22:24:30 -06:00
< a href = "/portfolio" class = "nav-link" > Portfolio< / a >
2025-12-24 00:13:23 -06:00
< / li >
< li class = "nav-item" >
2026-01-01 22:24:30 -06:00
< a href = "/about" class = "nav-link" > About< / a >
2025-12-24 00:13:23 -06:00
< / li >
< li class = "nav-item" >
2026-01-01 22:24:30 -06:00
< a href = "/blog" class = "nav-link" > Blog< / a >
2025-12-24 00:13:23 -06:00
< / li >
< li class = "nav-item" >
2026-01-01 22:24:30 -06:00
< a href = "/contact" class = "nav-link" > Contact< / a >
2025-12-24 00:13:23 -06:00
< / li >
2025-12-13 22:59:42 -06:00
< / ul >
< / div >
2025-12-24 00:13:23 -06:00
2025-12-13 22:59:42 -06:00
< div class = "navbar-actions" >
< div class = "action-item wishlist-dropdown-wrapper" >
2025-12-24 00:13:23 -06:00
< button
class="action-btn"
id="wishlistToggle"
aria-label="Wishlist"
>
2025-12-13 22:59:42 -06:00
< i class = "bi bi-heart" > < / i >
< span class = "action-badge" id = "wishlistCount" > 0< / span >
< / button >
< div class = "action-dropdown wishlist-dropdown" id = "wishlistPanel" >
< div class = "dropdown-head" >
< h3 > My Wishlist< / h3 >
2025-12-24 00:13:23 -06:00
< button class = "dropdown-close" id = "wishlistClose" >
< i class = "bi bi-x-lg" > < / i >
< / button >
2025-12-13 22:59:42 -06:00
< / div >
< div class = "dropdown-body" id = "wishlistContent" >
< p class = "empty-state" > Your wishlist is empty< / p >
< / div >
< div class = "dropdown-foot" >
2026-01-01 22:24:30 -06:00
< a href = "/shop" class = "btn-outline" > Continue Shopping< / a >
2025-12-13 22:59:42 -06:00
< / div >
< / div >
< / div >
2025-12-24 00:13:23 -06:00
2025-12-13 22:59:42 -06:00
< div class = "action-item cart-dropdown-wrapper" >
2025-12-24 00:13:23 -06:00
< button
class="action-btn"
id="cartToggle"
aria-label="Shopping Cart"
>
2025-12-13 22:59:42 -06:00
< i class = "bi bi-cart3" > < / i >
< span class = "action-badge" id = "cartCount" > 0< / span >
< / button >
< div class = "action-dropdown cart-dropdown" id = "cartPanel" >
< div class = "dropdown-head" >
< h3 > Shopping Cart< / h3 >
2025-12-24 00:13:23 -06:00
< button class = "dropdown-close" id = "cartClose" >
< i class = "bi bi-x-lg" > < / i >
< / button >
2025-12-13 22:59:42 -06:00
< / div >
< div class = "dropdown-body" id = "cartContent" >
< p class = "empty-state" > Your cart is empty< / p >
< / div >
< div class = "dropdown-foot" >
< div class = "cart-summary" >
< span class = "summary-label" > Subtotal:< / span >
< span class = "summary-value" id = "cartSubtotal" > $0.00< / span >
< / div >
2026-01-01 22:24:30 -06:00
< a href = "/checkout" class = "btn-primary-full"
2025-12-24 00:13:23 -06:00
>Proceed to Checkout< /a
>
2026-01-01 22:24:30 -06:00
< a href = "/shop" class = "btn-text" > Continue Shopping< / a >
2025-12-13 22:59:42 -06:00
< / div >
< / div >
< / div >
2025-12-24 00:13:23 -06:00
2025-12-13 22:59:42 -06:00
< button class = "mobile-toggle" id = "mobileMenuToggle" aria-label = "Menu" >
< span class = "toggle-line" > < / span >
< span class = "toggle-line" > < / span >
< span class = "toggle-line" > < / span >
< / button >
< / div >
< / div >
2025-12-24 00:13:23 -06:00
2025-12-13 22:59:42 -06:00
< div class = "mobile-menu" id = "mobileMenu" >
< div class = "mobile-menu-header" >
2026-01-01 22:24:30 -06:00
< span class = "mobile-brand" > Sky' Art Shop< / span >
2025-12-24 00:13:23 -06:00
< button class = "mobile-close" id = "mobileMenuClose" >
< i class = "bi bi-x-lg" > < / i >
< / button >
2025-12-13 22:59:42 -06:00
< / div >
< ul class = "mobile-menu-list" >
2026-01-01 22:24:30 -06:00
< li > < a href = "/home" class = "mobile-link" > Home< / a > < / li >
< li > < a href = "/shop" class = "mobile-link" > Shop< / a > < / li >
< li > < a href = "/portfolio" class = "mobile-link" > Portfolio< / a > < / li >
< li > < a href = "/about" class = "mobile-link" > About< / a > < / li >
< li > < a href = "/blog" class = "mobile-link" > Blog< / a > < / li >
< li > < a href = "/contact" class = "mobile-link" > Contact< / a > < / li >
2025-12-13 22:59:42 -06:00
< / ul >
< / div >
< / nav >
2025-12-24 00:13:23 -06:00
< div
id="loading"
style="
text-align: center;
padding: 100px 20px;
font-size: 18px;
2026-01-01 22:24:30 -06:00
color: #202023;
background: #ffebeb;
2025-12-24 00:13:23 -06:00
"
>
< i
class="bi bi-hourglass-split"
style="font-size: 48px; display: block; margin-bottom: 20px"
>< / i >
Loading product...
< / div >
< div id = "productDetail" style = "display: none" > < / div >
2026-01-01 22:24:30 -06:00
< script src = "/assets/js/page-transitions.js?v=1766709739" > < / script >
< script src = "/assets/js/back-button-control.js?v=1766723554" > < / script >
< script src = "/assets/js/main.js?v=1766708114" > < / script >
< script src = "/assets/js/navigation.js?v=1766708114" > < / script >
< script src = "/assets/js/state-manager.js" > < / script >
< script src = "/assets/js/api-client.js" > < / script >
< script src = "/assets/js/notifications.js" > < / script >
< script src = "/assets/js/cart-functions.js" > < / script >
< script src = "/assets/js/cart.js?v=1766708114" > < / script >
< script src = "/assets/js/shopping.js?v=1766708114" > < / script >
2025-12-24 00:13:23 -06:00
< script >
// Function to change primary image
2026-01-01 22:24:30 -06:00
function changePrimaryImage(imageUrl, index) {
2025-12-24 00:13:23 -06:00
const primaryImg = document.getElementById("primaryImage");
if (primaryImg) {
primaryImg.src = imageUrl;
}
2026-01-01 22:24:30 -06:00
// Update thumbnail borders
const thumbnails = document.querySelectorAll(".thumbnail-item");
thumbnails.forEach((thumb, idx) => {
if (idx === index) {
thumb.style.border = "2px solid #6b46c1";
2025-12-24 00:13:23 -06:00
} else {
2026-01-01 22:24:30 -06:00
thumb.style.border = "1px solid #e5e7eb";
}
});
// Update color variant borders
const variants = document.querySelectorAll(".color-variant-circle");
variants.forEach((variant) => {
const onclick = variant.getAttribute("onclick");
if (onclick & & onclick.includes(imageUrl)) {
variant.style.border = "3px solid #6b46c1";
} else {
variant.style.border = "3px solid #e5e7eb";
2025-12-24 00:13:23 -06:00
}
});
2025-12-13 22:59:42 -06:00
}
2025-12-24 00:13:23 -06:00
async function loadProduct() {
const params = new URLSearchParams(window.location.search);
const productId = params.get("id");
2026-01-01 22:24:30 -06:00
console.log("Product page loaded. URL:", window.location.href);
console.log("Product ID from URL:", productId);
2025-12-24 00:13:23 -06:00
if (!productId) {
2026-01-01 22:24:30 -06:00
console.error("No product ID in URL");
2025-12-24 00:13:23 -06:00
document.getElementById("loading").innerHTML =
2026-01-01 22:24:30 -06:00
'< p style = "text-align: center; padding: 40px; color: #ef4444; font-size: 18px;" > Product not found - No product ID in URL< / p > < div style = "text-align: center;" > < a href = "/shop" style = "color: #FCB1D8; text-decoration: none; font-weight: 600;" > ← Back to Shop< / a > < / div > ';
2025-12-24 00:13:23 -06:00
return;
2025-12-13 22:59:42 -06:00
}
2025-12-24 00:13:23 -06:00
try {
2026-01-01 22:24:30 -06:00
console.log(
"Fetching product from API:",
`/api/products/${productId}`
);
2025-12-24 00:13:23 -06:00
const response = await fetch(`/api/products/${productId}`);
const data = await response.json();
2026-01-01 22:24:30 -06:00
console.log("API response:", data);
2025-12-24 00:13:23 -06:00
if (!data.success || !data.product) {
throw new Error("Product not found");
}
const product = data.product;
document.title = `${product.name} - Sky Art Shop`;
// Get primary image or first image from images array
2026-01-01 22:24:30 -06:00
let primaryImage = "/assets/images/placeholder.svg";
2025-12-24 00:13:23 -06:00
let imageGallery = [];
if (
product.images & &
Array.isArray(product.images) & &
product.images.length > 0
) {
// Find primary image
const primary = product.images.find((img) => img.is_primary);
if (primary) {
primaryImage = primary.image_url;
} else {
primaryImage = product.images[0].image_url;
}
imageGallery = product.images;
}
// Build image gallery HTML
let galleryHTML = "";
if (imageGallery.length > 0) {
galleryHTML = `
< div style = "display: flex; gap: 12px; margin-top: 16px; overflow-x: auto; padding: 8px 0;" >
${imageGallery
.map(
(img, idx) => `
< img src = "${img.image_url}"
alt="${img.alt_text || product.name}"
onclick="changePrimaryImage('${img.image_url}')"
style="width: 80px; height: 80px; object-fit: cover; border-radius: 8px; cursor: pointer; border: ${
img.image_url === primaryImage
? "3px solid #6b46c1"
: "1px solid #e5e7eb"
};"
2026-01-01 22:24:30 -06:00
onerror="this.src='/assets/images/placeholder.svg'" />
2025-12-24 00:13:23 -06:00
`
)
.join("")}
< / div >
`;
}
// Build product details HTML
let detailsHTML = "";
if (
product.sku ||
product.weight ||
product.dimensions ||
product.material
) {
detailsHTML = `
2026-01-01 22:24:30 -06:00
< div style = "margin-bottom: 24px; padding: 20px; background: #FFD0D0; border-radius: 8px; border: 1px solid #FCB1D8;" >
< h3 style = "font-size: 16px; font-weight: 600; color: #202023; margin-bottom: 16px;" > Product Details< / h3 >
2025-12-24 00:13:23 -06:00
${
product.sku
? `
2026-01-01 22:24:30 -06:00
< p style = "margin-bottom: 8px; color: #202023; opacity: 0.8;" >
2025-12-24 00:13:23 -06:00
< span style = "font-weight: 500;" > SKU:< / span > ${product.sku}
< / p >
`
: ""
}
${
product.weight
? `
2026-01-01 22:24:30 -06:00
< p style = "margin-bottom: 8px; color: #202023; opacity: 0.8;" >
2025-12-24 00:13:23 -06:00
< span style = "font-weight: 500;" > Weight:< / span > ${product.weight}
< / p >
`
: ""
}
${
product.dimensions
? `
2026-01-01 22:24:30 -06:00
< p style = "margin-bottom: 8px; color: #202023; opacity: 0.8;" >
2025-12-24 00:13:23 -06:00
< span style = "font-weight: 500;" > Dimensions:< / span > ${product.dimensions}
< / p >
`
: ""
}
${
product.material
? `
< p style = "margin-bottom: 8px; color: #6b7280;" >
< span style = "font-weight: 500;" > Material:< / span > ${product.material}
< / p >
`
: ""
}
< / div >
`;
}
// Build badges HTML
let badgesHTML = "";
if (product.isfeatured || product.isbestseller) {
badgesHTML = `
< div style = "display: flex; gap: 8px; margin-bottom: 16px;" >
${
product.isfeatured
? `
2026-01-01 22:24:30 -06:00
< span style = "display: inline-block; padding: 6px 12px; background: #FCB1D8; color: #202023; border-radius: 6px; font-size: 12px; font-weight: 600; box-shadow: 0 2px 4px rgba(252, 177, 216, 0.4);" >
2025-12-24 00:13:23 -06:00
< i class = "bi bi-star-fill" > < / i > Featured
< / span >
`
: ""
}
${
product.isbestseller
? `
2026-01-01 22:24:30 -06:00
< span style = "display: inline-block; padding: 6px 12px; background: #F6CCDE; color: #202023; border-radius: 6px; font-size: 12px; font-weight: 600; box-shadow: 0 2px 4px rgba(252, 177, 216, 0.4);" >
2025-12-24 00:13:23 -06:00
< i class = "bi bi-trophy-fill" > < / i > Best Seller
< / span >
`
: ""
}
< / div >
`;
}
document.getElementById("productDetail").innerHTML = `
2025-12-13 22:59:42 -06:00
< div style = "font-family: 'Roboto', sans-serif;" >
2026-01-01 22:24:30 -06:00
< nav style = "background: #F6CCDE; padding: 16px 24px; box-shadow: 0 1px 3px rgba(252, 177, 216, 0.3);" >
< div style = "max-width: 1400px; margin: 0 auto; display: flex; align-items: center; gap: 20px;" >
< a href = "/home" style = "font-size: 20px; font-weight: 600; color: #202023; text-decoration: none;" > Sky Art Shop< / a >
< span style = "color: #202023; opacity: 0.5;" > /< / span >
< a href = "/shop" style = "color: #202023; opacity: 0.8; text-decoration: none; transition: opacity 0.3s;" onmouseover = "this.style.opacity='1'" onmouseout = "this.style.opacity='0.8'" > Shop< / a >
< span style = "color: #202023; opacity: 0.5;" > /< / span >
< span style = "color: #202023; opacity: 0.7;" > ${
product.name
}< / span >
2025-12-13 22:59:42 -06:00
< / div >
< / nav >
2026-01-01 22:24:30 -06:00
< div style = "max-width: 1400px; margin: 40px auto; padding: 0 24px; background: #FFEBEB; border-radius: 12px; padding: 40px 24px;" >
< div style = "display: grid; grid-template-columns: 1fr 1fr; gap: 60px;" >
<!-- LEFT COLUMN: Image & Description -->
2025-12-13 22:59:42 -06:00
< div >
2026-01-01 22:24:30 -06:00
<!-- Back to Shop Link -->
< a href = "/shop" style = "display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; color: #FCB1D8; text-decoration: none; font-weight: 600; font-size: 15px; transition: all 0.3s;"
onmouseover="this.style.gap='12px'; this.style.color='#d896c0'"
onmouseout="this.style.gap='8px'; this.style.color='#FCB1D8'">
< i class = "bi bi-arrow-left" > < / i > Back to Shop
< / a >
<!-- Image Section with Thumbnails -->
< div style = "display: flex; gap: 16px;" >
<!-- Thumbnail Gallery (Vertical Left) -->
${
imageGallery.length > 1
? `
< div id = "thumbnailGallery" style = "display: flex; flex-direction: column; gap: 12px; max-height: 600px; overflow-y: auto;" >
${imageGallery
.map(
(img, idx) => `
< div onclick = "changePrimaryImage('${
img.image_url
}', ${idx})"
class="thumbnail-item"
data-index="${idx}"
style="width: 70px; height: 70px; border-radius: 4px; overflow: hidden; cursor: pointer; border: ${
img.image_url === primaryImage
? "2px solid #6b46c1"
: "1px solid #e5e7eb"
}; transition: all 0.3s; flex-shrink: 0;">
< img src = "${img.image_url}"
alt="${img.alt_text || product.name}"
style="width: 100%; height: 100%; object-fit: cover;"
onerror="this.src='/assets/images/placeholder.svg'" />
< / div >
`
)
.join("")}
< / div >
`
: ""
}
<!-- Main Product Image -->
< div style = "flex: 1; background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(252, 177, 216, 0.2); border: 1px solid #FFD0D0; padding: 20px; display: flex; align-items: center; justify-content: center; min-height: 500px; max-height: 600px;" >
< img id = "primaryImage"
src="${primaryImage}"
alt="${product.name}"
style="max-width: 100%; max-height: 560px; width: auto; height: auto; object-fit: contain; display: block;"
onerror="this.src='/assets/images/placeholder.svg'" />
< / div >
2025-12-13 22:59:42 -06:00
< / div >
2026-01-01 22:24:30 -06:00
<!-- Color Variants Section -->
2025-12-24 00:13:23 -06:00
${
2026-01-01 22:24:30 -06:00
imageGallery.some(
(img) => img.color_variant & & img.color_code
)
2025-12-24 00:13:23 -06:00
? `
2026-01-01 22:24:30 -06:00
< div style = "margin-top: 24px; padding: 20px; background: #FFD0D0; border-radius: 12px;" >
< h4 style = "font-size: 14px; font-weight: 600; color: #1a1a1a; margin-bottom: 12px; display: flex; align-items: center; gap: 8px;" >
< i class = "bi bi-palette" > < / i >
Available Colors (${
imageGallery.filter((img) => img.color_variant).length
})
< / h4 >
< div style = "display: flex; gap: 12px; flex-wrap: wrap;" >
${imageGallery
.filter((img) => img.color_variant & & img.color_code)
.map(
(img, idx) => `
< div onclick = "changePrimaryImage('${
img.image_url
}', ${imageGallery.indexOf(img)})"
class="color-variant-circle"
title="${img.color_variant}"
style="position: relative; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; border: 3px solid ${
img.image_url === primaryImage
? "#FCB1D8"
: "#FFEBEB"
}; transition: all 0.3s; overflow: hidden; box-shadow: 0 2px 4px rgba(252, 177, 216, 0.3);"
onmouseover="this.querySelector('.color-name-tooltip').style.opacity='1'; this.querySelector('.color-name-tooltip').style.transform='translateY(0)'; this.style.transform='scale(1.15)'"
onmouseout="this.querySelector('.color-name-tooltip').style.opacity='0'; this.querySelector('.color-name-tooltip').style.transform='translateY(-5px)'; this.style.transform='scale(1)'">
< div style = "width: 100 % ; height: 100 % ; background: $ {
img.color_code
};">< / div >
< div class = "color-name-tooltip" style = "position: absolute; bottom: -35px; left: 50%; transform: translateX(-50%) translateY(-5px); background: rgba(0,0,0,0.9); color: white; padding: 6px 12px; border-radius: 6px; font-size: 12px; white-space: nowrap; pointer-events: none; opacity: 0; transition: all 0.3s; z-index: 10;" >
2025-12-24 00:13:23 -06:00
${img.color_variant}
2026-01-01 22:24:30 -06:00
< / div >
< / div >
`
)
.join("")}
< / div >
< / div >
`
: ""
}
<!-- Description Box -->
${
product.description
? `
< div style = "margin-top: 24px; padding: 20px; background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(252, 177, 216, 0.2); border: 1px solid #FFD0D0;" >
< div style = "display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 2px solid #FCB1D8;" >
< i class = "bi bi-pin-angle-fill" style = "color: #FCB1D8; font-size: 18px;" > < / i >
< h3 style = "font-size: 16px; font-weight: 600; color: #202023; margin: 0;" > Description< / h3 >
< / div >
< div style = "max-height: 200px; overflow-y: auto; color: #4b5563; line-height: 1.7; font-size: 15px; padding-right: 8px;" >
${product.description}
2025-12-24 00:13:23 -06:00
< / div >
2026-01-01 22:24:30 -06:00
< / div >
2025-12-24 00:13:23 -06:00
`
: ""
}
2025-12-13 22:59:42 -06:00
< / div >
2026-01-01 22:24:30 -06:00
<!-- RIGHT COLUMN: Product Info & Actions -->
2025-12-13 22:59:42 -06:00
< div style = "padding: 20px 0;" >
2025-12-24 00:13:23 -06:00
${badgesHTML}
< h1 style = "font-size: 36px; font-weight: 700; color: #1a1a1a; margin: 0 0 16px 0; line-height: 1.2;" > ${
product.name
}< / h1 >
2025-12-13 22:59:42 -06:00
< div style = "display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px;" >
2026-01-01 22:24:30 -06:00
< p style = "font-size: 36px; font-weight: 700; color: #FCB1D8; margin: 0;" > $${parseFloat(
2025-12-24 00:13:23 -06:00
product.price
).toFixed(2)}< / p >
${
product.stockquantity > 0
2026-01-01 22:24:30 -06:00
? `< span style = "color: #10b981; font-weight: 500; display: flex; align-items: center; gap: 6px;" > < i class = "bi bi-check-circle-fill" > < / i > In Stock (${product.stockquantity} available)< / span > `
: `< span style = "color: #ef4444; font-weight: 500; display: flex; align-items: center; gap: 6px;" > < i class = "bi bi-x-circle-fill" > < / i > Out of Stock< / span > `
2025-12-13 22:59:42 -06:00
}
< / div >
2025-12-24 00:13:23 -06:00
${
product.shortdescription
? `
2025-12-19 20:44:46 -06:00
< p style = "font-size: 18px; color: #4b5563; line-height: 1.6; margin-bottom: 24px;" > ${product.shortdescription}< / p >
2025-12-24 00:13:23 -06:00
`
: ""
}
2025-12-13 22:59:42 -06:00
2025-12-24 00:13:23 -06:00
${
product.category
? `
2026-01-01 22:24:30 -06:00
< p style = "margin-bottom: 24px;" >
2025-12-13 22:59:42 -06:00
< span style = "font-weight: 500; color: #6b7280;" > Category:< / span >
2026-01-01 22:24:30 -06:00
< span style = "display: inline-block; margin-left: 8px; padding: 6px 14px; background: #FFD0D0; border-radius: 6px; font-size: 14px; color: #202023;" >
< i class = "bi bi-tag" > < / i > ${product.category}
< / span >
2025-12-13 22:59:42 -06:00
< / p >
2025-12-24 00:13:23 -06:00
`
: ""
}
2025-12-13 22:59:42 -06:00
2026-01-01 22:24:30 -06:00
<!-- Product Details (Moved from description area) -->
2025-12-24 00:13:23 -06:00
${detailsHTML}
2025-12-13 22:59:42 -06:00
2026-01-01 22:24:30 -06:00
<!-- Add to Cart & Wishlist Buttons -->
< div style = "display: flex; gap: 12px; margin-top: 32px; margin-bottom: 24px;" >
2025-12-13 22:59:42 -06:00
< button onclick = "addToCart()"
2025-12-24 00:13:23 -06:00
${product.stockquantity < = 0 ? "disabled" : ""}
2026-01-01 22:24:30 -06:00
style="padding: 14px 24px; background: ${
product.stockquantity < = 0 ? "#9ca3af" : "#FCB1D8"
}; color: #202023; border: none; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: ${
2025-12-24 00:13:23 -06:00
product.stockquantity < = 0 ? "not-allowed" : "pointer"
2026-01-01 22:24:30 -06:00
}; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 12px rgba(252, 177, 216, 0.3);"
2025-12-24 00:13:23 -06:00
onmouseover="if(${
product.stockquantity > 0
2026-01-01 22:24:30 -06:00
}) this.style.transform='translateY(-2px)'; this.style.background='#F6CCDE'; this.style.boxShadow='0 6px 16px rgba(252, 177, 216, 0.4)'"
2025-12-24 00:13:23 -06:00
onmouseout="if(${
product.stockquantity > 0
2026-01-01 22:24:30 -06:00
}) this.style.transform='translateY(0)'; this.style.background='#FCB1D8'; this.style.boxShadow='0 4px 12px rgba(252, 177, 216, 0.3)'">
2025-12-13 22:59:42 -06:00
< i class = "bi bi-cart-plus" style = "font-size: 20px;" > < / i >
2025-12-24 00:13:23 -06:00
${
product.stockquantity < = 0
? "Out of Stock"
: "Add to Cart"
}
2025-12-13 22:59:42 -06:00
< / button >
< button onclick = "addToWishlist()"
2026-01-01 22:24:30 -06:00
style="padding: 14px 20px; background: white; color: #FCB1D8; border: 2px solid #FCB1D8; border-radius: 10px; font-size: 18px; cursor: pointer; transition: all 0.3s;"
onmouseover="this.style.background='#FCB1D8'; this.style.color='white'; this.style.transform='scale(1.05)'"
onmouseout="this.style.background='white'; this.style.color='#FCB1D8'; this.style.transform='scale(1)'">
2025-12-13 22:59:42 -06:00
< i class = "bi bi-heart" > < / i >
< / button >
< / div >
2026-01-01 22:24:30 -06:00
< / div >
< / div >
<!-- Related Products Section -->
< div id = "relatedProducts" style = "margin-top: 60px; padding-top: 40px; border-top: 2px solid #e5e7eb;" >
< div style = "display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px;" >
< h2 style = "font-size: 28px; font-weight: 700; color: #1a1a1a; margin: 0; display: flex; align-items: center; gap: 12px;" >
< i class = "bi bi-box-seam" style = "color: #6b46c1;" > < / i >
You May Also Like
< / h2 >
< / div >
< div id = "relatedProductsGrid" style = "display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px;" >
<!-- Products will be loaded here -->
2025-12-13 22:59:42 -06:00
< / div >
< / div >
< / div >
< / div >
2025-12-19 20:44:46 -06:00
`;
2025-12-24 00:13:23 -06:00
document.getElementById("loading").style.display = "none";
document.getElementById("productDetail").style.display = "block";
2026-01-01 22:24:30 -06:00
// Store product data with imageurl for shopping cart
window.currentProduct = {
...product,
imageurl: primaryImage, // Add the primary image URL for cart display
};
// Track viewed product for smart recommendations
trackViewedProduct({
...product,
imageurl: primaryImage,
});
// Load related products
loadRelatedProducts(product.category, product.id);
console.log("Product loaded successfully:", product.name);
2025-12-24 00:13:23 -06:00
} catch (error) {
console.error("Error loading product:", error);
document.getElementById("loading").innerHTML =
2026-01-01 22:24:30 -06:00
'< div style = "text-align: center; padding: 40px;" > < p style = "color: #ef4444; font-size: 18px; margin-bottom: 16px;" > Error loading product< / p > < p style = "color: #6b7280; margin-bottom: 20px;" > ' +
error.message +
'< / p > < a href = "/shop" style = "color: #FCB1D8; text-decoration: none; font-weight: 600;" > ← Back to Shop< / a > < / div > ';
2025-12-24 00:13:23 -06:00
}
2025-12-13 22:59:42 -06:00
}
2025-12-24 00:13:23 -06:00
function addToCart() {
if (window.currentProduct & & window.shoppingManager) {
shoppingManager.addToCart(window.currentProduct, 1);
}
2025-12-13 22:59:42 -06:00
}
2025-12-24 00:13:23 -06:00
function addToWishlist() {
if (window.currentProduct & & window.shoppingManager) {
shoppingManager.addToWishlist(window.currentProduct);
}
2025-12-13 22:59:42 -06:00
}
2025-12-24 00:13:23 -06:00
2026-01-01 22:24:30 -06:00
// Track viewed products for smart recommendations
function trackViewedProduct(product) {
try {
let viewedProducts = JSON.parse(
localStorage.getItem("skyart_viewed_products") || "[]"
);
// Remove if already exists (to update timestamp)
viewedProducts = viewedProducts.filter((p) => p.id !== product.id);
// Add to beginning of array
viewedProducts.unshift({
id: product.id,
name: product.name,
category: product.category,
imageurl: product.imageurl,
price: product.price,
viewedAt: new Date().toISOString(),
});
// Keep only last 20 viewed products
viewedProducts = viewedProducts.slice(0, 20);
localStorage.setItem(
"skyart_viewed_products",
JSON.stringify(viewedProducts)
);
} catch (e) {
console.error("Error tracking viewed product:", e);
}
}
// Load related products (same category + recently viewed)
async function loadRelatedProducts(category, currentProductId) {
try {
const container = document.getElementById("relatedProductsGrid");
if (!container) return;
// Show loading
container.innerHTML =
'< div style = "grid-column: 1/-1; text-align: center; padding: 40px; color: #6b7280;" > Loading recommendations...< / div > ';
// Fetch products from same category
const response = await fetch("/api/products");
const data = await response.json();
if (data.success & & data.products) {
let relatedProducts = [];
// Get products from same category (excluding current)
const sameCategoryProducts = data.products.filter(
(p) => p.category === category & & p.id !== currentProductId
);
// Get recently viewed products
const viewedProducts = JSON.parse(
localStorage.getItem("skyart_viewed_products") || "[]"
);
const viewedIds = viewedProducts
.map((p) => p.id)
.filter((id) => id !== currentProductId);
const recentlyViewedProducts = data.products.filter(
(p) => viewedIds.includes(p.id) & & p.id !== currentProductId
);
// Combine: prioritize same category, then recently viewed
relatedProducts = [...sameCategoryProducts];
recentlyViewedProducts.forEach((p) => {
if (!relatedProducts.find((rp) => rp.id === p.id)) {
relatedProducts.push(p);
}
});
// Shuffle and limit to 4-8 products
relatedProducts = shuffleArray(relatedProducts).slice(0, 8);
if (relatedProducts.length === 0) {
container.innerHTML =
'< div style = "grid-column: 1/-1; text-align: center; padding: 40px; color: #6b7280;" > No related products found.< / div > ';
return;
}
// Render products
container.innerHTML = relatedProducts
.map((product) => {
// Get product image (primary or first from images array)
let productImage = "/assets/images/placeholder.svg";
if (
product.images & &
Array.isArray(product.images) & &
product.images.length > 0
) {
const primaryImg = product.images.find(
(img) => img.is_primary
);
productImage = primaryImg
? primaryImg.image_url
: product.images[0].image_url;
} else if (product.imageurl) {
productImage = product.imageurl;
}
return `
< a href = "/product?id=${
product.id
}" style="text-decoration: none; color: inherit; display: block; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: all 0.3s; border: 1px solid #e5e7eb;"
onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 8px 16px rgba(0,0,0,0.12)'"
onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 8px rgba(0,0,0,0.08)'">
< div style = "aspect-ratio: 1; overflow: hidden; background: #f9fafb;" >
< img src = "${productImage}"
alt="${product.name}"
style="width: 100%; height: 100%; object-fit: cover;"
onerror="this.src='/assets/images/placeholder.svg'" />
< / div >
< div style = "padding: 16px;" >
< h3 style = "font-size: 16px; font-weight: 600; color: #1a1a1a; margin: 0 0 8px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" >
${product.name}
< / h3 >
${
product.shortdescription || product.description
? `
< p style = "font-size: 14px; color: #636e72; margin: 0 0 12px 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;" >
${
product.shortdescription ||
(product.description
? product.description.substring(0, 80) + "..."
: "")
}
< / p >
`
: ""
}
${
product.category
? `
< p style = "font-size: 13px; color: #6b7280; margin: 0 0 12px 0;" >
< i class = "bi bi-tag" > < / i > ${product.category}
< / p >
`
: ""
}
< div style = "display: flex; align-items: center; justify-content: space-between;" >
< p style = "font-size: 20px; font-weight: 700; color: #6b46c1; margin: 0;" >
$${parseFloat(product.price).toFixed(2)}
< / p >
${
product.stockquantity > 0
? '< span style = "font-size: 12px; color: #10b981; font-weight: 500;" > < i class = "bi bi-check-circle-fill" > < / i > In Stock< / span > '
: '< span style = "font-size: 12px; color: #ef4444; font-weight: 500;" > < i class = "bi bi-x-circle-fill" > < / i > Out of Stock< / span > '
}
< / div >
< / div >
< / a >
`;
})
.join("");
}
} catch (error) {
console.error("Error loading related products:", error);
const container = document.getElementById("relatedProductsGrid");
if (container) {
container.innerHTML =
'< div style = "grid-column: 1/-1; text-align: center; padding: 40px; color: #ef4444;" > Error loading recommendations.< / div > ';
}
}
}
// Shuffle array utility
function shuffleArray(array) {
const arr = [...array];
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
}
return arr;
}
2025-12-24 00:13:23 -06:00
loadProduct();
< / script >
2026-01-01 22:24:30 -06:00
<!-- Footer -->
< footer class = "footer" >
< div class = "container" >
< div class = "footer-grid" >
< div class = "footer-col" >
< h3 class = "footer-title" id = "footerSiteName" > Sky Art Shop< / h3 >
< p class = "footer-text" >
Your destination for unique art pieces and creative supplies.
< / p >
< div class = "social-links" >
< a href = "#" class = "social-link" > < i class = "bi bi-facebook" > < / i > < / a >
< a href = "#" class = "social-link"
>< i class = "bi bi-instagram" > < /i
>< / a >
< a href = "#" class = "social-link" > < i class = "bi bi-twitter" > < / i > < / a >
< a href = "#" class = "social-link"
>< i class = "bi bi-pinterest" > < /i
>< / a >
< / div >
< / div >
< div class = "footer-col" >
< h4 class = "footer-heading" > Shop< / h4 >
< ul class = "footer-links" >
< li > < a href = "/shop" > All Products< / a > < / li >
< li > < a href = "/shop?category=paintings" > Paintings< / a > < / li >
< li > < a href = "/shop?category=prints" > Prints< / a > < / li >
< li > < a href = "/shop?category=supplies" > Art Supplies< / a > < / li >
< / ul >
< / div >
< div class = "footer-col" >
< h4 class = "footer-heading" > About< / h4 >
< ul class = "footer-links" >
< li > < a href = "/about" > Our Story< / a > < / li >
< li > < a href = "/portfolio" > Portfolio< / a > < / li >
< li > < a href = "/blog" > Blog< / a > < / li >
< li > < a href = "/contact" > Contact< / a > < / li >
< / ul >
< / div >
< div class = "footer-col" >
< h4 class = "footer-heading" > Customer Service< / h4 >
< ul class = "footer-links" >
< li > < a href = "/shipping-info" > Shipping Info< / a > < / li >
< li > < a href = "/returns" > Returns< / a > < / li >
< li > < a href = "/faq" > FAQ< / a > < / li >
< li > < a href = "/privacy" > Privacy Policy< / a > < / li >
< / ul >
< / div >
< / div >
< div class = "footer-bottom" >
< p id = "footerText" > © 2025 Sky Art Shop. All rights reserved.< / p >
< / div >
< / div >
< / footer >
2025-12-24 00:13:23 -06:00
< / body >
2025-12-13 22:59:42 -06:00
< / html >
