Spaces:
Running
Running
File size: 2,799 Bytes
5cc830e c821e69 f282b32 c821e69 5cc830e c821e69 f282b32 5cc830e c821e69 f282b32 c821e69 ffcde35 c821e69 ffcde35 c821e69 ffcde35 c821e69 ffcde35 c821e69 ffcde35 c821e69 f2efb9e c821e69 ffcde35 c821e69 f2efb9e c821e69 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Details</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body class="bg-gray-100">
<div class="container mx-auto p-4">
<a href="index.html" class="block text-blue-500 hover:underline mb-4">Back to Home</a>
<div id="product-details" class="bg-white shadow-md rounded-lg overflow-hidden">
<img id="product-image" src="" alt="Product Image" class="w-full h-64 object-cover">
<div class="p-4">
<h2 id="product-name" class="text-2xl font-semibold mb-2"></h2>
<p id="product-description" class="text-gray-700 mb-2"></p>
<p id="product-price" class="text-lg font-bold mb-2"></p>
<button id="add-to-cart-button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Add to Cart
</button>
</div>
</div>
</div>
<script type="module">
import { products } from './data.js';
document.addEventListener('DOMContentLoaded', function() {
const urlParams = new URLSearchParams(window.location.search);
const productId = urlParams.get('id');
if (productId) {
fetchProductDetails(productId);
} else {
document.getElementById('product-details').innerHTML = '<p>Product not found.</p>';
}
function fetchProductDetails(productId) {
// Fetch product data from data.js
const product = products.find(p => p.id === productId);
if (product) {
displayProduct(product);
} else {
document.getElementById('product-details').innerHTML = '<p>Product not found.</p>';
}
}
function displayProduct(product) {
document.getElementById('product-image').src = product.image;
document.getElementById('product-name').textContent = product.name;
document.getElementById('product-description').textContent = product.description;
document.getElementById('product-price').textContent = '$' + product.price.toFixed(2);
document.getElementById('add-to-cart-button').addEventListener('click', function() {
addToCart(product);
});
}
});
</script>
</body>
</html> |