103 lines
3.0 KiB
HTML
103 lines
3.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Products Test</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
padding: 20px;
|
||
|
|
background: #f5f5f5;
|
||
|
|
}
|
||
|
|
.product-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||
|
|
gap: 20px;
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
.product-card {
|
||
|
|
background: white;
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
border-radius: 8px;
|
||
|
|
padding: 15px;
|
||
|
|
}
|
||
|
|
.product-card img {
|
||
|
|
width: 100%;
|
||
|
|
height: 200px;
|
||
|
|
object-fit: cover;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
.product-card h3 {
|
||
|
|
margin: 10px 0;
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
.product-card .price {
|
||
|
|
color: #ff6b6b;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 18px;
|
||
|
|
}
|
||
|
|
.loading {
|
||
|
|
text-align: center;
|
||
|
|
padding: 40px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Product API Test</h1>
|
||
|
|
<div id="status" class="loading">Loading products...</div>
|
||
|
|
<div id="products" class="product-grid"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
async function testProducts() {
|
||
|
|
const statusDiv = document.getElementById("status");
|
||
|
|
const productsDiv = document.getElementById("products");
|
||
|
|
|
||
|
|
try {
|
||
|
|
console.log("Fetching products from /api/products...");
|
||
|
|
const response = await fetch("/api/products");
|
||
|
|
console.log("Response status:", response.status);
|
||
|
|
|
||
|
|
const data = await response.json();
|
||
|
|
console.log("Response data:", data);
|
||
|
|
|
||
|
|
if (data.success && data.products) {
|
||
|
|
const products = data.products;
|
||
|
|
statusDiv.innerHTML = `<strong>Success!</strong> Loaded ${products.length} products`;
|
||
|
|
statusDiv.style.color = "green";
|
||
|
|
|
||
|
|
productsDiv.innerHTML = products
|
||
|
|
.map(
|
||
|
|
(p) => `
|
||
|
|
<div class="product-card">
|
||
|
|
<img src="${
|
||
|
|
p.imageurl || "/assets/images/placeholder.jpg"
|
||
|
|
}"
|
||
|
|
alt="${p.name}"
|
||
|
|
onerror="this.src='/assets/images/placeholder.jpg'">
|
||
|
|
<h3>${p.name}</h3>
|
||
|
|
<p>${p.shortdescription || p.description || ""}</p>
|
||
|
|
<p class="price">$${parseFloat(p.price).toFixed(
|
||
|
|
2
|
||
|
|
)}</p>
|
||
|
|
</div>
|
||
|
|
`
|
||
|
|
)
|
||
|
|
.join("");
|
||
|
|
|
||
|
|
console.log("Products rendered successfully");
|
||
|
|
} else {
|
||
|
|
statusDiv.innerHTML = "<strong>Error:</strong> No products found";
|
||
|
|
statusDiv.style.color = "red";
|
||
|
|
console.error("No products in response");
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
statusDiv.innerHTML = `<strong>Error:</strong> ${error.message}`;
|
||
|
|
statusDiv.style.color = "red";
|
||
|
|
console.error("Error loading products:", error);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
testProducts();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|