Updatweb
This commit is contained in:
@@ -121,7 +121,7 @@
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(\`/api/products/\${productId}\`);
|
||||
const response = await fetch(`/api/products/${productId}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (!data.success || !data.product) {
|
||||
@@ -129,9 +129,9 @@
|
||||
}
|
||||
|
||||
const product = data.product;
|
||||
document.title = \`\${product.name} - Sky Art Shop\`;
|
||||
document.title = `${product.name} - Sky Art Shop`;
|
||||
|
||||
document.getElementById('productDetail').innerHTML = \`
|
||||
document.getElementById('productDetail').innerHTML = `
|
||||
<div style="font-family: 'Roboto', sans-serif;">
|
||||
<nav style="background: white; padding: 16px 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
|
||||
<div style="max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 20px;">
|
||||
@@ -139,7 +139,7 @@
|
||||
<span style="color: #d1d5db;">/</span>
|
||||
<a href="/shop.html" style="color: #6b7280; text-decoration: none;">Shop</a>
|
||||
<span style="color: #d1d5db;">/</span>
|
||||
<span style="color: #6b7280;">\${product.name}</span>
|
||||
<span style="color: #6b7280;">${product.name}</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -147,48 +147,48 @@
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-bottom: 60px;">
|
||||
<div>
|
||||
<div style="background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
|
||||
<img src="\${product.imageurl || '/assets/images/placeholder.jpg'}"
|
||||
alt="\${product.name}"
|
||||
<img src="${product.imageurl || '/assets/images/placeholder.jpg'}"
|
||||
alt="${product.name}"
|
||||
style="width: 100%; height: auto; display: block;"
|
||||
onerror="this.src='/assets/images/placeholder.jpg'" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="padding: 20px 0;">
|
||||
<h1 style="font-size: 36px; font-weight: 700; color: #1a1a1a; margin: 0 0 16px 0; line-height: 1.2;">\${product.name}</h1>
|
||||
<h1 style="font-size: 36px; font-weight: 700; color: #1a1a1a; margin: 0 0 16px 0; line-height: 1.2;">${product.name}</h1>
|
||||
|
||||
<div style="display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px;">
|
||||
<p style="font-size: 36px; font-weight: 700; color: #6b46c1; margin: 0;">$\${parseFloat(product.price).toFixed(2)}</p>
|
||||
\${product.stockquantity > 0 ?
|
||||
\`<span style="color: #10b981; font-weight: 500;">In Stock (\${product.stockquantity} available)</span>\` :
|
||||
\`<span style="color: #ef4444; font-weight: 500;">Out of Stock</span>\`
|
||||
<p style="font-size: 36px; font-weight: 700; color: #6b46c1; margin: 0;">$${parseFloat(product.price).toFixed(2)}</p>
|
||||
${product.stockquantity > 0 ?
|
||||
`<span style="color: #10b981; font-weight: 500;">In Stock (${product.stockquantity} available)</span>` :
|
||||
`<span style="color: #ef4444; font-weight: 500;">Out of Stock</span>`
|
||||
}
|
||||
</div>
|
||||
|
||||
\${product.shortdescription ? \`
|
||||
<p style="font-size: 18px; color: #4b5563; line-height: 1.6; margin-bottom: 24px;">\${product.shortdescription}</p>
|
||||
\` : ''}
|
||||
${product.shortdescription ? `
|
||||
<p style="font-size: 18px; color: #4b5563; line-height: 1.6; margin-bottom: 24px;">${product.shortdescription}</p>
|
||||
` : ''}
|
||||
|
||||
\${product.description ? \`
|
||||
${product.description ? `
|
||||
<div style="margin-bottom: 32px;">
|
||||
<h3 style="font-size: 18px; font-weight: 600; color: #1a1a1a; margin-bottom: 12px;">Description</h3>
|
||||
<p style="color: #6b7280; line-height: 1.7;">\${product.description}</p>
|
||||
<p style="color: #6b7280; line-height: 1.7;">${product.description}</p>
|
||||
</div>
|
||||
\` : ''}
|
||||
` : ''}
|
||||
|
||||
\${product.category ? \`
|
||||
${product.category ? `
|
||||
<p style="margin-bottom: 16px;">
|
||||
<span style="font-weight: 500; color: #6b7280;">Category:</span>
|
||||
<span style="display: inline-block; margin-left: 8px; padding: 4px 12px; background: #f3f4f6; border-radius: 6px; font-size: 14px;">\${product.category}</span>
|
||||
<span style="display: inline-block; margin-left: 8px; padding: 4px 12px; background: #f3f4f6; border-radius: 6px; font-size: 14px;">${product.category}</span>
|
||||
</p>
|
||||
\` : ''}
|
||||
` : ''}
|
||||
|
||||
\${product.color ? \`
|
||||
${product.color ? `
|
||||
<p style="margin-bottom: 24px;">
|
||||
<span style="font-weight: 500; color: #6b7280;">Color:</span>
|
||||
<span style="margin-left: 8px;">\${product.color}</span>
|
||||
<span style="margin-left: 8px;">${product.color}</span>
|
||||
</p>
|
||||
\` : ''}
|
||||
` : ''}
|
||||
|
||||
<div style="display: flex; gap: 12px; margin-top: 32px;">
|
||||
<button onclick="addToCart()"
|
||||
@@ -213,7 +213,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
\`;
|
||||
`;
|
||||
|
||||
document.getElementById('loading').style.display = 'none';
|
||||
document.getElementById('productDetail').style.display = 'block';
|
||||
|
||||
Reference in New Issue
Block a user